Pixi中displayObject旋转原点改为起始点的技术咨询

PixiJS 中所有 DisplayObject 的旋转默认以中心为原点，这是因为默认的 pivot（变换枢轴点）设置在对象中心。要将旋转原点改为起始点（通常指对象的左上角），可以通过以下两种方式实现：

直接修改枢轴点（Pivot） #

这是最直接的方式，将对象的 pivot 设置为本地坐标系的原点 (0, 0)：

// 针对目标DisplayObject
displayObject.pivot.set(0, 0);

如果操作的是 Sprite 类对象，建议同时将 anchor 也设为 (0, 0)，避免纹理偏移影响视觉效果：

displayObject.anchor.set(0, 0);
displayObject.pivot.set(0, 0);

修正位置的同时更改枢轴点 #

如果直接修改 pivot 导致对象位置偏移，可先记录当前位置，调整枢轴后修正坐标，保证视觉位置不变：

// 记录当前对象的位置
const originalX = displayObject.x;
const originalY = displayObject.y;

// 设置旋转原点为左上角
displayObject.pivot.set(0, 0);

// 修正对象位置，保持原有视觉位置
displayObject.x = originalX + displayObject.width / 2;
displayObject.y = originalY + displayObject.height / 2;

原理说明 #

PixiJS 的变换系统（旋转、缩放等）完全基于 pivot 属性，它定义了对象本地坐标系中变换的原点。默认情况下，pivot 被设置为对象的中心坐标（如 Sprite 的默认 pivot 对应纹理的中心），将其改为 (0, 0) 后，变换就会以对象的本地原点（起始点）为中心执行。

内容的提问来源于stack exchange，提问作者oguzcan