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作為值，這是完美的。