javascript - 绘制一个没有线边框的空心圆

Question

有没有人有使用 Pixi 绘制空心圆的经验？我目前的方法只适用于 WebGL 渲染器，这让我觉得它有缺陷，我还需要回退到为其他设备渲染的其他方法。

this.mathPiDub = 2 * Math.PI;
this.color = 0xFF00FF
var nuRad = 10;
this.pixiCircle.beginFill(this.color, 1);
this.pixiCircle.arc(0, 0, nuRad - 2, 0, this.mathPiDub, false);
this.pixiCircle.arc(0, 0, nuRad, 0, this.mathPiDub, false);
this.pixiCircle.endFill();

2D 渲染给了我一个完整的圆，而 WebGL 则切开了一个洞。

什么是最好的方法？

Answer 1

最简单的方法是使用内置的 drawCircle() 和 lineStyle 而不是填充。

this.pixiCircle = new PIXI.Graphics();
this.pixiCircle.lineStyle(2, 0xFF00FF);  //(thickness, color)
this.pixiCircle.drawCircle(0, 0, 10);   //(x,y,radius)
this.pixiCircle.endFill(); 
stage.addChild(this.pixiCircle);

这将适用于 WebGL 和 Canvas 渲染器