在其位置旋轉Two.js對象

Question

我有一個大圈子，里面有較小的圈子，使用two.js。

我的問題是這兩個不是在自己的位置旋轉，而是在左上軸。 我希望圓組（ circlesGroup ）僅在靜態位置的circlesGroup內旋轉 。 circlesGroup和大圓圈組合在一起作為rotatoGroup 。

two.bind('update', function(frameCount, timeDelta) {
  circlesGroup.rotation = frameCount / 120;
});

two.bind('update', function(frameCount, timeDelta) {
  rotatoGroup.rotation = frameCount / 60;
});

整個代碼在CodePen中 。

Answer 1

使用two.make... （圓形，矩形，多邊形和線條）調用時所有可見的形狀都定位在中心，就像這個Adobe Illustrator示例：

當此形狀的translation ， rotation或scale更改時，這些更改將反映為有關形狀中心的變換。

但是， Two.Group不會這樣做。 將它們視為無顯示矩形。 它們是原點，即group.translation矢量，總是從（0,0）開始。 在您的情況下，您可以通過規范化所有圈子中的定義translation來解決此問題。

示例1：在規范化空間中預定義

在這個codepen示例中，我們定義了-100,100周圍的所有圓的位置，實際上是正x和y方向上半徑的一半。 一旦我們在這些約束中定義了圓圈，我們就可以使用group.translation.set移動整個組，將其放在屏幕的中心。 現在，當圓圈旋轉時，它們被感知為圍繞自身旋轉。

例2：事后規范化

在這個codepen示例中，我們正在使用我們已有的東西。 包含所有形狀的Two.Group （較大的圓圈以及較小圓圈的數組）。 通過使用方法group.center(); （第31行）我們可以將該組的子項規范化為（0,0）。 然后，我們可以更改組的translation ，以便處於所需的位置。

注意：這個例子有點復雜，因為它調用了下划線的defer方法，該方法在注冊了所有更改后強制組的居中。 我正在解決這個問題。