javascript 绘制没有线条边框的空心圆

vxbzzdmp 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(159)

有没有人有用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削减洞通过。
最好的办法是什么？

JavaScript

来源：https://stackoverflow.com/questions/28515726/drawing-a-hollow-circle-without-a-line-border

2条答案

按热度按时间

eit6fx6z1#

最简单的方法是使用内置的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和画布渲染器

赞(0）回复(0）举报 2023-01-01

pepwfjgg2#

如果使用的是版本5，则可以使用beginHole（）和endHole（）方法。

function createHollowCircle(radius, x_coordinate, y_coordinate) {

  let circle = new Graphics();
  circle.beginFill(color);
  circle.drawCircle(0, 0, radius);
  circle.beginHole();
  circle.drawCircle(0, 0, radius - 0.1);
  circle.endHole();
  circle.endFill();
  circle.x = x_coordinate;
  circle.y = y_coordinate;
  return circle;
  
}

Hollow Circles

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 绘制没有线条边框的空心圆

2条答案

相关问题

热门标签

最新问答