KineticJS/Javascript動態創建和立即拖動

Question

我想要做的是動態地在mousedown上創建一個形狀，然後立即讓它（形狀）跟隨鼠標光標，直到mouseup將其設置到位。 這是我到目前爲止，它不適合我。

addNegativeButton.on('mousedown', function(){ 
    var userPos = stage.getUserPosition(); 
    shapesLayer.add(new Kinetic.Image({ 
      image: imageObj, 
      x: userPos.x, 
      y: userPos.y, 
      height: 25, 
      width: 25, 
      rotation: 1,      
      draggable: true, 
      offset: 12 
})); 

var last = shapesLayer.getChildren()[shapesLayer.getChildren().length -1]; 
stage.on("mouseup", function(){ 
    last.setAbsolutePosition(stage.getUserPosition()); 
    stage.off("mouseup"); 
}); 

重申： 我有一個「addNegativeButton」點擊它時，創建一個形狀。 但我希望它遵循鼠標光標，直到點擊被釋放。

http://jsfiddle.net/CPrEe/37/ 有什麼建議嗎？

Answer 1

原來它相當簡單;）
後您添加的元素/形狀，所有你需要做的就是使用模擬功能來模擬鼠標向下拖動它....

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
}); 

var layer = new Kinetic.Layer(); 

var rect = new Kinetic.Rect({ 
    x: 20, 
    y: 20, 
    width: 100, 
    height: 50, 
    fill: 'green', 
    stroke: 'black', 
    strokeWidth: 4 
}); 
//What I really want here is to start dragging the circle until the 
//user releases the mouse, which would then place the circle. 
rect.on('mousedown', function(evt) { 

    var userPos = stage.getUserPosition(); 
    var latestElement = new Kinetic.Circle({ 
     x: userPos.x, 
     y: userPos.y, 
     radius: 20, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4, 
     draggable: true 
    }) 

    layer.add(latestElement); 

    // Here's the bit you want. After adding the circle (with draggable:true) simulate the mousedown event on it which will initiate the drag 
    latestElement.simulate('mousedown'); 

    layer.draw(); 
}); 

layer.add(rect); 

stage.add(layer);​ 

http://jsfiddle.net/CPrEe/38/
http://kineticjs.com/docs/symbols/Kinetic.Node.php#simulate