• 5280阅读
  • 9回复

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

上一主题 下一主题
离线crazy
 

图酷模式  只看楼主 倒序阅读 楼主  发表于: 2018-02-04
关键词: qml,芝麻信用
QWidget到QML,感觉QML确实太方便了,最近在学习QML,今天抽空画了个支付宝芝麻信用分表盘,表盘样子简约了不少,如下是现在最新版的样子:


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



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

以下是核心代码:
  1. onPaint:
  2.         {
  3.             var ctx = getContext("2d");
  4.             var width = canvas.width
  5.             var height = canvas.height
  6.             ctx.clearRect(0,0,width,height);
  7.             ctx.save();
  8.             //将原点移到中心点,方便绘制
  9.             ctx.translate(width/2,height/2);
  10.             drawPanel(ctx);
  11.             ctx.restore();
  12.         }
  13.         function drawPanel(ctx)
  14.         {
  15.             //绘制坐标轴,测试用
  16.             //drawCoordinate(ctx);
  17.             //绘制刻度
  18.             drawScale(ctx);
  19.             //绘制数字
  20.             drawNumber(ctx);
  21.         }


难点是这个类似雨滴形状的绘制
  1. //绘制雨滴形状
  2.         function drawRain(ctx,x,y,angle)
  3.         {
  4.             var curveness = 0.38;
  5.             var dis = m_scalRadius*4.8;
  6.             ctx.save();
  7.             ctx.beginPath();
  8.             ctx.translate(x,y);
  9.             ctx.rotate(MathUtil.getRadian(90+angle));
  10.             ctx.arc(0,0,m_scalRadius,MathUtil.getRadian(210),MathUtil.getRadian(330));
  11.             //绘制二次贝塞尔曲线
  12.             var stPoint = MathUtil.getCircleCoordinate(m_scalRadius,0,0,330);
  13.             var stPoint2 = MathUtil.getCircleCoordinate(m_scalRadius,0,0,210);
  14.             //右边
  15.             drawCurvePath(ctx,stPoint,[0,dis],curveness);
  16.             //左边
  17.             drawCurvePath(ctx,[0,dis],stPoint2,curveness);
  18.             ctx.fill();


支持任意角度的旋转。

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


完整源码完了整理后放出。初学QML,还望大家别笑
C/C++/Qt爱好者
邮箱: kevinlq0912@163.com
公众号: devstone
博客:http://kevinlq.com/
离线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
快速回复
限100 字节
 
上一个 下一个