如何绘制具有 1 个圆角的矩形？答案

【问题标题】：How to draw rectangle with 1 round corner?如何绘制具有 1 个圆角的矩形？
【发布时间】：2016-12-23 18:51:14
【问题描述】：

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

我正在尝试通过以下代码使用方法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。

但不是右上角的圆角，而是将其切断：

【问题讨论】：

标签： pixi.js

【解决方案1】：

arcTo() 方法有点混乱。 (x1,y1) 坐标不是曲线的起点。把它想象成贝塞尔手柄的点。为了获得您想要的弧线，您需要沿 x 轴直线拉动贝塞尔手柄。所以你的方法实际上应该是这样的：

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

【讨论】：

【解决方案2】：

既然都是一种颜色，那么用Graphics.drawRoundedRect 画一个圆角矩形，然后画出你不想要的圆角部分怎么样？您将绘制一个完整大小的圆角矩形，然后用普通矩形覆盖您想要正方形的角，如下所示：

【讨论】：

【解决方案3】：

我同意 Karmacon 的观点。我只是想补充一点，有时更容易使用quadraticCurveTo()，因为它的选项更少。您指定 Bezier 控制点 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 上查看参数如何工作的一些很好的图片。

【讨论】：