填充畫布路徑與不同顏色的部分

Question

我已經在畫布上做了一個綠色通道，看起來像這樣：

already made path http://shrani.si/f/2/125/2prKT5FY/deletemestackoverflow.png

我不得不用4 了lineTo（）和4 到quadraticCurveTo（ ）功能。我想建立進度條的somekind的，將是這樣的：

the goal http://shrani.si/f/2m/BL/1Spxusi3/deleteme2stackoverflow.png

是否有任何簡單的解決方案，這在畫布上？我的目標是擁有一個JavaScript功能，可根據進度百分比更新畫布形狀。我知道我可以在綠色的那個之後做出另一個藍色的形狀，但是我究竟會如何計算它的適當長度？任何幫助非常感謝:)

Answer 1

你的圓角矩形組成的9子路徑：

1. 上邊框的右半邊，
2. 右上角，
3. 右邊的邊框，
4. 右下角，
5. 下邊界，
6. 左下角，
7. 左邊框
8. 右上角和
9. 上邊框的左半邊。

讓瓦特是矩形的寬度，^h矩形的高度和[R圓角半徑。

路徑的總長度爲約*：

長度=（瓦特 - 2R）* 2 +（H -2r）* 2 + 2 πř

乘以這個長度按百分比給出你是一個長度，這是給藍色路徑的長度。每個矩形的子路徑的具有以下長度：

• 1,9：（W-2R）/ 2
• 2，4，6，8：π R/2
• 3,7：（ H-2R）
• 5：（W-2R）

現在，使用分長度，遍歷在上面給出的順序中的每個子路徑。對於每個子路徑：

• 如果子長度大於或等於子路徑的長度，得出整個子路徑，並減少由 子路徑的長度的分長度。
• 否則，根據長度繪製部分子路徑。這將涉及計算部分線或部分弧，與計算更復雜的路徑相比，這相對容易。然後停止繪圖。

*我說「約」，因爲您使用二次曲線來近似角落上的弧線。順便說一下，您可以使用arc方法代替這些角落。