KineticJS在两个组之间共享一个对象

我使用KineticJS在中间绘制垂直线和水平线以及一个圆。我已经分组的垂直线和圆，但我想移动的圆圈与水平线为好，这里是我的脚本：KineticJS在两个组之间共享一个对象

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

来源

2013-03-17 hncl

下面是如何共享2组

之间的一个圈

使用“.moveTo（）”将圆移动到您需要的任何组。

这会将你的圈子到ggroup1，所以ggroup1现在有您的垂直线和您的圈子：

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

这使你的圈入bgroup1，所以bgroup1现在有你的水平线上，你的圈子：

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

顺便说一句，我看到你使用2个单独的图层。我假设2层的目的是为了你正在做的其他事情。但是，您不需要2层就可以使圈子共享成为可能。您可以在1层上设置2组，并且仍然可以在两组之间移动圆圈。

来源

2013-03-17 18:57:16 markE

谢谢马克，这是你第二次帮我解答一个问题。它运作得非常棒，这个圈子回到舞台的中心，而不是在两条线被腐蚀的地方！再次感谢。 – hncl 2013-03-17 21:28:50

对不起，我忘了。你认为将圆的X和Y设置为stage1.getHeight/2可能是问题！ – hncl 2013-03-17 21:37:52

是的，更改后将圆移到另一个组，也可能需要重新调整x/y。您只需在开始时重新调整一次，因为即使您稍后移动组，该线和圆的相对位置也应该相同。 ;） – markE 2013-03-17 21:42:38

KineticJS在两个组之间共享一个对象

回答

相关问题