![[T]](/views/front/img/head.png){kind=avatar}
八、Qt绘图
一、QPainter基本绘制
Qt可以使用相同的API在屏幕和绘图设备上进行绘制，它主要基于QPainter、QPaintDevice和QPaintEngine这个三个类。
- QPainter：用来进行绘图操作。QPainter一般在部件的绘制事件paintEvent()中进行绘制，当窗口程序需要升级或者重新绘制时，调用此函数。使用repaint()和update()后，调用函数painEvent().
- QPaintDevice：抽象的二维界面，是中间媒介。QPainter可以在继承自QPaintDevice类的任何对象上进行绘制操作。
- QPaintEngine：提供了一些接口，可用于QPainter在不同的设备上进行绘制
1、Painter主要功能
QPainter三个主要设置：pen，brush，font
painter.setPen(QPen(...));
painter.setBrush(QBrush(...)); // 填充效果
painter.setFont(QFont(...));
painter.setRenderHint(QPainter::Antialiasing); // 抗锯齿
painter.drawXXX(...);
2、实现工具
（1）创建项目，基于QWidget
（2）添加图标资源
（3）绘制基本图形
void Widget::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event)
QPainter painter(this);
int w = this->width();
int h = this->height();
// painter.setRenderHint(QPainter::Antialiasing);
// painter.setRenderHint(QPainter::TextAntialiasing);
QPen pen;
pen.setWidth(20);
pen.setColor(Qt::red);
pen.setStyle(Qt::DashDotDotLine); // 点线
pen.setJoinStyle(Qt::RoundJoin); // 圆角
painter.setPen(pen);
QBrush brush;
brush.setColor(Qt::blue);
brush.setStyle(Qt::Dense5Pattern); // 填充样式
painter.setBrush(brush);
QRect rect(w / 4, h / 4, w / 2, h / 2);
painter.drawRect(rect);
}
（4）绘制图片与文字
QRect rect(w / 4, h / 4, w / 2, h / 2);
painter.drawRect(rect);
QImage image(":/images/images/favicon.png");
painter.drawImage(rect, image);
QFont font;
font.setPointSize(20);
painter.setFont(font);
painter.drawText(rect, "Test");
（5）画线
QPoint points[] = {QPoint(w / 3, h / 3), QPoint(w / 2, h / 2), QPoint(w / 2, 2 * h / 3)};
painter.drawPolyline(points, 3);
二、坐标体统和坐标转换
QPainter提供了一些坐标变换，通过平移、旋转、缩放等坐标变换得到一个逻辑坐标系统，使用逻辑坐标系统可以更方便绘图。
- 坐标变换
- void translate(qreal dx, qreal dy) 坐标系统偏移，坐标原点偏移到新位置
- void roate(qreal angle) 坐标系统顺时针旋转
- void scale(qreal sx, qreal sy) 坐标体统缩放
- void shear(qreal sh, qreal sy) 坐标系统左扭转变换
- 状态保存与恢复
- void save() 保存painter当前的状态，即将当前的状态压入栈
- void restore() 恢复上一次状态，即从对战中弹出上一次的状态
- void restTransform() 复位所有的坐标变换
1、实现程序
（1）创建项目，基于QWidget
（2）绘制图形
#include "widget.h"
#include "ui_widget.h"
#include 
三、视口和窗口
- 视口（实际大小）：绘图设备的任意一个矩形区域的物理坐标，可以只选取物理坐标的一个矩形区域用于绘图。视口默认情况下等于绘图设备的整个矩形区。
- 窗口（相对大小）：对于视口的矩形区域，只不过是用逻辑坐标定义的坐标系，窗口坐标的中心在矩阵中心。
1、实现程序
（1）创建项目，基于QWidget
（2）绘图
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
setPalette(QPalette(Qt::white));
setAutoFillBackground(true);
resize(300, 300);
}
Widget::~Widget()
{
delete ui;
}
void Widget::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event)
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
int w = width();
int h = height();
painter.drawEllipse(QPoint(0, 0), 50, 50);
int side = qMin(h, w);
QRect rect((w - side) / 2, (h - side) / 2, side, side); // 选取中心最大矩形
painter.drawRect(rect);
painter.setViewport(rect); // 设置区域
painter.setWindow(-100, -100, 200, 200); //设置相对坐标系
QLinearGradient linearGradient(0, 0, 100, 0); //0,0到100,0 颜色渐变
linearGradient.setColorAt(0, Qt::blue);
linearGradient.setColorAt(1, Qt::red);
linearGradient.setSpread(QGradient::PadSpread); // 边界发散
painter.setCompositionMode(QPainter::RasterOp_NotSourceXorDestination); //设置混合模式
painter.setBrush(linearGradient);
for (int i = 0; i < 36; ++i)
{
painter.drawEllipse(QPoint(50, 0), 50, 50);
painter.rotate(10);
}
}
四、Graphics View场景、视图与图形项
1、Graphics View绘图架构
QPainter不能实现图件选择、编辑、拖拽、修改等功能
- QGrapicsView（视图）：关联场景可以让场景中的所有图形项可视化
- QGraphicsScene（场景）：可以管理多个图形项
- QGrapicsItem（图形项）：是图元，支持鼠标事件响应，比如矩形的图形项
QGraphicsView是Qt的图形视图组件，在UI设计器的Display Widgets分组中。QGraphicsView没有与mouseMoveEvent()相关的信号，需要继承自定义一个派生类。
场景图形项类的继承关系
QGraphicsItem
QAbstractGraphicsShapeItem
QGraphicsEclipseItem
QGraphicsPathItem
QGraphicsPlogonItem
QGraphicsRectItem
QGraphicsSimpleTextItem
QGraphicsLineItem
QGraphicsPixmapItem
QGraphicsObject
QGraphicstextItem
QGraphicsItemGroup
2、实现程序
（1）创建项目，基于QMainWindow
（2）添加组件
（3）添加类
（4）提升类
提升原因：QGraphicsView没有鼠标移动事件，需要使用新的继承类实现鼠标事件。
（5）实现鼠标事件监听
protected:
// 重写鼠标事件槽函数
void mousePressEvent(QMouseEvent *event) override;
void mouseMoveEvent(QMouseEvent *event) override;
signals:
// 鼠标事件信号
void mouseMovePoint(QPoint point);
void mouseClicked(QPoint point);
（6）实现功能
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include 
五、Graphics View绘图
1、框架
（1）创建项目，基于QMainWindow
（2）添加图标资源，创建工具栏图标
（3）添加类，为Graphics View组件提升类
（4）添加信号与槽函数
class MyGraphicsView : public QGraphicsView
{
Q_OBJECT
public:
explicit MyGraphicsView(QWidget *parent = nullptr);
private:
void keyPressEvent(QKeyEvent *event) override;
void mouseDoubleClickEvent(QMouseEvent *event) override;
void mousePressEvent(QMouseEvent *event) override;
// void mouseMoveEvent(QMouseEvent *event) override;
signals:
void keyPress(QKeyEvent *event);
void mouseDoubleClick(QPoint point);
void mousePress(QPoint point);
public slots:
};
#include "mygraphicsview.h"
#include 2、绘图
void MainWindow::on_actItemRect_triggered()
{
QGraphicsRectItem *item = new QGraphicsRectItem(-50, -30, 100, 60);
item->setFlags(QGraphicsItem::ItemIsFocusable | // 聚焦
QGraphicsItem::ItemIsSelectable | // 选择
QGraphicsItem::ItemIsMovable );// 移动
item->setBrush(QBrush(Qt::yellow));
item->setPos(-100 + qrand() % 200, -60 + qrand() % 120);
item->setData(ItemID, ++seqNum);
item->setData(ItemDescription, "矩形");
scene->addItem(item);
scene->clearSelection();
item->setSelected(true);
}
void MainWindow::on_actItemCircle_triggered()
{
QGraphicsEllipseItem *item = new QGraphicsEllipseItem(-50, -50, 100, 100);
item->setFlags(QGraphicsItem::ItemIsFocusable | // 聚焦
QGraphicsItem::ItemIsSelectable | // 选择
QGraphicsItem::ItemIsMovable );// 移动
item->setBrush(QBrush(Qt::red));
item->setPos(-100 + qrand() % 200, -100 + qrand() % 200);
item->setData(ItemID, ++seqNum);
item->setData(ItemDescription, "圆形");
scene->addItem(item);
scene->clearSelection();
item->setSelected(true);
}
void MainWindow::on_actItemElliptic_triggered()
{
QGraphicsEllipseItem *item = new QGraphicsEllipseItem(-50, -30, 100, 60);
item->setFlags(QGraphicsItem::ItemIsFocusable | // 聚焦
QGraphicsItem::ItemIsSelectable | // 选择
QGraphicsItem::ItemIsMovable );// 移动
item->setBrush(QBrush(Qt::blue));
item->setPos(-100 + qrand() % 200, -60 + qrand() % 130);
item->setData(ItemID, ++seqNum);
item->setData(ItemDescription, "椭圆");
scene->addItem(item);
scene->clearSelection();
item->setSelected(true);
}
void MainWindow::on_actItemLine_triggered()
{
QGraphicsLineItem *item = new QGraphicsLineItem(-100, 0, 100, 0);
item->setFlags(QGraphicsItem::ItemIsFocusable | // 聚焦
QGraphicsItem::ItemIsSelectable | // 选择
QGraphicsItem::ItemIsMovable );// 移动
QPen pen;
pen.setColor(Qt::black);
pen.setWidth(5);
item->setPen(pen);
item->setPos(-100 + qrand() % 200, -60 + qrand() % 130);
item->setData(ItemID, ++seqNum);
item->setData(ItemDescription, "直线");
scene->addItem(item);
scene->clearSelection();
item->setSelected(true);
}
#include 3、控制
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include