Question

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

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

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

Answer 1

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属性的替代方案。

Answer 2

您需要在希望对象旋转的位置绘制图形容器，然后绘制对象，使其中心为图形的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 +（宽度/ 2）和y1 +（高度/ 2）计算其中心在屏幕上的位置，然后我们将矩形向左偏移到顶部使用drawRect（ - （width / 2）， - （height / 2），x2，y2）的宽度的一半和高度的一半;

pixi.js pivot影响对象位置

2 个答案: