javascript – SVG中三角形的圆角

我正在尝试制作一个圆角的三角形.三角形看起来像这样:

左下角是唯一一个看似相当容易制作的角落,主要是因为它是90度’转弯’.该转弯是使用SVG中的Q命令使用以下参数进行的:

Q x,y height,x,y height – 从我正在创建的弧的右侧位置开始的RADIUS.

但是,其他角是可变的,具体取决于三角形的大小.我可以使用atan()函数计算它们的角度,但我不知道如何实现它们.我希望它遵循RADIUS变量(在这种情况下为5).

有任何想法吗?

最佳答案 我假设你只需要这个角度与基本轴平行的直角三角形,这会让事情变得容易一些.

正如你所说,直角很容易.

对于其他角度,您需要计算圆的中心.假设w和h是三角形的宽度和高度.我们还说x,y是最右边节点的坐标.最右边三角形的中心是:x – r * h / w,y – r.你需要绘制的弧所覆盖的角度是π – α,其中α是你用atan计算的角度角.

最顶端的角落将以类似方式处理.

这应该让你开始.

点赞