키네틱 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

당신이 가까웠다이 시도 : http://jsfiddle.net/jHCRm/

출처

2012-08-17 04:44:17

이 또한 작동하며 좀 더 빠르게 처리 될 수 있습니다 : box.setX (handle_left.attrs 참고로

box.setX(handle_left.getX());

.엑스); (모든 속성은 ** attrs ** 속성에 저장됩니다) –

키네틱 JS로 캔버스 업데이트

답변

관련 문제