Question

虽然我非常接近an acceptable solution，但我无法正常工作。如果它只是一个矩形，我可以拖动Dock。但是，如果我将一个节点（例如图像）添加到此停靠站，我将无法获得有效的解决方案。

这是我的代码：

public class Dock extends CustomNode {

    // initialize this with an 64x64 image of your choice
    // via ImageView { image: Image {..}}
    public var content: Node[];
    public var width = 64;
    public var height = 64;
    public var xOffset: Number = 0;
    public var yOffset: Number = 0;
    var imgX: Number = 0;
    var imgY: Number = 0;
    var distX: Number;
    var distY: Number;
    public var rasterX = function (n: Number): Number {
                var MAX = 4 * 64;
                if (n < 0) {
                    return 0
                } else if (n > MAX) {
                    return MAX
                } else
                    return n
            }
    public var rasterY = rasterX;

    override protected function create(): Node {
        Group {
            // if we place the translate here then the whole dock will flicker
            //translateX: bind imgX;
            //translateY: bind imgY;
            content: [
                Rectangle {
                    // ... and here 'content' logically won't be dragged
                    translateX: bind imgX;
                    translateY: bind imgY;
                    height: bind height
                    width: bind width
                    fill: Color.LIGHTGRAY
                    strokeWidth: 4
                    stroke: Color.BLACK
                }, content]

            onMousePressed: function (e: MouseEvent): Void {
                    xOffset = e.x;
                    yOffset = e.y;

                    // Calculate the distance of the mouse point from the image
                    // top-left corner which will always come out as positive value
                    distX = e.x - imgX;
                    distY = e.y - imgY;                    
            }
            onMouseDragged: function (e: MouseEvent): Void {
                    // Find out the new image postion by subtracting the distance
                    // part from the mouse point.
                    imgX = rasterX(e.x - distX);
                    imgY = rasterY(e.y - distY);                    
            }
        }
    }

我尝试过blocksMouse：在不同节点上使用true，尝试使用mouseReleased等，但我没有得到正确的解决方案。你有没有关于它如何正确完成的指示/提示？

Answer 1

最后从this example排序，但你不需要按照教程（我有例外！？） - 只需下载sources或使用：

public class Dock extends CustomNode {

public var content: Node[];
public var width = 64;
public var height = 64;
public var xOffset: Number = 0;
public var yOffset: Number = 0;    
public var rasterX = function (n: Number): Number {
            // the following code is for the 'grid' which can be avoided of course
            var n2 = n - n mod 64;
            var MAX = 4 * 64;
            if (n2 < 0) {
                return 0
            } else if (n2 > MAX) {
                return MAX
            } else
                return n2
        }
public var rasterY = rasterX;    

override protected function create(): Node {
    var node: Group;
    node = Group {
        content: [
            Rectangle {
                height: bind height
                width: bind width
                arcHeight: 10
                arcWidth: 10
                fill: Color.LIGHTGRAY
                strokeWidth: 4
                stroke: Color.BLACK
                effect: DropShadow {
                    offsetX: 5
                    offsetY: 5
                    color: Color.DARKGRAY
                    radius: 10
                }
            }, content]
        onMousePressed: function (e: MouseEvent): Void {
            xOffset = e.sceneX - node.translateX;
            yOffset = e.sceneY - node.translateY;
        }
        onMouseDragged: function (e: MouseEvent): Void {
            node.translateX = rasterX(e.sceneX - yOffset);
            node.translateY = rasterY(e.sceneY - yOffset);
        }
    }
}
}

在JavaFX中拖动自定义节点

1 个答案: