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在兩個組之間共享一個對象

回答

相關問題