QML实现钟表效果


Posted in Python onJune 02, 2020

Qt5以后的版本,主要加大的对Qt Quick的改进。现实最新的版本可以利用Qt Quick实现很多的绚丽的效果。此里只是利用画布Canvas简单钟表的效果。效果如下:

QML实现钟表效果

源码如下

import QtQuick 2.6
import QtQuick.Window 2.2



Window {
  visible: true
  width: 740
  height: 680
  title: qsTr("Hello World")
  id:window
  //color: "red";


  Canvas
  {
    id : canvas
    anchors.fill: parent
    width: 740
    height: 680
    onPaint:
    {
      var ctx = getContext("2d");
      drawBack(ctx);
      drawDot(ctx);


      var date = new Date();
      var hours = date.getHours()
      hours = hours%12;
      var minutes = date.getMinutes()
      var seconds = date.getUTCSeconds();
      var timestr =date.toLocaleString("yyyy-MM-dd hh:mm:ss");
      console.log(date.toLocaleString("yyyy-MM-dd hh:mm:ss"));
      drawSecond(seconds,ctx);

      drawHour(hours,minutes,ctx);
      drawMinute(minutes,seconds,ctx);
      drawSecond(seconds,ctx);

     }

  }


  function drawBack(ctx)
  {
    var r = 200;

    ctx.save();
    ctx.beginPath();
    ctx.translate(width/2,height/2);
    ctx.clearRect(-r,-r,r*2,r*2);
    ctx.lineWidth = 10;
    ctx.arc(0,0,r-5,0,Math.PI*2,false); //外圆
    ctx.stroke();

    //画文本
    var numbers = [1,2,3,4,5,6,7,8,9,10,11,12];
    ctx.font = "18px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    for(var i = 0; i < 12; ++i)
    {
      var rad = 2*Math.PI/12*numbers[i]-3.14/2;
      var x = Math.cos(rad)*(r-30);
      var y = Math.sin(rad)*(r-30);
      ctx.fillText(numbers[i],x,y);
    }

    //画刻度
    ctx.lineWidth = 2;

    for (var i = 0; i <60; ++i)
    {
      ctx.beginPath();
      var rad = 2*Math.PI/60*i;
      var x = Math.cos(rad)*(r-15);
      var y = Math.sin(rad)*(r-15);
      var x2 = Math.cos(rad)*(r-10);
      var y2 = Math.sin(rad)*(r-10);


      //通过画线也可以
      if (i%5 === 0)
         {ctx.strokeStyle="#000000";}
      else
        { ctx.strokeStyle = "#989898";}
       ctx.moveTo(x,y);
       ctx.lineTo(x2,y2);
       ctx.stroke();

      //画圆实现
//        if (i%5 === 0)
//           {ctx.fillStyle="#000000";}
//        else
//          { ctx.fillStyle = "#FFFFFF";}
//        ctx.arc(x,y,2,0,3.15*2,false);
//        ctx.fill();
    }
    ctx.restore();
  }

  function drawHour(hour, minute, ctx)
  {
    var r = 200;
    ctx.save();
    ctx.beginPath(); //必须写
    ctx.lineWidth = 7;
    ctx.lineCap = "round";
    ctx.translate(width/2,height/2);

    var rad = Math.PI*2/12*hour+Math.PI*2*minute/12/60-Math.PI;
    ctx.rotate(rad);
    ctx.moveTo(0,-10);
    ctx.lineTo(0,r/2-10);
    ctx.stroke();  //必须写(填充方式)
    ctx.restore();
  }
  function drawMinute(minute,second,ctx)
  {
    var r = 200;
    ctx.save();
    ctx.beginPath(); //必须写
    ctx.lineWidth = 5;
    ctx.lineCap = "round";
    ctx.translate(width/2,height/2);

    var rad = Math.PI*2*minute/60 + Math.PI*2*second/60/60 -Math.PI;
    ctx.rotate(rad);
    ctx.moveTo(0,-10);
    ctx.lineTo(-10,r*3/5-10);
    ctx.stroke();  //必须写(填充方式)
    ctx.restore();
  }
  function drawSecond(second,ctx)
  {
    var r = 200;
    ctx.save();
    ctx.beginPath(); //必须写
    ctx.lineWidth = 3;
    ctx.lineCap = "round";
    ctx.translate(width/2,height/2);
    ctx.strokeStyle="#ff0000";
    var rad = Math.PI*2*second/60-Math.PI;
    ctx.rotate(rad);
    ctx.moveTo(0,-20);
    ctx.lineTo(0,r*4/5-10);
    ctx.stroke();  //必须写(填充方式)
    ctx.restore();
  }
  function drawDot(ctx)
  {
    ctx.save();
    ctx.beginPath(); //必须写
    ctx.translate(width/2,height/2);
    ctx.fillStyle="#ffffff";
    ctx.arc(0,0,3,0,Math.PI*2);
    ctx.fill();  //必须写(填充方式)
    ctx.restore();
  }
  //定时器


  Timer {
       interval: 1000; running: true; repeat: true
       onTriggered: canvas.requestPaint();
     }
}

利用定时器实现动态效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python获取android设备的GPS信息脚本分享
Mar 06 Python
python如何拆分含有多种分隔符的字符串
Mar 20 Python
Python入门学习指南分享
Apr 11 Python
python 数字类型和字符串类型的相互转换实例
Jul 17 Python
pandas 空的dataframe 插入列名的示例
Oct 30 Python
Python+OpenCV实现将图像转换为二进制格式
Jan 09 Python
在Python中通过threshold创建mask方式
Feb 19 Python
Python基于类路径字符串获取静态属性
Mar 12 Python
使用pandas库对csv文件进行筛选保存
May 25 Python
Python3爬虫关于识别检验滑动验证码的实例
Jul 30 Python
python调用有道智云API实现文件批量翻译
Oct 10 Python
python pyg2plot的原理知识点总结
Feb 28 Python
Pymysql实现往表中插入数据过程解析
Jun 02 #Python
Django全局启用登陆验证login_required的方法
Jun 02 #Python
python爬虫基础知识点整理
Jun 02 #Python
如何理解python面向对象编程
Jun 01 #Python
Python CSS选择器爬取京东网商品信息过程解析
Jun 01 #Python
matlab、python中矩阵的互相导入导出方式
Jun 01 #Python
如何理解Python中的变量
Jun 01 #Python
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
教师自我评价范例
2013/09/24 职场文书
毕业生自我鉴定
2013/11/05 职场文书
店面销售职位的职责
2014/03/09 职场文书
求职意向书范文
2014/04/01 职场文书
法制宣传教育方案
2014/05/09 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
学习计划书怎么写
2014/09/15 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS