Qt編寫自定義控制元件16-魔法老鼠
前言
五一期間一直忙著大屏電子看板軟體的開發,沒有再去整理控制元件,今天已經將大屏電子看板的所有子視窗都實現了任意停靠和雙擊獨立再次雙擊最大化等功能,過陣子有空再寫一篇文章介紹其中的技術點。魔法老鼠控制元件,來自Qt自帶的demo,我只是將其修改了部分顏色介面等。
實現的功能
- 1:可設定身體+眼睛+眼珠+鼻子+尾巴的顏色
- 2:可設定停留位置旋轉角度
效果圖
標頭檔案程式碼
#ifndef MAGICMOUSE_H #define MAGICMOUSE_H /** * 魔幻老鼠控制元件 作者:feiyangqingyun(QQ:517216493) 2018-7-15 * 本控制元件來源於qtdemo * 1:可設定身體+眼睛+眼珠+鼻子+尾巴的顏色 * 2:可設定停留位置旋轉角度 */ #include <QWidget> #ifdef quc #if (QT_VERSION < QT_VERSION_CHECK(5,7,0)) #include <QtDesigner/QDesignerExportWidget> #else #include <QtUiPlugin/QDesignerExportWidget> #endif class QDESIGNER_WIDGET_EXPORT MagicMouse : public QWidget #else class MagicMouse : public QWidget #endif { Q_OBJECT Q_PROPERTY(int angle READ getAngle WRITE setAngle) Q_PROPERTY(QColor bodyColor READ getBodyColor WRITE setBodyColor) Q_PROPERTY(QColor eyeColor READ getEyeColor WRITE setEyeColor) Q_PROPERTY(QColor eyeballColor READ getEyeballColor WRITE setEyeballColor) Q_PROPERTY(QColor noseColor READ getNoseColor WRITE setNoseColor) Q_PROPERTY(QColor earColor READ getEarColor WRITE setEarColor) Q_PROPERTY(QColor tailColor READ getTailColor WRITE setTailColor) public: explicit MagicMouse(QWidget *parent = 0); protected: void paintEvent(QPaintEvent *); private: int angle; //旋轉角度 QColor bodyColor; //身體顏色 QColor eyeColor; //眼睛顏色 QColor eyeballColor; //眼珠顏色 QColor noseColor; //鼻子顏色 QColor earColor; //耳朵顏色 QColor tailColor; //尾巴顏色 public: int getAngle() const; QColor getBodyColor() const; QColor getEyeColor() const; QColor getEyeballColor() const; QColor getNoseColor() const; QColor getEarColor() const; QColor getTailColor() const; QSize sizeHint() const; QSize minimumSizeHint() const; public slots: //設定旋轉角度 void setAngle(int angle); //設定身體顏色 void setBodyColor(const QColor &bodyColor); //設定眼睛顏色 void setEyeColor(const QColor &eyeColor); //設定眼珠顏色 void setEyeballColor(const QColor &eyeballColor); //設定鼻子顏色 void setNoseColor(const QColor &noseColor); //設定耳朵顏色 void setEarColor(const QColor &earColor); //設定尾巴顏色 void setTailColor(const QColor &tailColor); }; #endif // MAGICMOUSE_H
完整程式碼
#pragma execution_character_set("utf-8") #include "magicmouse.h" #include "qpainter.h" #include "qdebug.h" MagicMouse::MagicMouse(QWidget *parent) : QWidget(parent) { angle = 0; bodyColor = QColor(29, 89, 115); eyeColor = QColor(30, 30, 30); eyeballColor = QColor(255, 255, 255); noseColor = QColor(30, 30, 30); earColor = QColor(86, 190, 193); tailColor = QColor(168, 126, 166); } void MagicMouse::paintEvent(QPaintEvent *e) { int width = this->width(); int height = this->height(); int side = qMin(width, height); //繪製準備工作,啟用反鋸齒 QPainter painter(this); painter.setRenderHints(QPainter::Antialiasing); painter.translate(width / 2, height / 2); painter.scale(side / 100.0, side / 100.0); painter.rotate(angle); //繪製橢圓身體 painter.setPen(Qt::NoPen); painter.setBrush(bodyColor); painter.drawEllipse(-20, -40, 40, 65); //繪製圓形眼睛 int eyeSize = 14; int eyeY = -38; painter.setBrush(eyeColor); painter.drawEllipse(-16, eyeY, eyeSize, eyeSize); painter.drawEllipse(2, eyeY, eyeSize, eyeSize); //繪製兩個眼珠 int eyeballSize = 8; int eyeballY = -38; painter.setBrush(eyeballColor); painter.drawEllipse(-14, eyeballY, eyeballSize, eyeballSize); painter.drawEllipse(6, eyeballY, eyeballSize, eyeballSize); //繪製鼻子 int noseSize = 8; int noseY = -45; painter.setBrush(noseColor); painter.drawEllipse(-4, noseY, noseSize, noseSize); //繪製圓形大耳朵 int earSize = 26; int earY = -28; painter.setBrush(earColor); painter.drawEllipse(-27, earY, earSize, earSize); painter.drawEllipse(1, earY, earSize, earSize); //繪製尾巴 int tailX = 5; int tailY = 25; QPainterPath path(QPointF(0, tailY)); path.cubicTo(-tailX, tailY + 2, -tailX, tailY + 2, 0, tailY + 5); path.cubicTo(tailX, tailY + 7, tailX, tailY + 7, 0, tailY + 10); path.cubicTo(-tailX, tailY + 12, -tailX, tailY + 22, 0, tailY + 15); QPen pen; pen.setWidth(2); pen.setColor(tailColor); pen.setCapStyle(Qt::RoundCap); painter.setPen(pen); painter.setBrush(Qt::NoBrush); painter.drawPath(path); } int MagicMouse::getAngle() const { return this->angle; } QColor MagicMouse::getBodyColor() const { return this->bodyColor; } QColor MagicMouse::getEyeColor() const { return this->eyeColor; } QColor MagicMouse::getEyeballColor() const { return this->eyeballColor; } QColor MagicMouse::getNoseColor() const { return this->noseColor; } QColor MagicMouse::getEarColor() const { return this->earColor; } QColor MagicMouse::getTailColor() const { return this->tailColor; } QSize MagicMouse::sizeHint() const { return QSize(200, 200); } QSize MagicMouse::minimumSizeHint() const { return QSize(30, 30); } void MagicMouse::setAngle(int angle) { if (this->angle != angle) { this->angle = angle; update(); } } void MagicMouse::setBodyColor(const QColor &bodyColor) { if (this->bodyColor != bodyColor) { this->bodyColor = bodyColor; update(); } } void MagicMouse::setEyeColor(const QColor &eyeColor) { if (this->eyeColor != eyeColor) { this->eyeColor = eyeColor; update(); } } void MagicMouse::setEyeballColor(const QColor &eyeballColor) { if (this->eyeballColor != eyeballColor) { this->eyeballColor = eyeballColor; update(); } } void MagicMouse::setNoseColor(const QColor &noseColor) { if (this->noseColor != noseColor) { this->noseColor = noseColor; update(); } } void MagicMouse::setEarColor(const QColor &earColor) { if (this->earColor != earColor) { this->earColor = earColor; update(); } } void MagicMouse::setTailColor(const QColor &tailColor) { if (this->tailColor != tailColor) { this->tailColor = tailColor; update(); } }
控制元件介紹
- 超過145個精美控制元件,涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄,flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt整合的控制元件數量。
- 每個類都可以獨立成一個單獨的控制元件,零耦合,每個控制元件一個頭檔案和一個實現檔案,不依賴其他檔案,方便單個控制元件以原始碼形式整合到專案中,較少程式碼量。qwt的控制元件類環環相扣,高度耦合,想要使用其中一個控制元件,必須包含所有的程式碼。
- 全部純Qt編寫,QWidget+QPainter繪製,支援Qt4.6到Qt5.12的任何Qt版本,支援mingw、msvc、gcc等編譯器,不亂碼,可直接整合到Qt Creator中,和自帶的控制元件一樣使用,大部分效果只要設定幾個屬性即可,極為方便。
- 每個控制元件都有一個對應的單獨的包含該控制元件原始碼的DEMO,方便參考使用。同時還提供一個所有控制元件使用的整合的DEMO。
- 每個控制元件的原始碼都有詳細中文註釋,都按照統一設計規範編寫,方便學習自定義控制元件的編寫。
- 每個控制元件預設配色和demo對應的配色都非常精美。
- 超過130個可見控制元件,6個不可見控制元件。
- 部分控制元件提供多種樣式風格選擇,多種指示器樣式選擇。
- 所有控制元件自適應窗體拉伸變化。
- 整合自定義控制元件屬性設計器,支援拖曳設計,所見即所得,支援匯入匯出xml格式。
- 自帶activex控制元件demo,所有控制元件可以直接執行在ie瀏覽器中。
- 整合fontawesome圖形字型+阿里巴巴iconfont收藏的幾百個圖形字型,享受圖形字型帶來的樂趣。
- 所有控制元件最後生成一個dll動態庫檔案,可以直接整合到qtcreator中拖曳設計使用。
SDK下載
- SDK下載連結:https://pan.baidu.com/s/1tD9v1YPfE2fgYoK6lqUr1Q 提取碼:lyhk
- 自定義控制元件+屬性設計器欣賞:https://pan.baidu.com/s/1l6L3rKSiLu_uYi7lnL3ibQ 提取碼:tmvl
- 下載連結中包含了各個版本的動態庫檔案,所有控制元件的標頭檔案,使用demo。
- 自定義控制元件外掛開放動態庫dll使用(永久免費),無任何後門和限制,請放心使用。
- 目前已提供26個版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控制元件和完善控制元件,不定期更新SDK,歡迎各位提出建議,謝謝!
- widget版本(QQ:517216493)qml版本(QQ:373955953)三峰駝(QQ:278969898)。
相關推薦
Qt編寫自定義控制元件16-魔法老鼠
前言 五一期間一直忙著大屏電子看板軟體的開發,沒有再去整理控制元件,今天已經將大屏電子看板的所有子視窗都實現了任意停靠和雙擊獨立再
Qt編寫自定義控制元件18-魔法小魚
前言 上次發了個純painter繪製的老鼠,那個就是qt目錄下的demo,改的,只是比demo中的老鼠稍微胖一點,估計人到中年都發
Qt編寫自定義控制元件屬性設計器
以前做.NET開發中,.NET直接就集成了屬性設計器,VS不愧是宇宙第一IDE,你能夠想到的都給你封裝好了,用起來不要太爽!因為專案需要自從全面轉Qt開發已經6年有餘,在工業控制領域,有一些應用場景需要自定義繪製一些控制元件滿足特定的需求,比如儀器儀表、組態等,而且需要直接使用者通過屬性設計的形式生成匯出控制
Qt編寫自定義控制元件一開關按鈕
從2010年進入網際網路+智慧手機時代以來,各種各樣的APP大行其道,手機上面的APP有很多流行的元素,開關按鈕個人非常喜歡,手機QQ、360衛士、金山毒霸等,都有很多開關控制一些操作,在Qt widgets應用專案上,在專案中應用些類似的開關按鈕,估計也會為專案增添不少新鮮
Qt編寫自定義控制元件外掛開放動態庫dll使用(永久免費)
這套控制元件陸陸續續完善了四年多,目前共133個控制元件,除了十幾個控制元件參考網友開源的程式碼寫的,其餘全部原創,在釋出之初就有
Qt編寫自定義控制元件1-汽車儀表盤
前言 汽車儀表盤幾乎是qt寫儀表盤控制元件中最常見的,一般來說先要求美工做好設計圖,然後設計效果圖給到程式設計師,由程式設計師根據
Qt編寫自定義控制元件2-進度條標尺
前言 進度條標尺控制元件的應用場景一般是需要手動拉動進度,上面有標尺可以看到當前進度,類似於qslider控制元件,其實就是qsl
Qt編寫自定義控制元件6-指南針儀表盤
前言 指南針儀表盤,主要用來指示東南西北四個方位,雙向對稱兩個指標旋轉,其實就是360度打轉,功能屬於簡單型,可能指標的繪製稍微難
Qt編寫自定義控制元件7-自定義可拖動多邊形
前言 自定義可拖動多邊形控制元件,原創作者是趙彥博(QQ:408815041 [email protected]),創作之初主要
Qt編寫自定義控制元件9-導航按鈕控制元件
前言 導航按鈕控制元件,主要用於各種漂亮精美的導航條,我們經常在web中看到導航條都非常精美,都是html+css+js實現的,還
Qt編寫自定義控制元件11-裝置防區按鈕控制元件
前言 在很多專案應用中,需要根據資料動態生成物件顯示在地圖上,比如地圖標註,同時還需要可拖動物件到指定位置顯示,能有多種狀態指示,
Qt編寫自定義控制元件12-進度儀表盤
前言 進度儀表盤主要應用場景是標識一個任務進度完成的狀況等,可以自由的設定範圍值和當前值,為了美觀還提供了四種指示器(圓形指示器/
Qt編寫自定義控制元件13-多型進度條
前言 多型進度條,顧名思義,有多重狀態,其實本控制元件主要是用來表示百分比進度的,由於之前已經存在了百分比進度條控制元件,名字被霸
Qt編寫自定義控制元件14-環形進度條
前言 環形進度條,用來展示當前進度,為了滿足大屏UI的需要特意定製,以前有個叫圓環進度條,不能滿足專案需要,只能重新定做,以前的進
Qt編寫自定義控制元件15-百分比儀表盤
前言 百分比儀表盤,主要的應用場景是展示銷售完成率、產品合格率等,也可以作為一個進度百分比展示,可以獨立設定對應的標題文字,標題文
Qt編寫自定義控制元件19-圖片背景時鐘
前言 圖片背景時鐘控制元件,是全套控制元件(目前共145個)中唯一的幾個貼圖的控制元件,這個背景要是不貼圖,會畫到猝死,必須用美工
Qt編寫自定義控制元件20-自定義餅圖
一、前言 上次在寫視覺化資料大屏電子看板專案的時候,為了逐步移除對QChart的依賴(主要是因為QChart真的太垃圾了,是所有Q
Qt編寫自定義控制元件28-顏色滑塊面板
一、前言 相比於上一個顏色按鈕面板,此控制元件就要難很多,顏色值有三種表示形式,除了程式設計師最常用的RGB以外,還有HSB和CM
Qt編寫自定義控制元件29-顏色選取面板
一、前言 這個控制元件主要是模仿QColorDialog對話方塊中的顏色選取面板,提供一個十字形狀的標識器,滑鼠按下開始選取顏色,
Qt編寫自定義控制元件30-顏色多型按鈕
一、前言 這個控制元件一開始打算用樣式表來實現,經過初步的探索,後面發現還是不夠智慧以及不能完全滿足需求,比如要在此控制元件設定多