2

Kinetic JS を使用して四角形 'left_handle' をドラッグしています。ドラッグ中に、別の長方形の「ボックス」の左端をその上に配置したいと思います。エラーが発生していないので、私がやっていることはうまくいっていると思いますが、キャンバスを更新するために何かをする必要があると思いますか...?

left_handle の四角形は期待どおりに移動しますが、ボックスには何も起こりません。

    var STAGE_WIDTH = 500;    

    var stage = new Kinetic.Stage({
      container: "container",
      width: STAGE_WIDTH,
      height: 200
    });
    var layer = new Kinetic.Layer();
    var rectX = 80;
    var rectY = stage.getHeight() / 2 - 25;

    var box = new Kinetic.Rect({
      x: rectX,
      y: rectY,
      width: 100,
      height: 50,
      fill: "#00D2FF",
      stroke: "black",
      strokeWidth: 4
    });

    var handle_left = new Kinetic.Rect({
        x: rectX,
        y: rectY,
        height: 50,
        width: 10,
        fill:'#FFC400',
        stroke:'black',
        strokeWidth:3,
        draggable:true,
        dragConstraint:'horizontal',
        dragBounds: {
            left: 10, right: STAGE_WIDTH - 20
        }
    });    

    // - - - - - - - this is the bit that doesn't work - - - - - 
    handle_left.on('dragmove', function(evt) {
      box.setX(handle_left.x);
      layer.draw();
    });
    // - - - - - - - - - - - - 

    layer.add(box);
    layer.add(handle_left);
    stage.add(layer);

</p>

4

1 に答える 1

2

あなたは近くにいました、これを試してください：

box.setX(handle_left.getX());

参考： http: //jsfiddle.net/jHCRm/

于 2012-08-17T04:44:17.657 に答える