目录
(带个目录方便大家预览,知乎不支持目录,这个目录是从博客粘贴过来的,点击会跳转到博客)
- 简介
- 自绘方案
- QPainter
- QWidget+QPainter 示例
- QQuickPaintedItem+QPainter 示例
- 关于QPainter
- Qml Canvas
- Qml Shapes
- QOpenGLWidget / QOpenGLWindow
- Qml SceneGraph
- Qml QQuickFrameBufferObject
- Qml ShaderEffect
- QVulkanWindow
简介
本文是《Qml组件化编程》系列文章的第七篇,涛哥会罗列Qt中的所有自绘方案,并提供一些案例和说明。
Qt自带的组件,外观都是固定的,一般可以通过qss/Qml style等方式进行定制。
如果要实现外观特殊的组件,就需要自己绘制了。
注:文章主要发布在涛哥的博客 和 知乎专栏-涛哥的Qt进阶之路
自绘方案
Qt中的自绘方案有这么一些:
- QWidget+QPainter / QQuickPaintedItem+QPainter
- Qml Canvas
- Qml Shapes
- QOpenGLWidget / QOpenGLWindow
- Qml QQuickFrameBufferObject
- Qml SceneGraph
- Qml ShaderEffect
- QVulkanWindow
(GraphicsView和QWidget的绘制类似,就不讨论了)
QPainter
QPainter是一个功能强大的画笔,QWidget中的各种控件如QPushButton、QLable等都是用QPainter画出来的。
(QWidget的控件在绘制时,还增加了qss样式表,让UI定制变得更加方便。)
QWidget+QPainter 示例
QWidget中使用QPainter的方法,是重载paintEvent事件,这里示例绘制一个进度条:
//MainWindow.h
#pragma once
#include <QMainWindow>
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = 0);
~MainWindow();
protected:
void paintEvent(QPaintEvent *event) override;
void timerEvent(QTimerEvent *event) override;
private:
QList<QColor> mColorList;
int mCurrent = 0;
};
//MainWindow.cpp
#include "MainWindow.h"
#include <QPainter>
#include <QtMath>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
resize(400, 300);
mColorList << QColor(51, 52, 54)
<< QColor(75, 85, 86)
<< QColor(87, 103, 103)
<< QColor(95, 119, 121)
<< QColor(101, 132, 134)
<< QColor(104, 146, 145)
<< QColor(104, 158, 158)
<< QColor(101, 169, 168)
<< QColor(92, 182, 180)
<< QColor(79, 194, 191);
//每秒触发60次定时器,即刷新率60FPS
startTimer(1000 / 60);
}
MainWindow::~MainWindow()
{
}
void MainWindow::timerEvent(QTimerEvent *) {
mCurrent =(mCurrent + 3) % 360;
update();
}
void MainWindow::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing|QPainter::TextAntialiasing);
//原点x坐标
qreal a = 100;
//原点y坐标
qreal b = 100;
//半径
qreal r = 80;
//每个小圆的半径递增值
qreal roffset = 2;
//每个小圆的角度递增值
qreal angleOffset = 30;
qreal currentangle = mCurrent ;
for (int i = 0; i < mColorList.length(); i++) {
qreal r0 = i * roffset;
qreal angle = currentangle + i * angleOffset;
qreal x0 = r * cos(qDegreesToRadians(angle)) + a;
qreal y0 = r * sin(qDegreesToRadians(angle)) + b;
painter.setPen(mColorList[i]);
painter.setBrush(QBrush(mColorList[i]));
painter.drawEllipse(x0 - r0, y0 - r0, 2 * r0, 2 * r0);
}
}
QQuickPaintedItem+QPainter 示例
QQuickPaintedItem继承自QQuickItem,而QQuickItem就是Qml中的Item。
QQuick