技術標籤：qt enabled屬性導致圖片顏色qt opengl 2d繪圖效率qt 定時器qt 介面翻轉特效在一個qt裡面載入其他軟體介面

時間是偉大的導師，時間就是金錢，一寸光陰一寸金，寸金難買寸光陰，莫等閒，白了少年頭，空悲切。珍惜時間啊小姐姐們，好了不扯犢子了，用qt做一個帶時分秒的指標時鐘，先來看看效果吧

效果視訊

https://www.zhihu.com/zvideo/1254392077057339392

軟體結構

現在開始講一下原始碼吧

引入標頭檔案

#include <QGuiApplication>

看一下解釋

有圖形介面，只使用QML實現，使用QGuiApplication

引入標頭檔案

#include <QQmlApplicationEngine>

QQmlApplicationEngine提供了從一個QML檔案裡面載入應用程式的方式。

這類聯合了QQmlEngine和QmlComponent去載入單獨的QML檔案。他還向QML提供了應用程式的功能，這個應用程式的功能能夠讓C++與QML混合程式設計，使用C++控制業務邏輯，用QML做介面。

在main函式中我們就可以這樣使用了

int main(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方式實現，想要做時鐘有很多方法，也有很多必需功能，例如設定時間，切換北京時間或者倫敦時間，或者設定鬧鐘等等功能，主要起到拋磚引玉的功能，希望大家一起多交流，共進步。