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 的指针。