지정된 클래스 캔버스에 도형을 떨어 뜨리는 방법

Question

안녕하세요 저는 kineticjs를 사용하고 있으며, 지정된 클래스 캔버스에 도형을 떨어 뜨리는 것이 가능한지 궁금합니다. 그래서 같은 클래스의 5 캔버스를 가지고 있다면 이것이 제 모양을 떨어 뜨릴 수있는 곳입니다. 그것들이이 캔버스 중 하나에 떨어지지 않으면 그것이 있던 곳으로 되돌아갑니다! 지금 당장 가지고있는 유일한 코드는 제가 만든 모양입니다.

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 965, 
    height: 200 
    }); 

    var layer = new Kinetic.Layer();  
    var poly = new Kinetic.Rect({ 
    x: 75, 
    y: 75, 
    width: 100, 
    height: 50, 
    fill: '#00D2FF', 
    stroke: 'white', 
    strokeWidth: 4, 
    draggable: true 
    }); 

    // add the shape to the layer 
    layer.add(poly); 

    // add the layer to the stage 
    stage.add(layer); 

Answer 1

kineticJS는

.moveTo(); // ( node.moveTo(container); ) 

방법이있다. 예 :

poly.moveTo(stage); 

하거나 스테이지 1, 스테이지 2, 스테이지 3과 같은 여러 개의 캔버스가있는 경우 :

poly.moveTo(stage1); poly.moveTo(stage2); poly.moveTo(stage3); 

당신은 또한 컨테이너에게 주어진 마우스 좌표를 반환하는 리스너를 작성해야합니다. 그래서 'mousemove'또는 'touchmove'를 할 때 여러분은 여러분이 어느 컨테이너/무대에 있는지를 결정할 수 있습니다. 그리고 유효한 컨테이너에 있다면 모양을 그곳으로 옮깁니다.

나는 개인적으로 한 단계를 만들고, 부분으로 분할하고, 고정 된 크기의 그 부분의 층을, 당신이 단지 수있는이 방법이 쉬울 것이라고 생각

:

var coordinates = stage.getUserPosition(); 

및 해당를 사용 객체를 배치 할 레이어 결정 (레이어는 컨테이너 유형 임)