Pixi.js 如何绘制具有一个圆角的矩形？

如何画一个圆角矩形并用颜色填充

我正在尝试将该方法与以下代码一起使用：

this.bgGraphics.beginFill(0xFFCC00, 1);
this.bgGraphics.moveTo(0, 0);
this.bgGraphics.lineTo(45, 0);
this.bgGraphics.arcTo(45, 0, 60, 15, 15);
this.bgGraphics.lineTo(60, 60);
this.bgGraphics.lineTo(0, 60);
this.bgGraphics.endFill();

即，我正在绘制一个60 x 60的矩形，然后尝试使用

arcTo

从点

45,0

到

45,15

，半径

15

但它并没有将右上角的圆角截断：

---

既然它都是一种颜色，那么用

图形绘制一个圆角矩形如何。drawRoundedRect

然后在您不想要的圆角部分上绘制？您可以绘制一个完整大小的圆形矩形，然后用普通矩形覆盖想要方形的角，如下所示：

this.bgGraphics.arcTo(60, 0, 60, 15, 15);

arcTo（）方法有点混乱。（x1，y1）坐标不是曲线的起点。把它想象成贝塞尔手柄的点。为了获得所需的圆弧，需要沿x轴笔直拉动贝塞尔手柄。因此，您的方法实际上应该如下所示：

this.bgGraphics.arcTo(60, 0, 60, 15, 15);

---

我同意Karmacon的观点。我只是想补充一点，有时候更容易 使用

quadraticCurveTo（）

，因为它的选项较少。指定贝塞尔控制点x和y以及端点x和y。但是，使用半径参数并不方便

this.bgGraphics.quadraticCurveTo(60, 0, 60, 15);

这里有一个比较：

- arcTo(x1,y1,x2,y2,r);
x1  The x-coordinate of the first tangent   
y1  The y-coordinate of the first tangent   
x2  The x-coordinate of the second tangent  
y2  The y-coordinate of the second tangent  
r   The radius of the arc

- quadraticCurveTo(cpx,cpy,x,y);
cpx The x-coordinate of the Bézier control point    
cpy The y-coordinate of the Bézier control point    
x   The x-coordinate of the ending point    
y   The y-coordinate of the ending point

看到上面的图片非常有用，但我还不能发布它们。在W3Schools或developer.mozilla.org上查看一些关于参数如何工作的好图片