找回密码
 立即注册
Qt开源社区 门户 查看内容

Qt 纯属娱乐-绘制一个模拟时钟

2019-9-11 10:54| 发布者: admin| 查看: 862| 评论: 0

摘要: 时间是伟大的导师,时间就是金钱,一寸光阴一寸金,寸金难买寸光阴,莫等闲,白了少年头,空悲切。珍惜时间啊小姐姐们,好了不扯犊子了,用qt做一个带时分秒的指针时钟,先来看看效果吧效果视频软件结构现在开始讲一 ...
    时间是伟大的导师,时间就是金钱,一寸光阴一寸金,寸金难买寸光阴,莫等闲,白了少年头,空悲切。珍惜时间啊小姐姐们,好了不扯犊子了,用qt做一个带时分秒的指针时钟,先来看看效果吧

效果视频



软件结构



现在开始讲一下源码吧

引入头文件
    #include<QGuiApplication>
    看一下解释



        有图形界面,只使用QML实现,使用QGuiApplication

    引入头文件
      #include<QQmlApplicationEngine>
          QQmlApplicationEngine提供了从一个QML文件里面加载应用程序的方式。

          这类联合了QQmlEngine和QmlComponent去加载单独的QML文件。他还向QML提供了应用程序的功能,这个应用程序的功能能够让C++与QML混合编程,使用C++控制业务逻辑,用QML做界面。

          在main函数中我们就可以这样使用了

        intmain(int argc, char *argv[]){ QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
        QGuiApplication app(argc, argv);
        QQmlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return-1;
        return app.exec();}

        improt语句

            main.qml 文件第一行代码:import QtQuick 2.9 。这行代码引入了 QtQuick 模块, import 语句的作用与 C++ 中的 #include 类似,也与 Java 中的 import 效果一样.

        设置时分秒指针颜色

          property string hourColor: "#B23AEE"property string minuteColor: "#43CD80"property string secondColor: "#B8860B"

          在QML中使用Timer元素来表示一个定时器
            interval: 500; running: true; repeat: true
            onTriggered: {var date = new Date(); hour = date.getHours(); minute = date.getMinutes(); second = date.getSeconds();
            canvas.requestPaint();}

            interval属性:设置时间间隔,单位ms

            repeat属性:是否重复触发。如果是false则只触发一次并自动将running属性设置为false.默认值为true。

            running属性:true开启定时器。默认true。

                当定时器触发时会执行onTriggered()信号处理函数,在这里可以定义一些操作;

            绘制时分秒

              //绘制刻度drawScaleValue(ctx); //绘制时针 drawClockHand(ctx, 1); //绘制分针 drawClockHand(ctx, 2); //绘制秒针 drawClockHand(ctx, 3);

                  先来看看怎么绘制刻度的,圆圈360°,每个小时刻度之间的夹角30°,这个无需解释吧,先看看getContext函数

                  getContext由get(获取)+context(上下文)构成。由此可以猜测此方法的功能是获取绘图上下文环境,通俗的讲,就是为canvas绘图提供绘图的一些必要条件。
                var ctx = getContext("2d");var centerX = centerPoint().x;var centerY = centerPoint().y;var isHour = ((i % 30) == 0);var radius = centerX < centerY ? (centerX - margin) : (centerY - margin);
                ctx.strokeStyle = isHour ? canvas.hourColor : canvas.minuteColor;
                       

                    翻转,绘制,移动到圆中心

                  ctx.translate(centerX, centerY);ctx.rotate(deg2Rad(i));ctx.beginPath();ctx.moveTo(radius, 0);

                      再看看怎么绘制时分秒,我们知道时分秒指针长度是不一样的,相同时间点走的角度也不一样,看代码

                    ctx.globalCompositeOperation = "source-over";
                        在先绘制的图形上显示后绘制的图形。相交部分由后绘制的图形填充(颜色,渐变,纹理)覆盖。

                        先了解deg2Rad函数,把角度值转换为弧度值。fillStyle函数,fillStyle与Qt C++中的QBrush类似,保存用于填充图元的画刷,它可以是一个颜色值,也可以是CanvasGradient或CanvasPattern对象。

                    绘制时钟
                      ctx.fillStyle = hourColor;angle = deg2Rad(30.0 * (timer.hour + timer.minute / 60.0));

                      绘制分钟
                        ctx.fillStyle = minuteColor;angle = deg2Rad(6.0 * timer.minute);handPoint3.x = 0; handPoint3.y = -130;

                        绘制秒钟
                          ctx.fillStyle = secondColor;angle = deg2Rad(6.0 * timer.second);handPoint3.x = 0; handPoint3.y = -180;

                              最后要了解一下QT 基本图形绘制的一些函数,大家可以在qt creator Help里面查找看看具体的定义以及用法。

                          总结

                              这里使用的是qml方式实现,想要做时钟有很多方法,也有很多必需功能,例如设置时间,切换北京时间或者伦敦时间,或者设置闹钟等等功能,主要起到抛砖引玉的功能,希望大家一起多交流,共进步。


                          推荐阅读

                          (点击标题可跳转阅读)

                          Qt 学习笔记-强势入门

                          Qt 学习笔记-Qt中添加背景图片的方法

                          Qt 学习笔记-处理鼠标响应事件



                          关注公众号【技术让梦想更伟大】,获取更多Linux/C/C++/Python/FPGA等原创技术文章。后台免费获取经典电子书籍和视频资源,实时更新,原创不易,请多支持,谢谢!




                          ----------------------------------------------------------------------------------------------------------------------
                          我们尊重原创,也注重分享,文章来源于微信公众号:技术让梦想更伟大,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
                          ----------------------------------------------------------------------------------------------------------------------

                          鲜花

                          握手

                          雷人

                          路过

                          鸡蛋
                          
                          公告
                          可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了