javascript - 保持矩形 B 在矩形 A 的顶部对齐，即使矩形 A 的 anchor 发生变化

Question

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

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

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

这使得当矩形 A 的 anchor 发生变化时，很难使矩形 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 的 anchor 更改为 (0.5, 0.5)，则矩形 B 的位置可以调整为:(rectangleA.x - (rectangleA.width/2 ), rectangleA.y - (rectangleA.height/2))

如果我将 anchor 更改为 (0.25, 0.25)，则 Rectangle B 的位置可以调整为:(rectangleA.x - (rectangleA.width/4), rectangleA.y - (rectangleA.height/4))

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

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

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

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));