두 그룹 사이에 하나의 객체를 공유하는 키네틱 스

Question

키네틱스를 사용하여 세로선과 가운데에 가로선과 원을 그립니다.

var stage1 = new Kinetic.Stage({ 
       container: 'container', 
       width: 1024, 
       height: 1024 
      }); 
       var blayer1 = new Kinetic.Layer(); 
      var bgroup1 = new Kinetic.Group({ 
       draggable: true, 
       dragBoundFunc: function (pos) { 
        return { 
         x: pos.x, 
         y: this.getAbsolutePosition().y 
        } 
       } 
      }); 
      var BlueLine1 = new Kinetic.Line({ 
       points: [512, 0, 512, 1024], 
       stroke: '#0080c0', 
       strokeWidth: 2, 
       lineCap: 'round', 
       lineJoin: 'round' 
      }); 
      var circle = new Kinetic.Circle({ 
       x: stage1.getWidth()/2, 
       y: stage1.getHeight()/2, 
       radius: 140, 
       stroke: '#00ffff', 
       strokeWidth: 2 
      }); 
      bgroup1.add(circle); 
      bgroup1.add(BlueLine1); 
      blayer1.add(bgroup1); 
      stage1.add(blayer1); 
      blayer1.draw(); 

      var glayer1 = new Kinetic.Layer(); 
      var ggroup1 = new Kinetic.Group({ 
       draggable: true, 
       dragBoundFunc: function (pos) { 
        return { 
         x: this.getAbsolutePosition().x, 
         y: pos.y 
        } 
       } 
      }); 
      var GreenLine1 = new Kinetic.Line({ 
       points: [0, 512, 1024, 512], 
       stroke: 'red', 
       strokeWidth: 2, 
       lineCap: 'round', 
       lineJoin: 'round' 
      }); 
      ggroup1.add(GreenLine1); 
      glayer1.add(ggroup1); 
      stage1.add(glayer1); 
      glayer1.draw(); 
     } 

Answer 1

여기 당신이 개 그룹

을 사이에 하나의 원을 공유하는 방법은 다음과 같습니다 나는 그러나 나뿐만 아니라 수평 라인으로 원을 이동하고 싶은, 수직 라인과 원을 그룹화 한 여기 내 스크립트입니다

".moveTo()"를 사용하여 원하는 그룹으로 원을 이동하십시오.

이것은 ggroup1으로 원을 이동, 그래서 ggroup1 이제 수직선과 원이 있습니다

: 이것은 bgroup1으로 원을 이동

circle.moveTo(ggroup1); 
blayer1.draw(); 
glayer1.draw(); 

을 지금 수평 라인과 원을 가지고 bgroup1 때문에

circle.moveTo(bgroup1); 
blayer1.draw(); 
glayer1.draw(); 

나는 2 개의 분리 된 레이어를 사용하고 있습니다. 2 층의 목적은 당신이하고있는 다른 것을위한 것이라고 생각합니다. 하지만 서클 공유를 가능하게하기 위해 레이어 2 개가 필요하지 않습니다. . 1 개의 레이어에 2 개의 그룹을 가질 수 있으며 여전히 2 개의 그룹 사이에서 원을 움직일 수 있습니다.