使用動力學js更新畫布

我正在使用動力學JS拖動矩形'left_handle'。在拖動過程中，我還想將另一個矩形「框」的左邊緣放在它的頂部。我沒有得到任何錯誤，所以我假設我正在做的工作，但我認爲我需要做一些更新畫布或...？使用動力學js更新畫布

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

來源

2012-08-16 Djave

你接近，試試這個：

box.setX(handle_left.getX());

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

來源

2012-08-17 04:44:17

這也將工作，並可能會稍快：box.setX（handle_left.attrs 。X）; （所有的屬性都存儲在** attrs **屬性中） – 2012-08-17 04:52:32

使用動力學js更新畫布

回答

相關問題