javascript - pixi.js pivot 影响对象位置

Question

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

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

有什么方法可以设置旋转点，但仍然相对于其左上角定位对象。

Answer 1

您需要在希望对象旋转的位置绘制图形容器，然后绘制对象，使其中心位于图形的 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) 计算它的中心在屏幕上的位置，然后我们将 rect 向左和向上偏移使用 drawRect(-(width/2), -(height/2), x2, y2); 将宽度减半，高度减半；