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

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

1 个答案: