vue怎么上传图片改成圆角

vue怎么上传图片改成圆角,第1张

剪裁画布,因为我们需要的是一个圆形,所以只需要将 path 设置为圆形然后剪裁即可,有两点需要注意的是, clipxxx 剪裁的是画布,所以我们需要什么形状,只需要将画布剪裁成相应形状然后画 view 即可。也就是说先剪裁,后画图,当然你也可以先画图后剪裁,但是这样不符合惯性思维

CircleProgress.vue

2.都给他们加上背景色,为进度条的颜色。

3.每一块里都加上遮挡层,遮挡层颜色与背景色相同,设定样式以背景圆的圆心为旋转点。

4.给每一块的modal都加上 v-if 属性,只有当比例小于这一块才显示modal层。

例如:进度(rate)为0.25,第一块modal不显示(不满足rate小于0.25),第二块modal显示(rate <0.5),

第三块modal显示(rate <0.75),第四块modal显示(rate <1);

5.加上动态样式

① 顺时针第一块,右上角那块(范围应该为0~0.25):

② 顺时针第二块,右下角那块(范围应该为0.25~0.5):

③ 顺时针第三块,左下角那块(范围应该为0.5~0.75):

④ 顺时针第四块,左上角那块(范围应该为0.75~1):

所以可以将上述四个显示的modal层旋转的角度的计算方式写成一个函数,根据是第几块和当前的进度比例(this.rate)来得到角度:

6.说好的圆环形进度条呢?怎么变成圆饼啦?在content里加上圆,挡住中心部分

像这样调用即可:

https://github.com/LiaPig/vue-circle-progress


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6455600.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-22
下一篇 2023-03-22

发表评论

登录后才能评论

评论列表(0条)

保存