简述

QGraphicsItem 类是 QGraphicsScene 中所有 item 的基类。

它提供了一个轻量级的基础，用于编写自定义 item。其中包括：定义 item 的几何形状、碰撞检测、绘制实现、以及通过其事件处理程序进行 item 的交互，QGraphicsItem 是 Qt之图形视图框架的一部分。

常见的 QGraphicsItem

为方便起见，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，它提供全文控制功能。

这里写图片描述

示例

这里写图片描述

// 定义一个 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()。

这里写图片描述

注意： QGraphicsTextItem 默认接受 hover 事件，可以使用 setAcceptHoverEvents() 更改此值。

纯文本

这里写图片描述

// 定义一个 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 格式，显示不同颜色的文本以及图片。

这里写图片描述

QString strHTML = QString("<html> \
                               <head> \
                               <style> \
                               font{color:white;} #f{font-size:18px; color: #00A0E6;} \
                               </style> \
                               </head> \
                               <body>\
                               <font>%1</font><font id=\"f\">%2</font> \
                               <br/><br/> \
                               <img src=\":/Images/logo\" width=\"100\" height=\"100\"> \
                               </body> \
                               </html>").arg("I am a ").arg("Qter");
pItem->setHtml(strHTML);

超链接

我们需要使用标签 <a></a>写一段简单的 HTML 超链接代码

方式一：

比较简单，直接调用 setOpenExternalLinks(true) 即可。

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

方式二：

连接 linkActivated() 信号，然后调用 QDesktopServices 的 openUrl() 打开链接：

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

注意：这两种方式都需要调用 setTextInteractionFlags(Qt::TextBrowserInteraction)，指定交互方式为文本浏览器交互。

编辑

通过使用 setTextInteractionFlags() 设置 Qt::TextEditorInteraction 标志来使项目可编辑。

这里写图片描述

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

输出如下：

“Q”
“Qt”
“Qte”
“Qter”

QGraphicsLineItem

详细描述

QGraphicsLineItem 类提供了一个直线项，可以添加到 QGraphicsScene 中。

要设置 item 的直线，可以传递 QLineF 到 QGraphicsLineItem 的构造函数，或调用 setLine() 函数。line() 返回当前直线。默认情况下，该直线为黑色，宽度为 0，可以通过调用 setPen() 进行更改。

这里写图片描述

QGraphicsLineItem 使用直线和画笔的宽度，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。paint() 函数使用 item 关联的画笔绘制直线。

示例

这里写图片描述

// 定义一个 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();

要将 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() 获取项目的当前转换模式。

示例

这里写图片描述

// 定义一个 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();

要将 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() 创建标准化的矩形，然后使用它们。

示例

这里写图片描述

// 定义一个 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();

要将 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() 来设置。

示例

这里写图片描述

// 定义一个 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();

要将 QGraphicsEllipseItem 添加至场景中，有两种方式：

构造 QGraphicsEllipseItem，然后通过 QGraphicsScene::addItem() 添加。
使用 QGraphicsScene::addEllipse() 创建并添加一个 QGraphicsEllipseItem，并返回 item 的指针。

QGraphicsPathItem

详细描述

QGraphicsPathItem 类提供了一个路径项，可以添加到 QGraphicsScene 中。

要设置 item 的路径，可以传递 QPainterPath 到 QGraphicsPathItem 的构造函数，或调用 setPath() 函数，path() 返回当前路径。

这里写图片描述

QGraphicsPathItem 使用路径，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。paint() 函数使用 item 关联的画笔和画刷来绘制路径，可以通过调用 setPen() 和 setBrush() 函数来设置。

示例

这里写图片描述

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();

要将 QGraphicsPathItem 添加至场景中，有两种方式：

构造 QGraphicsPathItem，然后通过 QGraphicsScene::addItem() 添加。
使用 QGraphicsScene::addPath() 创建并添加一个 QGraphicsPathItem，并返回 item 的指针。

QGraphicsPolygonItem

详细描述

QGraphicsPolygonItem 类提供了一个多边形项，可以添加到 QGraphicsScene 中。

要设置 item 的多边形，传递 QPolygonF 到 QGraphicsPolygonItem 的构造函数，或调用 setPolygon() 函数。polygon() 返回当前的多边形。

这里写图片描述

QGraphicsPolygonItem 使用多边形和画笔宽度，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。paint() 函数使用 item 关联的画笔和画刷绘制多边形，可以通过调用 setPen() 和 setBrush() 函数进行设置。

示例

这里写图片描述

// 定义一个 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();

要将 QGraphicsPolygonItem 添加至场景中，有两种方式：

构造 QGraphicsPolygonItem，然后通过 QGraphicsScene::addItem() 添加。
使用 QGraphicsScene::addPolygon() 创建并添加一个 QGraphicsPolygonItem，并返回 item 的指针。

常见的QGraphicsItem

简述

常见的 QGraphicsItem

QGraphicsSimpleTextItem

详细描述

示例

QGraphicsTextItem

详细描述

纯文本

富文本

超链接

编辑

QGraphicsLineItem

详细描述

示例

QGraphicsPixmapItem

详细描述

示例

QGraphicsRectItem

详细说明

示例

QGraphicsEllipseItem

详细说明

示例

QGraphicsPathItem

详细描述

示例

QGraphicsPolygonItem

详细描述

示例

热门文章

最新文章

相关电子书