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字典基本操作实例分析
Jul 11 Python
详解Python中的相对导入和绝对导入
Jan 06 Python
利用Celery实现Django博客PV统计功能详解
May 08 Python
学习Python selenium自动化网页抓取器
Jan 20 Python
python MysqlDb模块安装及其使用详解
Feb 23 Python
Python语法分析之字符串格式化
Jun 13 Python
python用线性回归预测股票价格的实现代码
Sep 04 Python
详解python itertools功能
Feb 07 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
Mar 10 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
Aug 17 Python
Scrapy中如何向Spider传入参数的方法实现
Sep 28 Python
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
May 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
利用Python实现网络测试的脚本分享
2017/05/26 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
CNC数控操作工岗位职责
2013/11/19 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
企业车辆管理制度
2014/01/24 职场文书
市场安全管理制度
2014/01/26 职场文书
三爱活动实施方案
2014/03/19 职场文书
运动会方阵口号
2014/06/07 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis