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学习手册中的python多态示例代码
Jan 21 Python
Python多进程并发(multiprocessing)用法实例详解
Jun 02 Python
python目录与文件名操作例子
Aug 28 Python
Linux RedHat下安装Python2.7开发环境
May 20 Python
Python2中文处理纪要的实现方法
Mar 10 Python
Python 从列表中取值和取索引的方法
Dec 25 Python
Python/Django后端使用PIL Image生成头像缩略图
Apr 30 Python
django项目简单调取百度翻译接口的方法
Aug 06 Python
适合Python初学者的一些编程技巧
Feb 12 Python
python集成开发环境配置(pycharm)
Feb 14 Python
python利用后缀表达式实现计算器功能
Feb 22 Python
python3 实现mysql数据库连接池的示例代码
Apr 17 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 session处理的定制
2009/03/16 PHP
20个PHP常用类库小结
2011/09/11 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python Django批量导入不重复数据
2016/03/25 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
高校十八大报告感想
2014/01/27 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
亮剑观后感300字
2015/06/05 职场文书
运动会通讯稿300字
2015/07/20 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL