Qt之圖形視圖（常見圖元）

簡述

QGraphicsItem 類是 QGraphicsScene 中全部 item（圖元）的基類。

它提供了一個輕量級的基礎，用於編寫本身的自定義 item。其中包括：定義 item 的幾何形狀、碰撞檢測、繪製實現、以及經過其事件處理程序進行 item 的交互，QGraphicsItem 是 Qt之圖形視圖框架 的一部分。

 

常見圖元

爲方便起見，Qt 爲最多見的形狀提供了一組標準 item。它們是：

QGraphicsSimpleTextItem：提供了一個簡單的文本標籤項 QGraphicsTextItem：提供了一個格式化的文本項 QGraphicsLineItem：提供了一個直線項 QGraphicsPixmapItem：提供了一個圖像項 QGraphicsRectItem：提供了一個矩形項 QGraphicsEllipseItem：提供了一個橢圓項 QGraphicsPathItem：提供了一個路徑項 QGraphicsPolygonItem：提供了一個多邊形項

QGraphicsSimpleTextItem

詳細描述

QGraphicsSimpleTextItem 提供了一個簡單的文本標籤項，能夠添加到 QGraphicsScene 中。

要設置 item 的文本，能夠傳遞 QString 到 QGraphicsSimpleTextItem 的構造函數，或在以後調用 setText() 來更改文本。要設置文本填充色，調用 setBrush()。

QGraphicsSimpleTextItem 能夠具備填充和輪廓，setBrush() 用於設置文本填充（即，文本色），setPen() 用於設置繪製文本輪廓的畫筆，（後者可能很慢，特別是對於複雜的畫筆，以及具備長文本內容的 item）。若是隻想繪製一行簡單的文本，只須要調用 setBrush()，不須要設置畫筆。QGraphicsSimpleTextItem 的畫筆默認是 Qt::NoPen。

QGraphicsSimpleTextItem 使用文本的格式化大小和相關聯的字體，爲 boundingRect()、shape() 和 contains() 提供了一個合理的實現。能夠經過調用 setFont() 設置字體。

QGraphicsSimpleText 不顯示富文本，相反，可使用 QGraphicsTextItem，它提供全文控制功能。

示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// 定義一個 item QGraphicsSimpleTextItem *pItem = new QGraphicsSimpleTextItem(); pItem->setText(QString::fromLocal8Bit("一去丶二三裏"));   // 字體 QFont font = pItem->font(); font.setPixelSize(20);  // 像素大小 font.setItalic(true);  // 斜體 font.setUnderline(true);  // 下劃線 pItem->setFont(font);   pItem->setBrush(QBrush(QColor(0, 160, 230)));   // 將 item 添加至場景中 QGraphicsScene *pScene = new QGraphicsScene(); pScene->addItem(pItem);   // 爲視圖設置場景 QGraphicsView *pView = new QGraphicsView(); pView->setScene(pScene); pView->setStyleSheet("border:none; background:transparent;");   pView->show();

要將 QGraphicsSimpleTextItem 添加至場景中，有兩種方式：

構造 QGraphicsSimpleTextItem，而後經過 QGraphicsScene::addItem() 添加。使用 QGraphicsScene::addSimpleText() 建立並添加一個 QGraphicsSimpleTextItem，並返回 item 的指針。

QGraphicsTextItem

詳細描述

QGraphicsTextItem 類提供了一個格式化的文本項，能夠添加到 QGraphicsScene 中。

要設置 item 的文本，能夠傳遞 QString 到 QGraphicsTextItem 的構造函數，或調用 setHtml()/setPlainText()。

QGraphicsTextItem 使用文本的格式化大小和相關聯的字體，爲 boundingRect()、shape() 和 contains() 提供了一個合理的實現。能夠經過調用 setFont() 設置字體。

能夠經過使用 setTextInteractionFlags() 設置 Qt::TextEditorInteraction 標誌來使 item 可編輯。

item 的首選文本寬度可使用 setTextWidth() 設置，並使用 textWidth() 獲取。

注意：爲了在中心對齊 HTML 文本，必須設置 item 的文本寬度。不然，能夠在設置 item 的文本後調用 adjustSize()。

注意：<喎�"/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPiBRR3JhcGhpY3NUZXh0SXRlbSDErMjPvdPK3CBob3ZlciDKwrz+o6y/ydLUyrnTwyBzZXRBY2NlcHRIb3ZlckV2ZW50cygpILj8uMS0y9a1oaM8L3A+DQo8aDIgaWQ9"純文本">純文本

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// 定義一個 item QGraphicsTextItem *pItem = new QGraphicsTextItem(); pItem->setPlainText(QString::fromLocal8Bit("一去丶二三裏"));  // 純文本 pItem->setDefaultTextColor(QColor(0, 160, 230));  // 文本色   // 字體 QFont font = pItem->font(); font.setPixelSize(20);  // 像素大小 font.setItalic(true);  // 斜體 font.setUnderline(true);  // 下劃線 pItem->setFont(font);   // 將 item 添加至場景中 QGraphicsScene *pScene = new QGraphicsScene(); pScene->addItem(pItem);   // 爲視圖設置場景 QGraphicsView *pView = new QGraphicsView(); pView->setScene(pScene); pView->setStyleSheet("border:none; background:transparent;");   pView->show();

要將 QGraphicsTextItem 添加至場景中，有兩種方式：

構造 QGraphicsTextItem，而後經過 QGraphicsScene::addItem() 添加。使用 QGraphicsScene::addText() 建立並添加一個 QGraphicsTextItem，並返回 item 的指針。

富文本

假設文本是 HTML 格式，顯示不一樣顏色的文本以及圖片。

?

1	QString strHTML = QString("

\\ \\\ %1%2 \

\\\").arg("I am a ").arg("Qter"); pItem->setHtml(strHTML);

超連接

咱們須要使用標籤 寫一段簡單的 HTML 超連接代碼

方式一：

比較簡單，直接調用 setOpenExternalLinks(true) 便可。

?

1 2 3

<code>pItem->setHtml(QString("%2").arg("http://blog.csdn.net/liang19890820").arg(QStringLiteral("一去丶二三裏"))); pItem->setOpenExternalLinks(true); pItem->setTextInteractionFlags(Qt::TextBrowserInteraction);</code>

方式二：

鏈接 linkActivated() 信號，而後調用 QDesktopServices 的 openUrl() 打開連接：

?

1 2 3 4 5

<code>pItem->setHtml(QString("%2").arg("http://blog.csdn.net/liang19890820").arg(QStringLiteral("一去丶二三裏"))); pItem->setTextInteractionFlags(Qt::TextBrowserInteraction); connect(pItem, &QGraphicsTextItem::linkActivated, [=](QString link) {             QDesktopServices::openUrl(QUrl(link)); });</code>

注意：這兩種方式都須要調用 setTextInteractionFlags(Qt::TextBrowserInteraction)，指定交互方式爲文本瀏覽器交互。

編輯

經過使用 setTextInteractionFlags() 設置 Qt::TextEditorInteraction 標誌來使項目可編輯。

?

1 2 3 4

<code>pItem->setTextInteractionFlags(Qt::TextEditorInteraction);  // 可編輯 connect(pItem->document(), &QTextDocument::contentsChanged, [=]() {     qDebug() << pItem->toPlainText(); });</code>

輸出以下：

「Q」
「Qt」
「Qte」
「Qter」

QGraphicsLineItem

詳細描述

QGraphicsLineItem 類提供了一個直線項，能夠添加到 QGraphicsScene 中。

要設置 item 的直線，能夠傳遞 QLineF 到 QGraphicsLineItem 的構造函數，或調用 setLine() 函數。line() 返回當前直線。默認狀況下，該直線爲黑色，寬度爲 0，能夠經過調用 setPen() 進行更改。
?


QGraphicsLineItem 使用直線和畫筆的寬度，爲 boundingRect()、shape() 和 contains() 提供了一個合理的實現。paint() 函數使用 item 關聯的畫筆繪製直線。

示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<code>// 定義一個 item QGraphicsLineItem *pItem = new QGraphicsLineItem();   // 設置畫筆 QPen pen = pItem->pen(); pen.setColor(QColor(0, 160, 230)); pen.setWidth(5); pItem->setPen(pen);   // 設置直線位於 (x1, y1) 和 (x2, y2)之間 pItem->setLine(QLineF(0, 0, 100, 100));   // 將 item 添加至場景中 QGraphicsScene *pScene = new QGraphicsScene(); pScene->addItem(pItem);   // 爲視圖設置場景 QGraphicsView *pView = new QGraphicsView(); pView->setScene(pScene); pView->setStyleSheet("border:none; background:transparent;");   pView->show();</code>

要將 QGraphicsLineItem 添加至場景中，有兩種方式：

構造 QGraphicsLineItem，而後經過 QGraphicsScene::addItem() 添加。使用 QGraphicsScene::addLine() 建立並添加一個 QGraphicsLineItem，並返回 item 的指針。

QGraphicsPixmapItem

詳細描述

QGraphicsPixmapItem 類提供了一個圖像項，能夠添加到 QGraphicsScene 中。

要設置 item 的圖像，能夠傳遞 QPixmap 到 QGraphicsPixmapItem 的構造函數，或調用 setPixmap() 函數，pixmap() 返回當前的圖像。

QGraphicsPixmapItem 使用 pixmap 的可選 alpha 掩碼，爲 boundingRect()、shape() 和 contains() 提供了一個合理的實現。


?
圖像在 item 的 (0, 0) 座標處繪製，由 offset() 返回。能夠經過調用 setOffset() 更改繪圖偏移量。

能夠經過調用 setTransformationMode() 設置圖像的變換模式，默認狀況下，使用 Qt::FastTransformation，它提供了快速、不平滑的縮放。Qt::SmoothTransformation 在 painter 上啓用 QPainter::SmoothPixmapTransform，質量取決於平臺和視口。結果一般不如調用 QPixmap::scale() 直接，調用 transformMode() 獲取項目的當前轉換模式。

示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<code>// 定義一個 item QGraphicsPixmapItem *pItem = new QGraphicsPixmapItem();   QPixmap image(":/Images/logo"); pItem->setPixmap(image.scaled(50, 50));   // 將 item 添加至場景中 QGraphicsScene *pScene = new QGraphicsScene(); pScene->addItem(pItem);   // 爲視圖設置場景 QGraphicsView *pView = new QGraphicsView(); pView->setScene(pScene); pView->setStyleSheet("border:none; background:transparent;");   pView->show();</code>

要將 QGraphicsPixmapItem 添加至場景中，有兩種方式：

構造 QGraphicsPixmapItem，而後經過 QGraphicsScene::addItem() 添加。使用 QGraphicsScene::addPixmap() 建立並添加一個 QGraphicsPixmapItem，並返回 item 的指針。

QGraphicsRectItem

詳細說明

QGraphicsRectItem 類提供了一個矩形項，能夠添加到 QGraphicsScene 中。

要設置 item 的矩形，能夠傳遞一個 QRectF 到 QGraphicsRectItem 的構造函數，或調用 setRect() 函數。rect() 返回當前矩形。


?
QGraphicsRectItem 使用矩形和畫筆寬度，爲 boundingRect()、shape() 和 contains() 提供了一個合理的實現。paint() 函數使用 item 關聯的畫筆和畫刷繪製矩形，能夠經過調用 setPen() 和 setBrush() 函數來設置。

注意：無效矩形（例如，寬度或高度爲負）的呈現是未定義的。若是不能肯定使用的是有效的矩形（例如，若是使用來自不可靠源的數據建立的矩形），那麼應該使用 QRectF::normalized() 建立標準化的矩形，而後使用它們。

示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<code>// 定義一個 item QGraphicsRectItem  *pItem = new QGraphicsRectItem();   // 設置畫筆、畫刷 QPen pen = pItem->pen(); pen.setWidth(5); pen.setColor(Qt::white); pItem->setPen(pen); pItem->setBrush(QBrush(QColor(0, 160, 230)));   // 矩形區域 起點：(50, 50) 寬：100 高：100 pItem->setRect(QRectF(50, 50, 100, 100));   // 將 item 添加至場景中 QGraphicsScene *pScene = new QGraphicsScene(); pScene->addItem(pItem);   // 爲視圖設置場景 QGraphicsView *pView = new QGraphicsView(); pView->setScene(pScene); pView->setStyleSheet("border:none; background:transparent;");   pView->show();</code>

要將 QGraphicsRectItem 添加至場景中，有兩種方式：

構造 QGraphicsRectItem，而後經過 QGraphicsScene::addItem() 添加。使用 QGraphicsScene::addRect() 建立並添加一個 QGraphicsRectItem，並返回 item 的指針。

QGraphicsEllipseItem

詳細說明

QGraphicsEllipseItem 類提供了一個橢圓項，能夠添加到 QGraphicsScene 中。

QGraphicsEllipseItem 表示一個帶有填充和輪廓的橢圓，也可使用它的橢圓段（見 startAngle()、spanAngle()）。

?

要設置 item 的橢圓，能夠傳遞一個 QRectF 到 QGraphicsEllipseItem 的構造函數，或調用 setRect()。rect() 返回當前橢圓的幾何形狀。

QGraphicsEllipseItem 使用 rect 和畫筆寬度，爲 boundingRect()、shape() 和 contains() 提供了一個合理的實現。paint() 函數使用 item 關聯的畫筆和畫刷來繪製橢圓，能夠經過調用 setPen() 和 setBrush() 來設置。

示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<code>// 定義一個 item QGraphicsEllipseItem *pItem = new QGraphicsEllipseItem ();   // 設置畫筆、畫刷 QPen pen = pItem->pen(); pen.setWidth(5); pen.setColor(Qt::white); pItem->setPen(pen); pItem->setBrush(QBrush(QColor(0, 160, 230)));   // 矩形區域 起點：(50, 50) 寬：200 高：100 pItem->setRect(QRectF(50, 50, 200, 100)); pItem->setStartAngle(16 * 90);  // 起始角度 pItem->setSpanAngle(16 * 270);  // 跨角 // 默認狀況下，角度爲 5760（360 * 16，一個完整的橢圓）。   // 將 item 添加至場景中 QGraphicsScene *pScene = new QGraphicsScene(); pScene->addItem(pItem);   // 爲視圖設置場景 QGraphicsView *pView = new QGraphicsView(); pView->setScene(pScene); pView->setStyleSheet("border:none; background:transparent;");   pView->show();</code>

要將 QGraphicsEllipseItem 添加至場景中，有兩種方式：

構造 QGraphicsEllipseItem，而後經過 QGraphicsScene::addItem() 添加。使用 QGraphicsScene::addEllipse() 建立並添加一個 QGraphicsEllipseItem，並返回 item 的指針。

QGraphicsPathItem

詳細描述

QGraphicsPathItem 類提供了一個路徑項，能夠添加到 QGraphicsScene 中。

要設置 item 的路徑，能夠傳遞 QPainterPath 到 QGraphicsPathItem 的構造函數，或調用 setPath() 函數，path() 返回當前路徑。

QGraphicsPathItem 使用路徑，爲 boundingRect()、shape() 和 contains() 提供了一個合理的實現。paint() 函數使用 item 關聯的畫筆和畫刷來繪製路徑，能夠經過調用 setPen() 和 setBrush() 函數來設置。

示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<code>const float Pi = 3.14159f;   // 定義一個 item QGraphicsPathItem *pItem = new QGraphicsPathItem();   // 繪製星星 QPainterPath starPath; starPath.moveTo(90, 50); for (int i = 1; i < 5; ++i) {     starPath.lineTo(50 + 40 * std::cos(0.8 * i * Pi), 50 + 40 * std::sin(0.8 * i * Pi)); } starPath.closeSubpath(); pItem->setPath(starPath);   // 設置畫筆、畫刷 QPen pen = pItem->pen(); pen.setWidth(2); pen.setColor(Qt::white); pItem->setPen(pen); pItem->setBrush(QBrush(QColor(0, 160, 230)));   // 將 item 添加至場景中 QGraphicsScene *pScene = new QGraphicsScene(); pScene->addItem(pItem);   // 爲視圖設置場景 QGraphicsView *pView = new QGraphicsView(); pView->setScene(pScene); pView->setStyleSheet("border:none; background:transparent;");   pView->show();</code>

要將 QGraphicsPathItem 添加至場景中，有兩種方式：

構造 QGraphicsPathItem，而後經過 QGraphicsScene::addItem() 添加。使用 QGraphicsScene::addPath() 建立並添加一個 QGraphicsPathItem，並返回 item 的指針。

QGraphicsPolygonItem

詳細描述

QGraphicsPolygonItem 類提供了一個多邊形項，能夠添加到 QGraphicsScene 中。

要設置 item 的多邊形，傳遞 QPolygonF 到 QGraphicsPolygonItem 的構造函數，或調用 setPolygon() 函數。polygon() 返回當前的多邊形。

QGraphicsPolygonItem 使用多邊形和畫筆寬度，爲 boundingRect()、shape() 和 contains() 提供了一個合理的實現。paint() 函數使用 item 關聯的畫筆和畫刷繪製多邊形，能夠經過調用 setPen() 和 setBrush() 函數進行設置。

示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<code>// 定義一個 item QGraphicsPolygonItem *pItem = new QGraphicsPolygonItem();   // 繪製多邊形 QPolygonF polygon; polygon << QPointF(200.0, 120.0) << QPointF(230.0, 130.0)         << QPointF(260.0, 180.0) << QPointF(200.0, 200.0); pItem->setPolygon(polygon);   // 設置畫筆、畫刷 QPen pen = pItem->pen(); pen.setWidth(2); pen.setColor(Qt::white); pItem->setPen(pen); pItem->setBrush(QBrush(QColor(0, 160, 230)));   // 將 item 添加至場景中 QGraphicsScene *pScene = new QGraphicsScene(); pScene->addItem(pItem);   // 爲視圖設置場景 QGraphicsView *pView = new QGraphicsView(); pView->setScene(pScene); pView->setStyleSheet("border:none; background:transparent;");   pView->show();</code>

要將 QGraphicsPolygonItem 添加至場景中，有兩種方式：

構造 QGraphicsPolygonItem，而後經過 QGraphicsScene::addItem() 添加。使用 QGraphicsScene::addPolygon() 建立並添加一個 QGraphicsPolygonItem，並返回 item 的指針。