在JavaFX中拖動自定義節點

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：不同節點上的真正的，有等的mouseReleased嘗試過，但我coudn't得到正常工作的解決方案。你有任何關於如何正確完成的指針/提示？

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); 
     } 
    } 
} 
}