javascript - 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