javascript - SVG中三角形上的圆角

Question

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

左下角是唯一一个看起来相当容易制作的地方，主要是因为那是一个 90 度的“转弯”。该回合是使用QSVG 中的命令和以下参数进行的：

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这些值，它是完美的。