HTML Canvas 提供了绘制矩形fillRect()
和的方法strokeRect()
,但我找不到创建圆角矩形的方法。我怎样才能做到这一点?
自由翻译问题How to draw a rounded rectangle using HTML Canvas? @ DNB5brims。
HTML Canvas 提供了绘制矩形fillRect()
和的方法strokeRect()
,但我找不到创建圆角矩形的方法。我怎样才能做到这一点?
自由翻译问题How to draw a rounded rectangle using HTML Canvas? @ DNB5brims。
另一种选择:使用
.arcTo
允许您绘制特定弧线的选项如果我们考虑角的半径,可以得出以下函数
所以这是基于使用
lineJoin = "round"
和正确的比例,数学和逻辑,我能够制作这个功能,它并不完美,但希望它有所帮助。如果您希望每个角具有不同的半径,请查看:https ://p5js.org/reference/#/p5/rect就这样:
下面是完整的代码:
来自贡献者 @Woold的答案的松散翻译 。
你可以生成这个矩形的路径,然后对它应用
stroke
orfill
。我检查了半径,使其不超过矩形较小边的一半。该函数可以针对不同的半径重写,只需将
r
每一行替换为 r[0] (右上角的顶行),依此类推。通过添加一个由 1、2 和 4 值组成的数组(如果有两个,则首先是右边的,然后是左边的),为角添加了不同半径的可能性。我只检查一个侧面的一半是否超过 1 个值。
更新
为了解释代码,我添加了一个常规直角和圆角的示例,其参数可以更改(rx,ry)。这里“native”方法的实现变得清晰
roundRect()
了,其中最后一个参数radii
(radii)可以有多种格式。它可以是 1、2、3 或 4 个数字的列表,也可以是DOMPointInit
(由 radius[x] 和 radius[y] 组成)。然后,根据某种算法,将传入的数据转换为所谓的。归一化半径列表。
[r]
转换为[r,r,r,r]
,[r1,r2] => [r1,r2,r1,r2]
,[r1,r2,r3] => [r1,r2,r2,r3]
. 并且[r1,r2,r3,r4]
保持不变。倒计时是从左上角顺时针。(虽然算法在上面的代码中有所不同)。因此
DOMPointInit
,可以表示任何半径。如果只是两个数字的数组,怎么用就不是很明显了,因为在向量路径“移动”的过程中,第一个值并不总是沿着х
,所以实际上这是一个复数表示的半径{x:rx, y:ry}
。出于同样的原因arcTo
,或者arc
不能用作舍入,因为它们只有一个半径。此外,不能确保圆弧与直线的延续相切。相反,如果控制点与拐角的条件点重合,则二次贝塞尔曲线(
q
,Q
简称SVG путей
)将始终提供与该拐角剩余的线相切。rx
并且从条件角度为不同的半径ry
提供了适当的缩进。这就是下面的代码演示的内容。roundRect(x, y, 宽度, 高度, 半径); 现在正式成为 Canvas 2D API 的一部分。
它出现在
CanvasRenderingContext2D
和对象Path2D
中OffscreenCanvasRenderingContext2D
。它的参数
radii
是一个数组,包含:float
代表用于所有四个角的半径,float
用于左上角+右下角和右上角+左下角,float
代表左上、右上+左下和右下,float
,每个角落一个,DOMPointInit
表示x-радиус
和y-радиус
每个角。目前在 Chrome 中只有一个可用的实现(在仍然不支持 objects 的标志下
DOMPointInit
,但只有 trueDOMPoints
),你可以找到我创建的polyfill来自成员 @Kaiido的答案的松散翻译 。
我需要做同样的事情,我为此创建了一个方法。
请阅读代码中的注释:
贡献者 @Juan Mendes的答案的松散翻译 。