2

私がやりたいのは、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/ 何か提案はありますか？

4

1 に答える 1

2

かなり単純なことがわかります;）
要素/形状を追加したら、simulate関数を使用してマウスを下にシミュレートし、ドラッグするだけです。 

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

于 2012-12-17T07:57:14.100 に答える