SVG中三角形的圆角

Question

我正在尝试制作一个圆角的三角形。三角形将如下所示：

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

Q x,y + height, x, y + height - RADIUS从我正在创建的弧的正确位置开始。

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

有什么想法吗？

Answer 1

我假设你只需要这个角度与基本轴平行的直角三角形，这会让事情变得更容易。

正如你所说，直角很容易。

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

最上面的角落也会被处理。

这应该让你开始。

Answer 2

使用a命令，我可以使用某个rX和rY制作非常详细的角落。我会把这个函数称为：

a 5 5 0 0 1 0 5 5，它将创建一个半径为5且dX = 5和dY = 5的圆圈。哪个是完美的。

半径是理想的90度，所以当我有一个50度的角落时，我只使用(50 / 90) * RADIUS作为值，这是完美的。