GraphicsView學習-基本圖元使用（2）

文章目錄

• GraphicsView學習-基本圖元使用（2）
• • @[toc]
  • 一、概述
  • 二、實現步驟
  • 三、主要代碼
  • 四、源代碼

更多精彩內容

👉個人內容分類匯總 👈

👉QGraphicsView框架 👈

一、概述

• Qt版本：Qt5.12.5
• 系統：Windows10
• 編譯器：MSVC2017-64

本文內容：

GraphicsView的基本使用，不同于網上一些例程上來就繼承GraphicsView，或者繼承QGraphicsScene，本文盡量做到最簡單的使用GraphicsView、QGraphicsScene、QGraphicsItem。

演示如何使用內置的 直線、矩形、橢圓、多邊形、簡單文本、富文本、圖片、繪圖路徑、窗口部件等基本圖元；

使用自定義散點圖元（如何自定義圖元會在后面單獨講）；

實現所有圖元鼠標選中、移動功能，包括窗口部件圖元；

解決自定義圖元鼠標移動存在殘留問題。

實現效果：

本文中使用到的圖元類繼承關系：

二、實現步驟

新建一個工程，打開UI文件，選擇一個QGraphicsView

創建一個場景對象QGraphicsScene m_scene ，并把場景對象添加到QGraphicsView控件中

QGraphicsScene m_scene; ui->graphicsView->setScene(&m_scene); // 添加繪圖場景

將需要繪制的圖元添加進場景對象m_scene，基本圖元有兩種添加方式；

方法一： 創建圖元對象，通過場景類的QGraphicsScene::addItem函數添加；

QGraphicsLineItem* item = new QGraphicsLineItem(QLineF(0, 0, 300, 0)); m_scene.addItem(item);

方法二： 場景類為每一個基本圖元都內置了一個添加函數，將創建圖元對象和addItem添加的步驟封裝到了函數內部，例如：直線圖元添加函數；

QGraphicsLineItem* item = m_scene.addLine(QLineF(0, 0, 300, 0));

三、主要代碼

• mainwindow.h文件

  #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QButtonGroup> #include <QGraphicsScene> #include <QMainWindow>QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:void initToolBar(); // 初始化按鍵控件，也可以直接在UI文件中拖控件然后轉到槽void drawLine(); // 在這函數內演示添加直線圖元void drawRect(); void drawEllipse();void drawPolygon();void drawSimpleText();void drawText();void drawPixmap();void drawPath();void addWidget();void drawPoints();void clear(); // 清楚QGraphicsScene中顯示的所有圖元private:Ui::MainWindow *ui;QButtonGroup m_butGroup;QGraphicsScene m_scene; }; #endif // MAINWINDOW_H

• mainwindow.cpp文件

  #include "mainwindow.h" #include "ui_mainwindow.h"#include <QDebug> #include <QGraphicsProxyWidget> #include <QPushButton> #include <QTextDocument> #include <QTextFrame> #include <QTextFrameFormat> #include <qgraphicsitem.h> #include <qtoolbutton.h> #include "qgraphicspointsitem.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this);this->setWindowTitle("QGraphicsItem基本圖元演示");initToolBar();ui->graphicsView->setScene(&m_scene); // 添加繪圖場景 }MainWindow::~MainWindow() {delete ui; }/*** @brief 初始化工具欄*/ void MainWindow::initToolBar() {QPushButton* but1 = new QPushButton("直線");QPushButton* but2 = new QPushButton("矩形");QPushButton* but3 = new QPushButton("橢圓");QPushButton* but4 = new QPushButton("多邊形");QPushButton* but5 = new QPushButton("簡單文本");QPushButton* but6 = new QPushButton("富文本");QPushButton* but7 = new QPushButton("圖片");QPushButton* but8 = new QPushButton("路徑");QPushButton* but9 = new QPushButton("窗口");QPushButton* but10 = new QPushButton("自定義散點");QPushButton* but_clear = new QPushButton("清除");// 按鍵設置可選but1->setCheckable(true);but2->setCheckable(true);but3->setCheckable(true);but4->setCheckable(true);but5->setCheckable(true);but6->setCheckable(true);but7->setCheckable(true);but8->setCheckable(true);but9->setCheckable(true);but10->setCheckable(true);but_clear->setCheckable(true);// 添加進按鍵組，默認是單選模式m_butGroup.addButton(but1);m_butGroup.addButton(but2);m_butGroup.addButton(but3);m_butGroup.addButton(but4);m_butGroup.addButton(but5);m_butGroup.addButton(but6);m_butGroup.addButton(but7);m_butGroup.addButton(but8);m_butGroup.addButton(but9);m_butGroup.addButton(but10);m_butGroup.addButton(but_clear);// 添加進工具欄ui->toolBar->addWidget(but1);ui->toolBar->addWidget(but2);ui->toolBar->addWidget(but3);ui->toolBar->addWidget(but4);ui->toolBar->addWidget(but5);ui->toolBar->addWidget(but6);ui->toolBar->addWidget(but7);ui->toolBar->addWidget(but8);ui->toolBar->addWidget(but9);ui->toolBar->addWidget(but10);ui->toolBar->addWidget(but_clear);// 綁定信號槽connect(but1, &QPushButton::clicked, this, &MainWindow::drawLine);connect(but2, &QPushButton::clicked, this, &MainWindow::drawRect);connect(but3, &QPushButton::clicked, this, &MainWindow::drawEllipse);connect(but4, &QPushButton::clicked, this, &MainWindow::drawPolygon);connect(but5, &QPushButton::clicked, this, &MainWindow::drawSimpleText);connect(but6, &QPushButton::clicked, this, &MainWindow::drawText);connect(but7, &QPushButton::clicked, this, &MainWindow::drawPixmap);connect(but8, &QPushButton::clicked, this, &MainWindow::drawPath);connect(but9, &QPushButton::clicked, this, &MainWindow::addWidget);connect(but10, &QPushButton::clicked, this, &MainWindow::drawPoints);connect(but_clear, &QPushButton::clicked, this, &MainWindow::clear); }/*** @brief 添加直線圖元*/ void MainWindow::drawLine() {QLineF line(0, 0, 300, 0);QPen pen(Qt::red, 5);#if 1 // 方式一，使用復雜一些，但更加靈活QGraphicsLineItem* item = new QGraphicsLineItem();item->setLine(line);item->setPen(pen);m_scene.addItem(item); #else // 方式二 這種方式將創建QGraphicsLineItem的步驟封裝到函數內部了，使用簡單QGraphicsLineItem* item = m_scene.addLine(line, pen); #endifitem->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 添加矩形圖元*/ void MainWindow::drawRect() {QRectF rectf(0, 0, 200, 200);QPen pen(Qt::red, 5);QBrush brush(Qt::cyan); #if 0 // 方式一QGraphicsRectItem* item = new QGraphicsRectItem();item->setRect(rectf);item->setPen(pen);item->setBrush(brush);m_scene.addItem(item); #else // 方式二QGraphicsRectItem* item = m_scene.addRect(rectf, pen, brush); #endifitem->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 添加橢圓圖元*/ void MainWindow::drawEllipse() {QRectF rectf(0, 0, 200, 200);QPen pen(Qt::red, 5);QBrush brush(Qt::cyan); #if 0 // 方式一QGraphicsEllipseItem* item = new QGraphicsEllipseItem();item->setRect(rectf);item->setPen(pen);item->setBrush(brush);m_scene.addItem(item); #else // 方式二QGraphicsEllipseItem* item = m_scene.addEllipse(rectf, pen, brush); #endifitem->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 添加多邊形圖元*/ void MainWindow::drawPolygon() {QPolygonF polygonF;polygonF << QPointF(0, 0) << QPointF(100, 50) << QPointF(150, 200);QPen pen(Qt::red, 5);QBrush brush(Qt::cyan); #if 0 // 方式一QGraphicsPolygonItem* item = new QGraphicsPolygonItem();item->setPolygon(polygonF);item->setPen(pen);item->setBrush(brush);m_scene.addItem(item); #else // 方式二QGraphicsPolygonItem* item = m_scene.addPolygon(polygonF, pen, brush); #endifitem->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 添加簡單文本圖元*/ void MainWindow::drawSimpleText() {QFont font("宋體", 30, QFont::Bold); #if 1 // 方式一QGraphicsSimpleTextItem *item = new QGraphicsSimpleTextItem();item->setText("簡單文本");item->setFont(font);m_scene.addItem(item); #else // 方式二QGraphicsSimpleTextItem *item = m_scene.addSimpleText("簡單文本", font); #endifitem->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 添加文本圖元，支持富文本，功能更加強大*/ void MainWindow::drawText() {QFont font("宋體", 30, QFont::Bold); #if 1 // 方式一// 顯示純文本QGraphicsTextItem *item1 = new QGraphicsTextItem();item1->setPlainText("文本");item1->setFont(font);item1->setDefaultTextColor(Qt::red);m_scene.addItem(item1);// 顯示HTML文本，可通過HTML設置，功能更加強大QGraphicsTextItem *item2 = new QGraphicsTextItem();item2->setHtml("<h1>Html文本</h1>");item2->setPos(0, 100);m_scene.addItem(item2);// 富文本QGraphicsTextItem *item3 = new QGraphicsTextItem();QTextDocument* document = new QTextDocument();document->setHtml("<p><span style=\" font-family:'SimSun'; font-size:26pt; color:#00aaff;\">富文本</span></p>");item3->setDocument(document);item3->setPos(0, 200);m_scene.addItem(item3); #else // 方式二QGraphicsTextItem *item1 = m_scene.addText("文本", font); #endifitem1->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 添加圖片圖元*/ void MainWindow::drawPixmap() {QPixmap pixmap(":/1.png"); #if 0QGraphicsPixmapItem* item = new QGraphicsPixmapItem();item->setPixmap(pixmap);m_scene.addItem(item); #elseQGraphicsPixmapItem* item = m_scene.addPixmap(pixmap); #endifitem->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 添加繪圖路徑圖元*/ void MainWindow::drawPath() {QPen pen(Qt::red, 5);QBrush brush(Qt::cyan);QPainterPath path;// 橢圓（圓形）path.addEllipse(150, 10, 100, 100);// 矩形path.addRect(300, 10, 100, 60);// 圓形區域path.addRegion(QRegion(450, 10, 40, 50, QRegion::Ellipse));// 圓角矩形path.addRoundRect(QRect(20, 150, 100, 100), 20, 20);#if 0 // 方式一QGraphicsPathItem* item = new QGraphicsPathItem();item->setPath(path);m_scene.addItem(item); #else // 方式二QGraphicsPathItem* item = m_scene.addPath(path, pen, brush); #endifitem->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 嵌入窗口部件*/ void MainWindow::addWidget() {QPushButton* but = new QPushButton("button"); #if 0QGraphicsProxyWidget *proxy = new QGraphicsProxyWidget();proxy->setWidget(but);m_scene.addItem(proxy); #elseQGraphicsProxyWidget *proxy = m_scene.addWidget(but); // QGraphicsProxyWidget添加窗口部件后【不支持鼠標選中移動】 #endif// 這里通過添加一個矩形圖元來實現鼠標移動QGraphicsRectItem* item = new QGraphicsRectItem(0, 0, 20, 20); // 注意矩形長寬不能為負數，否則不能選中移動proxy->setPos(0, 20); // 將窗口部件下移，露出矩形圖元proxy->setParentItem(item); // 指定父項為矩形圖元m_scene.addItem(item);item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動 }/*** @brief 添加自定義散點圖元(這里是自定義圖元，自定義圖元部分的代碼會放在下一章中詳細講解，這部分可以注釋掉)*/ void MainWindow::drawPoints() {QPen pen(Qt::red, 20);QPolygonF polygonf;polygonf << QPointF(0,0) << QPointF(50,80) << QPointF(100,100) << QPointF(100,50) << QPointF(10, 200);QGraphicsPointsItem* item = new QGraphicsPointsItem();item->setPoints(polygonf);item->setPen(pen);item->setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable); // 設置可選可移動m_scene.addItem(item); }/*** @brief 移除和刪除所有項目*/ void MainWindow::clear() {m_scene.clear(); }

四、源代碼

• gitee
• github

總結

以上是生活随笔為你收集整理的GraphicsView学习-基本图元使用（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。