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调用shell的方法
Nov 20 Python
Linux下将Python的Django项目部署到Apache服务器
Dec 24 Python
Python实现的计数排序算法示例
Nov 29 Python
python用户管理系统的实例讲解
Dec 23 Python
pandas的object对象转时间对象的方法
Apr 11 Python
Python爬虫框架Scrapy常用命令总结
Jul 26 Python
解决python中 f.write写入中文出错的问题
Oct 31 Python
Python中实现单例模式的n种方式和原理
Nov 14 Python
Opencv+Python 色彩通道拆分及合并的示例
Dec 08 Python
基于Python批量生成指定尺寸缩略图代码实例
Nov 20 Python
使用keras实现Precise, Recall, F1-socre方式
Jun 15 Python
如何快速一次性卸载所有python包(第三方库)呢
Oct 20 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
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP数据类型的总结分析
2013/06/13 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python第三方库的安装方法总结
2016/06/06 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python实现键盘输入的实操方法
2019/07/16 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
企业治理工作自我评价
2013/09/26 职场文书
个人查摆剖析材料
2014/02/04 职场文书
会计人员岗位职责
2014/03/19 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
七一建党日演讲稿
2014/09/05 职场文书