javascript - 使用kinetic js更新 Canvas

Question

我正在使用 Kinetic JS 拖动一个矩形“left_handle”。在拖动过程中，我还想将另一个矩形“框”的左边缘放置在其顶部。我没有收到任何错误，所以我假设我正在做的事情正在工作，但我认为我需要做一些事情来更新 Canvas 或......？

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);

​

Answer 1

你已经很接近了，试试这个:

box.setX(handle_left.getX());

引用:http://jsfiddle.net/jHCRm/