问一下关于这个作业的一点问题

[追热]

课后作业
设计一组进度条UI组件，要求：
至少支持环形、条形、沙漏形三种形态，可自由扩展支持更多形态
能够读取和设置当前进度值，进度值为0~100的数值，精度为两位小数
能够配置进度槽和当前进度显示不同的背景颜色，可自由设计其他可配置项
考虑设计其他控制选项，比如阶梯进度（如果设置阶梯为5，那么进度值只允许设置为5的倍数，即0、5、10、15...）
进度条加载到100时触发complete事件

环形和沙漏形的进度条要怎么做。
环形我只会画一整个和特定角度的。三角形也不会弄

[usecf]

最简单的就是你可以用多组不同的图片 根据你的条件显示不同形状的图片

[追热]

引用 1 楼 usecf 的回复:

最简单的就是你可以用多组不同的图片 根据你的条件显示不同形状的图片

。。。这样肯定不行啊，后续还要可以进行扩展，用图片显然不可取。

[天际的海浪]

这些环形、条形、沙漏形等形态都可以用canvas绘制， 代码可以设计成一个主控制模块和多个UI绘制模块，每个形态写一个UI绘制模块，由主控制模块调用就可以了

[追热]

引用 3 楼 天际的海浪 的回复:

这些环形、条形、沙漏形等形态都可以用canvas绘制， 代码可以设计成一个主控制模块和多个UI绘制模块，每个形态写一个UI绘制模块，由主控制模块调用就可以了

这样的形状的进度条要怎么控制，我思考了一下，觉得用一个就必须分段控制，半圆的地方长度不知道怎么计算，感觉比较复杂。我暂时是用了2个canvas一个画背景，一个画进度，然后把进度裁去一部分。正确的做法应该是怎么样的？

[追热]

引用 3 楼 天际的海浪 的回复:

这些环形、条形、沙漏形等形态都可以用canvas绘制， 代码可以设计成一个主控制模块和多个UI绘制模块，每个形态写一个UI绘制模块，由主控制模块调用就可以了

我好像还需要学习一下canvas,canvas之前只是简单了解了一下，还没自己画过东西

[追热]

引用 5 楼 追热 的回复:

[quote=引用 3 楼 天际的海浪 的回复:] 这些环形、条形、沙漏形等形态都可以用canvas绘制， 代码可以设计成一个主控制模块和多个UI绘制模块，每个形态写一个UI绘制模块，由主控制模块调用就可以了

这样的形状的进度条要怎么控制，我思考了一下，觉得用一个就必须分段控制，半圆的地方长度不知道怎么计算，感觉比较复杂。我暂时是用了2个canvas一个画背景，一个画进度，然后把进度裁去一部分。正确的做法应该是怎么样的？[/quote] 今天有空又学了一点，发现了clip()裁剪方法，问题算解决了。

[天际的海浪]

引用 6 楼 追热 的回复:

[quote=引用 5 楼 追热 的回复:] [quote=引用 3 楼 天际的海浪 的回复:] 这些环形、条形、沙漏形等形态都可以用canvas绘制， 代码可以设计成一个主控制模块和多个UI绘制模块，每个形态写一个UI绘制模块，由主控制模块调用就可以了

这样的形状的进度条要怎么控制，我思考了一下，觉得用一个就必须分段控制，半圆的地方长度不知道怎么计算，感觉比较复杂。我暂时是用了2个canvas一个画背景，一个画进度，然后把进度裁去一部分。正确的做法应该是怎么样的？[/quote] 今天有空又学了一点，发现了clip()裁剪方法，问题算解决了。[/quote] 你说的就是正确的方法