Qt5实战第五篇：图形与绘图

原创

china马斯克

发布于 2024-12-28 08:42:06

6530

文章被收录于专栏：日常活动篇日常活动篇

1. 概述

Qt5 提供了强大的二维图形绘制功能，通过 QPainter 类，开发者可以在窗口部件或其他绘制设备上进行绘图。此外，Qt 还支持矢量图形、图像处理、动画以及高级绘图功能，使得开发图形界面应用程序变得简单而高效。

2. 基本绘图概念

绘制设备：QWidget、QPixmap、QBitmap、QImage、QPicture、QPrintDevice 等。
绘图工具：QPainter，是 Qt 中用于在绘制设备上进行绘图的核心类。
绘图坐标系：Qt 使用设备坐标系和逻辑坐标系来管理绘图位置，可以通过 QWidget::render()、QWidget::mapFromGlobal()、QWidget::mapToGlobal() 等函数转换坐标系。

3. QPainter 类

QPainter 类是 Qt 绘图的核心类，提供了丰富的绘图方法，如绘制线条、矩形、多边形、椭圆等。它还支持绘制文本、图像和矢量图形（如 SVG）。

常用方法：

QPen：设置线条的颜色、宽度、样式等。
QBrush：设置填充颜色、样式（渐变或图案）。
drawText：绘制文本。
drawPixmap：绘制位图。
drawImage：绘制图像。
drawRect、drawEllipse、drawPolyline、drawPolygon：绘制矩形、椭圆、折线和多边形。

示例代码：

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QPen>
#include <QBrush>

class MyWidget : public QWidget {
protected:
    void paintEvent(QPaintEvent *event) override {
        QPainter painter(this);

        // 设置线条颜色和宽度
        QPen pen(Qt::black, 5, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin);
        painter.setPen(pen);

        // 设置填充颜色和样式
        QBrush brush(Qt::blue, Qt::SolidPattern);
        painter.setBrush(brush);

        // 绘制矩形
        painter.drawRect(50, 50, 200, 100);

        // 设置新的画笔和画刷
        pen.setColor(Qt::red);
        brush.setColor(Qt::green);
        brush.setStyle(Qt::DiagCrossPattern);
        painter.setPen(pen);
        painter.setBrush(brush);

        // 绘制椭圆
        painter.drawEllipse(100, 200, 150, 75);

        // 绘制文本
        painter.setPen(Qt::black);
        painter.drawText(10, 350, "Hello, Qt5 Graphics!");
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    MyWidget widget;
    widget.resize(400, 500);
    widget.show();
    return app.exec();
}

4. 矢量图形

Qt 支持使用 QPainterPath 类进行矢量图形绘制。QPainterPath 可以存储一系列的图形绘制命令，然后一次性绘制出来，非常适合绘制复杂的图形。

示例代码：

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QPainterPath>

class MyWidget : public QWidget {
protected:
    void paintEvent(QPaintEvent *event) override {
        QPainter painter(this);

        QPainterPath path;
        path.moveTo(50, 50);
        path.lineTo(200, 50);
        path.lineTo(150, 150);
        path.lineTo(50, 150);
        path.closeSubpath();

        painter.setPen(Qt::black);
        painter.setBrush(Qt::yellow);
        painter.drawPath(path);
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    MyWidget widget;
    widget.resize(300, 300);
    widget.show();
    return app.exec();
}

5. 图像处理

Qt 提供了 QImage 和 QPixmap 类来处理图像。QImage 提供了对图像像素级别的访问，而 QPixmap 则用于在屏幕上进行高效的图像绘制。

示例代码：

#include <QApplication>
#include <QLabel>
#include <QPixmap>
#include <QImage>
#include <QPainter>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 加载图像
    QPixmap pixmap("path/to/your/image.png");

    // 显示图像
    QLabel label;
    label.setPixmap(pixmap);
    label.show();

    // 使用 QImage 进行图像处理
    QImage image("path/to/your/image.png");
    QImage invertedImage = image.inverted(); // 反色处理

    // 显示处理后的图像
    QLabel invertedLabel;
    invertedLabel.setPixmap(QPixmap::fromImage(invertedImage));
    invertedLabel.show();

    return app.exec();
}

6. 动画

Qt 通过 QPropertyAnimation、QSequentialAnimationGroup 和 QParallelAnimationGroup 等类支持动画效果。

示例代码：

#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QPropertyAnimation>

class AnimatedWidget : public QWidget {
    Q_PROPERTY(qreal opacity READ opacity WRITE setOpacity)

public:
    AnimatedWidget(QWidget *parent = nullptr) : QWidget(parent), m_opacity(1.0) {}

    qreal opacity() const { return m_opacity; }
    void setOpacity(qreal opacity) {
        if (m_opacity != opacity) {
            m_opacity = opacity;
            update();
        }
    }

protected:
    void paintEvent(QPaintEvent *event) override {
        QPainter painter(this);
        painter.setOpacity(m_opacity);
        painter.fillRect(rect(), Qt::blue);
    }

private:
    qreal m_opacity;
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    AnimatedWidget widget;
    widget.resize(200, 200);
    widget.show();

    QPropertyAnimation *animation = new QPropertyAnimation(&widget, "opacity");
    animation->setDuration(1000);
    animation->setStartValue(1.0);
    animation->setEndValue(0.0);
    animation->setLoopCount(2);
    animation->start();

    return app.exec();
}

7. 高级绘图功能

Qt 还支持一些高级绘图功能，如渐变填充、阴影绘制、路径裁剪等。

渐变填充示例：

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QLinearGradient>

class GradientWidget : public QWidget {
protected:
    void paintEvent(QPaintEvent *event) override {
        QPainter painter(this);

        QLinearGradient gradient(0, 0, width(), height());
        gradient.setColorAt(0, Qt::blue);
        gradient.setColorAt(1, Qt::red);

        painter.setBrush(gradient);
        painter.drawRect(rect());
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    GradientWidget widget;
    widget.resize(400, 300);
    widget.show();
    return app.exec();
}

总结

Qt5 的图形与绘图功能非常强大，通过 QPainter 类及其相关类，开发者可以轻松地实现各种复杂的图形绘制需求。无论是基本的形状绘制、图像处理，还是高级的矢量图形和动画效果，Qt 都提供了丰富的 API 来支持。希望这些示例代码能帮助你更好地理解和使用 Qt5 的图形与绘图功能。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

登录后参与评论

0 条评论

热度