帮助

7333阅读
9回复

QML 实现芝麻信用分表盘 [复制链接]

上一主题下一主题查看指定楼层

查看指定楼层

离线crazy

只看楼主倒序阅读楼主发表于: 2018-02-04

关键词： qml,芝麻信用

从QWidget到QML，感觉QML确实太方便了，最近在学习QML,今天抽空画了个支付宝芝麻信用分表盘，表盘样子简约了不少，如下是现在最新版的样子：

请不要笑我分低。记得以前的样子是带刻度和数字的。以下是我实现的效果：

支持自适应窗体变化，自定义一些参数设置。。。。。

以下是核心代码：

onPaint:
{
var ctx = getContext("2d");
var width = canvas.width
var height = canvas.height
ctx.clearRect(0,0,width,height);
ctx.save();
//将原点移到中心点,方便绘制
ctx.translate(width/2,height/2);
drawPanel(ctx);
ctx.restore();
}
function drawPanel(ctx)
{
//绘制坐标轴,测试用
//drawCoordinate(ctx);
//绘制刻度
drawScale(ctx);
//绘制数字
drawNumber(ctx);
}

难点是这个类似雨滴形状的绘制

//绘制雨滴形状
function drawRain(ctx,x,y,angle)
{
var curveness = 0.38;
var dis = m_scalRadius*4.8;
ctx.save();
ctx.beginPath();
ctx.translate(x,y);
ctx.rotate(MathUtil.getRadian(90+angle));
ctx.arc(0,0,m_scalRadius,MathUtil.getRadian(210),MathUtil.getRadian(330));
//绘制二次贝塞尔曲线
var stPoint = MathUtil.getCircleCoordinate(m_scalRadius,0,0,330);
var stPoint2 = MathUtil.getCircleCoordinate(m_scalRadius,0,0,210);
//右边
drawCurvePath(ctx,stPoint,[0,dis],curveness);
//左边
drawCurvePath(ctx,[0,dis],stPoint2,curveness);
ctx.fill();

支持任意角度的旋转。

在放一个之前芝麻信用仪表版本：

完整源码完了整理后放出。初学QML，还望大家别笑

C/C++/Qt爱好者
邮箱: kevinlq0912@163.com
公众号: devstone
博客:http://kevinlq.com/

分享到 淘江湖新浪 QQ微博 QQ空间开心人人豆瓣网易微博百度鲜果白社会飞信

离线nigoole

只看该作者 1楼发表于: 2018-02-05

有句话说得好：好好学习，天天向上。加油~~！有上船的朋友联系企鹅393320854

离线九重水

只看该作者 2楼发表于: 2018-02-05

离线微笑内敛

只看该作者 3楼发表于: 2018-02-05

离线greedysky

只看该作者 4楼发表于: 2018-02-05

Where there is a will, there is a way.

离线q小玩家

只看该作者 5楼发表于: 2018-02-05

离线shasidaran

只看该作者 6楼发表于: 2018-02-05

厉害了

离线神经023

只看该作者 7楼发表于: 2018-02-05

离线return

只看该作者 8楼发表于: 2018-03-01

离线hwang_min

只看该作者 9楼发表于: 2018-03-08