在Pixi.js中

Question

场景

我对两个圆形矩形进行二维可视化，如下所示：

const app = new PIXI.Application({ backgroundColor: 0xffffff} );
const roundBox = new PIXI.Graphics();
roundBox.lineStyle(4, 0x99CCFF, 1);
roundBox.beginFill(0xffffff);
roundBox.drawRoundedRect(0, 0, 200, 100, 10);
roundBox.endFill();

const roundBox2 = new PIXI.Graphics();
roundBox2.lineStyle(4, 0x99CCFF, 1);
roundBox2.beginFill(0xffffff);
roundBox2.drawRoundedRect(0, 0, 200, 100, 10);
roundBox2.endFill();
app.stage.addChild(roundBox, roundBox2);

我想水平附加第二个矩形，而不计算第二个孩子的水平位置。

问题

有没有办法在pixi.js中水平插入图形元素？

Answer 1

您可以将第二个矩形旋转90度，如下所示：

// Center the point to rotate this rectangle at its center
roundBox2.pivot = new PIXI.Point(100, 50);

// Math.PI / 2 is equal to 90 degrees in radians.
roundBox2.rotation = Math.PI / 2;