我正在嘗試製作具有圓角的三角形。三角形看起來就像這樣:SVG中的三角形上的圓角
左下角的是,似乎相當容易做,主要是因爲這是一個90度「轉彎」唯一的一個。該轉向是使用SVG中的Q
命令使用以下參數製作的:
Q x,y + height, x, y + height - RADIUS
從我創建的弧的右邊位開始。
但是,其他角落是可變的,這取決於三角形的大小。我可以使用atan()
函數來計算它們的角度,但我不知道如何實現它們。我希望它遵循RADIUS變量(在這種情況下爲5)。
任何想法?
我正在嘗試製作具有圓角的三角形。三角形看起來就像這樣: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
計算的角度角度。
最上面的拐角處理方式相似。
這應該讓你開始。
使用a
命令我可以做出非常詳細的角落rX
和rY
。我會打電話的功能,如:
a 5 5 0 0 1 0 5 5
,它將使半徑爲5的圓和dX = 5
和dY = 5
。這是完美的。
半徑在90度時是理想的,所以當我有一個50度角時,我只需使用(50/90) * RADIUS
作爲值,而且非常完美。