查看完整版本: [-- QML 实现芝麻信用分表盘 --]

QTCN开发网 -> Qt 作品展 -> QML 实现芝麻信用分表盘 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

crazy 2018-02-04 22:41

QML 实现芝麻信用分表盘

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

请不要笑我分低。记得以前的样子是带刻度和数字的。以下是我实现的效果:
[attachment=18478]


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

以下是核心代码:
  1. 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);
            }


难点是这个类似雨滴形状的绘制
  1. //绘制雨滴形状
            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();
[attachment=18479]

支持任意角度的旋转。

在放一个之前芝麻信用仪表版本:
[attachment=18480]

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

nigoole 2018-02-05 08:24

九重水 2018-02-05 09:50

微笑内敛 2018-02-05 11:18
    

greedysky 2018-02-05 13:11

q小玩家 2018-02-05 13:59
      

shasidaran 2018-02-05 17:34
厉害了

神经023 2018-02-05 18:06

return 2018-03-01 20:20
      

hwang_min 2018-03-08 15:17


查看完整版本: [-- QML 实现芝麻信用分表盘 --] [-- top --]



Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled