我有一个关于 DisplayObject 的 pivot 属性的问题。特别是，我想围绕它的中心旋转一个 DisplayObjectContainer；所以我将枢轴设置为其中心点。但是，我注意到这会影响元素的位置。
例如，如果我将位置设置为 0,0（这是默认值），pixijs 将尝试根据对象的中心点而不是左上角来定位对象。因此 DisplayObjectContainer 的子级（在我的例子中是 Graphics 类的一个实例）用完了主视口。
有什么方法可以设置旋转点，但仍然相对于其左上角定位对象。
【问题讨论】：
标签： javascript canvas drawing pixi.js
您需要在您希望对象围绕其旋转的点绘制图形容器，然后绘制对象，使其中心为图形的 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);
【讨论】：
pivot 属性有点混乱。想象以下示例： 您的枢轴是位于对象某处的螺丝（它当然也可以位于外部某处，但为了更好地理解，假设您的对象是一块木板，螺丝伸出）。你的位置（图形/容器）是一个螺丝。对象始终围绕该位置旋转，但您可以更改对象上的枢轴（螺钉在木板上的位置），因此它将成为新的旋转点目的。最后，您可以尝试将木板拧到螺丝上。
基本上，位置和轴心的默认值为 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 属性的替代方案。
【讨论】：