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

Posted 2023-05-08

【中文标题】KineticJS / Javascript 动态创建和立即拖动

【英文标题】：KineticJS / Javascript dynamic creation and immediate dragging

【发布时间】：2012-12-03 13:02:56

【问题描述】：

我想要做的是在 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/ 有什么建议吗？

【问题讨论】：

用你目前拥有的东西制作一个示例 jsfiddle，我可能会尝试一下。

jsfiddle.net/CPrEe/37

【参考方案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

【讨论】：

谢谢，这正是我所需要的。我最近正在阅读模拟，但不知道如何使用它。