javascript - 用动力学 js 更新画布

Question

我正在使用 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>

Answer 1

你很接近，试试这个：

box.setX(handle_left.getX());

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