6

我对 DisplayObject 的 pivot 属性有疑问。特别是，我想围绕它的中心旋转一个 DisplayObjectContainer；所以我将枢轴设置为其中心点。但是，我注意到这会影响元素的位置。

例如，如果我将位置设置为 0,0（这是默认值），pixijs 将尝试根据对象的中心点而不是左上角来定位对象。因此 DisplayObjectContainer 的子级（在我的例子中是 Graphics 类的一个实例）用完了主视口。

有没有办法设置旋转点，但仍然相对于其左上角定位对象。

4

2 回答 2

8

您需要在您希望对象旋转的点绘制图形容器，然后绘制对象，使其中心是图形的 x/y 位置。因此，要绘制一个在您希望的精确坐标处绘制的矩形，同时围绕其中心旋转，您将使用此函数。

self.createRect = function (x1, y1, x2, y2, color) {
    var graphics = new PIXI.Graphics();

    graphics.beginFill(color || 0x000000);
    //This is the point around which the object will rotate.
    graphics.position.x = x1 + (x2/2);
    graphics.position.y = y1 + (y2/2);

    // draw a rectangle at -width/2 and -height/2. The rectangle's top-left corner will
    // be at position x1/y1
    graphics.drawRect(-(x2/2), -(y2/2), x2, y2);

    self.stage.addChild(graphics);

    return graphics;
};

由于它是正方形或矩形，我们可以使用 x1 + (width/2) 和 y1 + (height/2) 计算其中心在屏幕上的位置，然后我们将矩形向左和顶部偏移一半使用 drawRect(-(width/2), -(height/2), x2, y2)；

于 2013-08-02T02:52:24.013 回答
7

枢轴属性有点令人困惑。想象以下示例：您的枢轴是位于对象某处的螺钉（它当然也可以位于外部某处，但为了更好地理解，假设您的对象是一块木板，螺钉伸出）。您的位置（图形/容器）是一个螺丝。对象始终围绕该位置旋转，但您可以更改对象上的枢轴（木板上螺钉的位置），因此它将成为对象的新旋转点。最后，您可以尝试将木板拧到螺丝上。

基本上，位置和枢轴的默认值为0。因此，如果您在此处绘制对象，例如：

test.drawRoundedRect(100, 100, 200, 200,12);

您现在可以尝试旋转它，您会看到它围绕点 (0,0) 旋转。

图形始终围绕位置旋转，您可以尝试将其定位到其他位置：

test.position.x = 200;
test.position.y = 200;

对象现在围绕点 (200,200) 旋转。但这只是一个转变。我们现在可以尝试将枢轴点（即螺丝）更改为任何不同的位置。所以，在你的木板上，你只需将螺丝放在 (50,50)，然后 (100,100) 等等，你会发现它会影响你的物体位置。

现在，对于我们的示例，我们可以将枢轴点设置为 (200,200)，与对象的位置相同。

test.pivot.x = 200;
test.pivot.y = 200;

最后它围绕绘制对象的中心点旋转。

@Spencer 提供的解决方案是 pivot 属性的替代方案。

于 2016-08-18T15:03:33.670 回答