html5 canvas將線條更改爲圓形

Question

我想繪製一個矩形/正方形，並且我希望如果拖動該矩形的任何一邊，那麼矩形的該邊應該更改爲第一個圖像所示的圓形。
我設法用可拉伸的邊繪製一個矩形/正方形使用二次曲線但問題是，當我拉伸矩形的一側時，它不會像圓形一樣伸展，而是像第二個圖像中顯示的橢圓或東西那樣。
我知道你可能會推薦使用貝塞爾曲線但我想單個控制點像二次曲線但bezier有兩個（如果我錯了，糾正我）。

請建議我應該採取什麼措施來解決此問題。

圖片 - 我想要的東西

圖片 - 我已經實現

我做了什麼
這個fiddle顯示了我工作的結果。
要繪製矩形，只需單擊並在畫布上拖動鼠標即可。

Here is the code

Answer 1

越高Bezier曲線，它需要更多的控制點的順序。二次曲線是二階貝塞爾曲線，它們需要一個控制點。具有兩個控制點的貝塞爾曲線是三階。一階貝塞爾曲線實際上是一條直線。沒有貝塞爾曲線的有限階可以形成完美的圓弧。

順便說一句，二次曲線不是「橢圓或東西」，它是一個拋物線段。

如果你想要有圓弧，你應該使用......以及圓弧！要控制它，你需要改變半徑，實際上你可以通過移動圓心來完成。

您將需要額外的邏輯來處理直線，因爲圓弧不會是直線。因此，如果拖動點在直線上方，您將繪製一條直線，否則將繪製具有適當半徑的圓弧。

所以，讓我們說你有以下情況：

當段ab是您的矩形的直線和acb是所需的電弧。 y是段的高度，x是拖動的水平偏移量。我們正在尋找r由三點a,c和b定義的圓的半徑。

現在角sda是一個回合/ 4，sd是r - x和ad是y/2。如果我們使用畢達哥拉斯我們得到：

r^2 = (r-x)^2 + (y/2)^2 
=> 
r^2 = (r-x)(r-x) + (y/2)^2 
=> 
r^2 = r^2 - 2rx + x^2 + (y/2)^2 
=> 
r^2 = r^2 - 2rx + x^2 + (y^2/4) 
=> 
0 = - 2rx + x^2 + (y^2/4) 
=> 
2rx = x^2 + (y^2/4) 
=> 
r = (x^2 + (y^2/4))/2x 
=> 
r = ((x^2)/2x) + ((y^2/4)/2x) 
=> 
r = (x/2) + ((y^2/4)/2x) 
=> 
r = (x/2) + (y^2/8x) 

正如你可以看到，當x是0，我們有除以0。這就是爲什麼你必須切換到繪製直線當這種情況發生。

我們找到的公式（r = (x/2) + (y^2/8x)）您將能夠確定繪製圓弧的圓的半徑。找到中心點是微不足道的...

要找到角度，您可以使用正弦定律或餘弦定律，根據您的偏好，兩者都可以很好地工作。您可以選擇使用三角形asb，三角形asd或三角形adc（綠色）來查找角度。

對於一個簡單的方法，讓我們繼續與三角形asd，讓我們用正弦定理：

r/sin(turn/4) = (y/2)/sin(θ/2) 

由於四分之一圈爲1的正弦波，我們可以更換：

=> 
r/1 = (y/2)/sin(θ/2) 
=> 
1 = (y/2)/sin(θ/2) 

現在，解決這個問題的角度：

=> 
sin(θ/2) = (y/2) 
=> 
θ/2 = asin(y/2) 

當調用該函數來繪製AR c，起始角度爲-θ/ 2，結束角度爲θ/ 2。

注意：所有這些都是爲矩形的右側做出的調整，對於其他方面是需要的。