2013-07-15 200 views
4

我正在嘗試製作具有圓角的三角形。三角形看起來就像這樣:SVG中的三角形上的圓角

enter image description here

左下角的是,似乎相當容易做,主要是因爲這是一個90度「轉彎」唯一的一個。該轉向是使用SVG中的Q命令使用以下參數製作的:

Q x,y + height, x, y + height - RADIUS從我創建的弧的右邊位開始。

但是,其他角落是可變的,這取決於三角形的大小。我可以使用atan()函數來計算它們的角度,但我不知道如何實現它們。我希望它遵循RADIUS變量(在這種情況下爲5)。

任何想法?

回答

1

我假設你只需要這個角度爲三角形,兩邊平行於基本軸,這使得事情變得更容易一些。

正如你所說的,正確的角度很容易。

對於其他角度,您需要計算圓心。假設wh是三角形的寬度和高度。我們還要說x, y是最右邊節點的座標。最右邊的三角形的中心是:x - r * h/w, y - r。您需要繪製的圓弧所覆蓋的角度爲π - α,其中α是您用atan計算的角度角度。

最上面的拐角處理方式相似。

這應該讓你開始。

1

使用a命令我可以做出非常詳細的角落rXrY。我會打電話的功能,如:

a 5 5 0 0 1 0 5 5,它將使半徑爲5的圓和dX = 5dY = 5。這是完美的。

半徑在90度時是理想的,所以當我有一個50度角時,我只需使用(50/90) * RADIUS作爲值,而且非常完美。