小球的实现思路比较简单,就是填充一个带正弦路径的区域,然后 clip 截取出圆球部分。
最终效果图:
遇到的问题:
绘制圆后对该圆路径 clip 会有一圈虚线,绘制前后加上 save、restore 解决了;
阴影等特效很占资源不建议使用;
clip 对抗锯齿有一点影响,可以计算下水球圆弧的起止角度直接绘制圆弧;
要对文本差异性着色在有多个波浪时比较麻烦,待完成。
代码地址:https://github.com/gongjianbo/MyTestCode/tree/master/Qml/TestQml_20210310_Wave
完整代码:
import QtQuick 2.12
import QtQuick.Controls 2.12
//波浪小球
//参照:https://blog.csdn.net/zhengtianzuo06/article/details/78687838
//参照:https://blog.csdn.net/lecepin/article/details/53536445
//参照:https://blog.csdn.net/yyy269954107/article/details/43449087
Canvas {
id: control
implicitWidth: 200
implicitHeight: 200
//数值范围
property real maxValue: 100
property real minValue: 0
property real curValue: 0
//显示进度
property real curProgress: (curValue-minValue)/(maxValue-minValue)*100
property string curText: (curProgress
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?