如何在pixijs中使用绝对坐标

Question

我的问题是关于使用绝对坐标移动直线和矩形。

我创建了行：

const line = new PIXI.Graphics();
line.lineStyle(2, 0xffffff);
line.moveTo(100, 200);
line.lineTo(300, 200);
app.stage.addChild(line);

但是如果我尝试通过更改 x/y 来设置坐标，它将相对于创建的位置：

line.x = 200; // real x will be 300
line.y = 200; // real y will be 400

如果要在视图上设置绝对坐标，应该如何移动这条线？我应该始终使用电流计算绝对坐标吗？

关于rect的同样问题，我是这样创建的：

const blueBox = new PIXI.Graphics();
blueBox.beginFill(0x0000ff);
blueBox.drawRect(50, 50, 50, 50);
blueBox.endFill();
app.stage.addChild(blueBox);

如果我尝试使用 x/y 移动它，我会像行一样做 - x/y 是相对的，好的。我总是可以在 0/0 点绘制矩形然后移动它们，但它的设计是否正确，还有其他方法吗？

Answer 1

作为一般规则，如果 Graphics 对象在视觉上没有变化，则不应触发重绘。这是一项计算量大的操作，仅仅重新定位对象并不能证明调用它是合理的。

更好的替代方法是使用局部坐标绘制直线或矩形，然后通过设置 position 属性将其放置在目标绝对位置。我更喜欢将 (0, 0) 作为形状的中心，但选择 top-left 角或任何其他参考点也是有效的。对于矩形，它看起来像这样：

const blueBox = new PIXI.Graphics();
blueBox.beginFill(0x0000ff);
blueBox.drawRect(-25, -25, 50, 50);
blueBox.endFill();
blueBox.position.set(25, 25);
app.stage.addChild(blueBox);

从这一点开始，对矩形绝对位置的所有更改都应该通过更改位置属性而发生，而不是通过使用新坐标重新绘制图形。

如何在pixijs中使用绝对坐标

How to use absolute coords in pixijs

javascript

canvas

pixi.js