如何绘制1个圆角的矩形？

Question

如何绘制带有1个圆角的矩形并用颜色填充它？

我正在尝试使用方法arcTo和以下代码：

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。

但不是右上角的圆角，而是将其剪掉：

Answer 1

因为它是一种颜色，如何用Graphics.drawRoundedRect绘制圆角矩形然后绘制你不想要的圆角部分呢？您将绘制一个圆形的矩形全尺寸，然后用正常的面积覆盖您想要正方形的角落，如下所示：

Answer 2

arcTo()方法有点令人困惑。 （x1，y1）坐标不是曲线的起点。可以把它想象成贝塞尔手柄的点。为了获得你想要的弧线，你需要沿x轴直线拉一个贝塞尔手柄。所以你的方法实际上应该是这样的：

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

Answer 3

我同意Karmacon。我只是想补充一点，有时它更容易  使用quadraticCurveTo()，因为它的选项较少。您指定 Bezier控制点 x和y，以及终点 x和y。但是，您不能方便地使用radius参数。

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，以获取一些有关参数如何工作的良好图像。