qt常用控件demo：Qt编写自定义控件22-蚂蚁线

小君 2023-01-25 03:42:11 84

qt常用控件demo：Qt编写自定义控件22-蚂蚁线2. 每个类都可以独立成一个单独的控件，零耦合，每个控件一个头文件和一个实现文件，不依赖其他文件，方便单个控件以源码形式集成到项目中，较少代码量。qwt的控件类环环相扣，高度耦合，想要使用其中一个控件，必须包含所有的代码。#pragma execution_character_set("utf-8") #include "antline.h" #include "qpainter.h" #include "qevent.h" #include "qtimer.h" #include "qdebug.h" AntLine::AntLine(QWidget *parent) : QWidget(parent) { lineLen = 6; lineWidth = 2; lineStep = 1; lineSpeed = 100; lineColor = QColor(0 0 0)

一、前言

关于蚂蚁线控件，相信很多用过PS的人都知道，在选中某个区域以后，边上的线条会有一种动态流动的效果，这种效果就叫做蚂蚁线，百科的解释是：动物的一种本能现象，领头的蚂蚁以随机的路线走向食物或洞穴，第二只蚂蚁紧跟其后以相同的路线行走，每一个后来的蚂蚁紧跟前面蚂蚁行走，排成一条线的现象。在图像影像软件中表示选区的动态虚线，因为虚线闪烁的样子像是一群蚂蚁在跑，所以俗称蚂蚁线。在Photoshop，After ffect等软件中比较常见。

在Qt项目中，有时候可能也会需要用到此控件，比如表格选中，或者某个图像区域选中，某个面板区域选中等，这样就可以更直观的展示选中的区域。

蚂蚁线控件的核心比较简单，就是qpainter中qpen的setDashPattern，这个可以设置连续几个值表示当前的黑白分割区域的位置线段和长度等，查看头文件得知void setDashPattern(const QVector<qreal> &pattern);为此我们要做的就是搞个定时器不断更新这个值即可，当蚂蚁线走到末尾则重新赋值，每次只需要将前面两个长度更新就行。

二、实现的功能

* 1:可设置蚂蚁线的长度

* 2:可设置蚂蚁线的宽度=粗细

* 3:可设置蚂蚁线的步长

qt常用控件demo：Qt编写自定义控件22-蚂蚁线(1)

qt常用控件demo：Qt编写自定义控件22-蚂蚁线(2)

四、完整代码

#pragma execution_character_set("utf-8") #include "antline.h" #include "qpainter.h" #include "qevent.h" #include "qtimer.h" #include "qdebug.h" AntLine::AntLine(QWidget *parent) : QWidget(parent) { lineLen = 6; lineWidth = 2; lineStep = 1; lineSpeed = 100; lineColor = QColor(0 0 0); lineStyle = LineStyle_Circle; dashes = lineLen; spaces = lineLen; dashPattern.clear(); for (int i = 0; i < 20; i) { dashPattern << lineLen; } //启动定时器更新线条 timer = new QTimer(this); connect(timer SIGNAL(timeout()) this SLOT(updateValue())); timer->start(lineSpeed); } AntLine::~AntLine() { if (timer->isActive()) { timer->stop(); } } void AntLine::paintEvent(QPaintEvent *) { int width = this->width(); int height = this->height(); int side = qMin(width height); //绘制准备工作启用反锯齿 QPainter painter(this); painter.setRenderHints(QPainter::Antialiasing); //设置画笔宽度颜色点阵样式 QPen pen; pen.setWidth(lineWidth); pen.setColor(lineColor); pen.setDashPattern(dashPattern); painter.setPen(pen); //根据不同的样式绘制不同的线条 if (lineStyle == LineStyle_Rect) { painter.drawRect(0 0 width height); } else if (lineStyle == LineStyle_RoundedRect) { painter.drawRoundedRect(0 0 width height 5 5); } else if (lineStyle == LineStyle_Ellipse) { painter.drawEllipse(0 0 width height); } else if (lineStyle == LineStyle_Circle) { painter.drawEllipse(width / 2 - side / 2 0 side side); } } void AntLine::updateValue() { //当蚂蚁线走到末尾则重新赋值 if (dashes == lineLen && spaces == lineLen) { dashes = 0; spaces = 0; } if (dashes == 0 && spaces < lineLen) { spaces = spaces lineStep; } else if (spaces == lineLen && dashes < lineLen) { dashes = dashes lineStep; } //每次只需要将前面两个长度更新就行 dashPattern[0] = dashes; dashPattern[1] = spaces; update(); } int AntLine::getLineLen() const { return this->lineLen; } int AntLine::getLineWidth() const { return this->lineWidth; } int AntLine::getLineStep() const { return this->lineStep; } int AntLine::getLineSpeed() const { return this->lineSpeed; } QColor AntLine::getLineColor() const { return this->lineColor; } AntLine::LineStyle AntLine::getLineStyle() const { return this->lineStyle; } QSize AntLine::sizeHint() const { return QSize(100 100); } QSize AntLine::minimumSizeHint() const { return QSize(20 20); } void AntLine::setLineLen(int lineLen) { if (this->lineLen != lineLen) { this->lineLen = lineLen; dashes = lineLen; spaces = lineLen; dashPattern.clear(); for (int i = 0; i < 20; i) { dashPattern << lineLen; } update(); } } void AntLine::setLineWidth(int lineWidth) { if (this->lineWidth != lineWidth) { this->lineWidth = lineWidth; update(); } } void AntLine::setLineStep(int lineStep) { if (this->lineStep != lineStep) { this->lineStep = lineStep; update(); } } void AntLine::setLineSpeed(int lineSpeed) { if (this->lineSpeed != lineSpeed) { this->lineSpeed = lineSpeed; update(); } } void AntLine::setLineColor(const QColor &lineColor) { if (this->lineColor != lineColor) { this->lineColor = lineColor; update(); } } void AntLine::setLineStyle(const AntLine::LineStyle &lineStyle) { if (this->lineStyle != lineStyle) { this->lineStyle = lineStyle; update(); } } 六、控件介绍

1. 超过146个精美控件，涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏，flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。

2. 每个类都可以独立成一个单独的控件，零耦合，每个控件一个头文件和一个实现文件，不依赖其他文件，方便单个控件以源码形式集成到项目中，较少代码量。qwt的控件类环环相扣，高度耦合，想要使用其中一个控件，必须包含所有的代码。

3. 全部纯Qt编写，QWidget QPainter绘制，支持Qt4.6到Qt5.12的任何Qt版本，支持mingw、msvc、gcc等编译器，不乱码，可直接集成到Qt Creator中，和自带的控件一样使用，大部分效果只要设置几个属性即可，极为方便。

4. 每个控件都有一个对应的单独的包含该控件源码的demo，方便参考使用。同时还提供一个所有控件使用的集成的DEMO。

5. 每个控件的源代码都有详细中文注释，都按照统一设计规范编写，方便学习自定义控件的编写。

6. 每个控件默认配色和demo对应的配色都非常精美。

7. 超过130个可见控件，6个不可见控件。

8. 部分控件提供多种样式风格选择，多种指示器样式选择。

9. 所有控件自适应窗体拉伸变化。

10. 集成自定义控件属性设计器，支持拖曳设计，所见即所得，支持导入导出xml格式。

11. 自带activex控件demo，所有控件可以直接运行在ie浏览器中。

12. 集成fontawesome图形字体阿里巴巴iconfont收藏的几百个图形字体，享受图形字体带来的乐趣。