填充画布路径与不同颜色的部分

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方法代替这些角落。