时间是伟大的导师,时间就是金钱,一寸光阴一寸金,寸金难买寸光阴,莫等闲,白了少年头,空悲切。珍惜时间啊小姐姐们,好了不扯犊子了,用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。 ---------------------------------------------------------------------------------------------------------------------- |