使用kinetic js更新画布

时间:2012-08-16 10:53:15

标签: javascript html5-canvas

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

1 个答案:

答案 0 :(得分:2)

你很亲密,试试这个:

box.setX(handle_left.getX());

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