在Konva JS中拖動後獲取形狀的X和Y

Question

我在我的項目中使用Konva JS。我在可拖動的按鈕單擊上添加一個形狀。點擊形狀我需要獲得形狀的X和Y位置。 getX和getY函數正在返回原始的X和Y.如何在拖動後更新X和Y.

下面的示例代碼。

var stage = new Konva.Stage({ 
 
     container: 'canvas', // id of container <div> 
 
     width: 500, 
 
     height:300 
 
    }); 
 
    
 
jQuery("#add-shape").click(function(){ 
 
addShape(); 
 
}); 
 
    
 
var addShape = function(){ 
 
    
 
console.log("add shape"); 
 
    
 
var layer = new Konva.Layer(); 
 
var parentContainer = new Konva.Rect({ 
 
      x: stage.getWidth()/2, 
 
      y: stage.getHeight()/2, 
 
      width: 200, 
 
      height: 60, 
 
      cornerRadius: 10, 
 
      fill: '#ccc' 
 
     }); 
 
     
 
     var smallCircle = new Konva.Circle({ 
 
      x: stage.getWidth()/2 + 200, 
 
      y: stage.getHeight()/2 + 30, 
 
      radius: 15, 
 
      fill: "#F2784B", 
 
      stroke: "white", 
 
      strokeWidth: 2 
 
     }); 
 
     
 
     smallCircle.on('click', function() { 
 
     console.log(this.getX(),this.getY()); 
 
      addArrow(this.getX(),this.getY()); 
 
      //get current X and Y here instead of origina X and Y 
 
     }); 
 
     layer.add(parentContainer); 
 
     layer.add(smallCircle); 
 
     layer.draggable('true'); 
 
     stage.add(layer); 
 
} 
 

 
var addArrow = function(arrowX,arrowY){ 
 
    var connectorLayer = new Konva.Layer(); 
 
\t var connector = new Konva.Arrow({ 
 
      points: [arrowX,arrowY,arrowX+10,arrowY], 
 
      pointerLength: 4, 
 
      pointerWidth: 4, 
 
      fill: 'black', 
 
      stroke: 'black', 
 
      strokeWidth: 2 
 
     }); 
 
    connectorLayer.add(connector); 
 
    stage.add(connectorLayer); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script> 
 
<button id="add-shape"> 
 
     Add shape 
 
     </button> 
 
<div id="canvas"> 
 
     
 
     </div>

Answer 1

如果你需要讓你可以使用鼠標的位置：

smallCircle.on('click', function() { 
    console.log(stage.getPointerPosition()); 
});