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

KineticJS / Javascript动态创建和即时拖动

1 个答案: