保持矩形 B 在矩形 A 的顶部对齐，即使矩形 A 的锚点发生变化

Question

我有一个项目，我需要创建一个矩形，然后必须将另一个矩形放置在第一个矩形的顶部。

矩形 A 是一个 PIXI.Graphics 对象，因此应用程序的用户可以更改各种属性，例如矩形的锚点。

矩形 B 不是 PIXI 对象，只是一个必须覆盖在顶部的矩形。

这使得当矩形 A 的锚点发生变化时，很难使矩形 B 与矩形 A 对齐，因此它在游戏中的位置也会发生变化。

为了演示，我创建了一个片段，其中两个矩形都是图形对象，以便可以看到矩形 B，但在实际应用程序中，矩形 B 不是 PIXI.Graphics对象。

const app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

const rectangleA = new PIXI.Graphics();
rectangleA.beginFill(0x000000);
rectangleA.drawRect(0, 0, 100, 100);
rectangleA.position.set(100, 100);
rectangleA.endFill();

const rectangleB = new PIXI.Graphics();
rectangleB.beginFill(0xFFFFFF);
rectangleB.alpha = 0.5;
rectangleB.drawRect(rectangleA.x, rectangleA.y, 100, 100);
rectangleB.endFill();

app.stage.addChild(rectangleA);
app.stage.addChild(rectangleB);

<script src="https://pixijs.download/v5.0.0-alpha.3/pixi.min.js"></script>

我发现，如果我将矩形 A 的锚点更改为 (0.5, 0.5)，则矩形 B 的位置可以调整为：(rectangleA.x - (rectangleA.width / 2), rectangleA.y - (rectangleA.height / 2))

并且如果我将锚点更改为 (0.25, 0.25) 那么矩形 B 的位置可以调整为：(rectangleA.x - (rectangleA.width / 4), rectangleA.y - (rectangleA.height / 4))

所以看起来相关性是当我将矩形 A 的锚点减半时，我将我在矩形 B 的位置除以的值加倍。

问题是锚点可以是 0 到 1 之间的任何值，并且由用户选择，所以我不能依赖模式。

是否有一种算法或公式可以表示上述相关性，并且即使更改了矩形 A 的锚点也能使矩形 B 的位置与矩形 A 的位置相同？

Answer 1

x / 2 == x * (1 / 2) == 2 * 0.5
x / 4 == x * (1 / 4) == x * 0.25
-or-
x / y == x * (1 / y)

这意味着您的公式是：

rectangleB.x = rectangleA.x - (rectangleA.width * rectangleA.anchor.x);
rectangleB.y = rectangleA.y - (rectangleA.height * rectangleA.anchor.y);

或者，如果您想查看您已经尝试过的 / 2 和 / 4：

rectangleB.x = rectangleA.x - (rectangleA.width / (1 / rectangleA.anchor.x));
rectangleB.y = rectangleA.y - (rectangleA.height / (1 / rectangleA.anchor.y));

保持矩形 B 在矩形 A 的顶部对齐，即使矩形 A 的锚点发生变化

Keep rectangle B aligned on top of Rectangle A even when Rectangle A's anchor changes

javascript

pixi.js