Javascript SVG中三角形的圆角

我想做一个有圆角的三角形。三角形将如下所示：

左下角是唯一一个看起来相当容易做到的，主要是因为这是一个90度的“转弯”。使用SVG中带有以下参数的

Q

命令进行此转换：

qx，y+高度，x，y+高度-半径

从我正在创建的圆弧的正确位置开始

但是，根据三角形的大小，其他角是可变的。我可以使用

atan（）

函数计算它们的角度，但我不知道如何实现它们。我希望它跟随半径变量（在本例中为5）

---

有什么想法吗？

我想你只需要在边平行于基本轴的直角三角形上使用这个，这会让事情变得容易一些

正如你所说，直角很容易

对于其他角度，您需要计算圆心。假设

w

和

h

是三角形的宽度和高度。也就是说，

x，y

是最右边节点的坐标。最右边三角形的中心是：

x-r*h/w，y-r

。您需要绘制的圆弧所覆盖的角度是

π-α

，其中

α

是您使用

atan

计算的转角

最上面的一个角落也将以类似方式处理

---

这应该可以让你开始了。

使用

a

命令，我可以用特定的

rX

和

rY

创建非常详细的拐角。我会像这样调用函数：

A5 0 0 1 0 5 5

，它将以半径5和

dX=5

和

dY=5

形成一个圆。这是完美的

半径是理想的90度角，因此当我有一个50度角时，我只使用

（50/90）*半径

作为值，这是完美的