简述

QGraphicsItem 类是 QGraphicsScene 中所有 item（图元）的基类。

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

常见图元

为方便起见，Qt 为最常见的形状提供了一组标准图元。它们是：

QGraphicsSimpleTextItem：提供了一个简单的文本标签项
QGraphicsTextItem：提供了一个高级文本浏览器项
QGraphicsLineItem：提供了一个直线项
QGraphicsPixmapItem：提供了一个图像项
QGraphicsRectItem：提供了一个矩形项
QGraphicsEllipseItem：提供了一个椭圆项
QGraphicsPathItem：提供了一个路径项
QGraphicsPolygonItem：提供了一个多边形项

QGraphicsSimpleTextItem

详细描述

QGraphicsSimpleTextItem 提供了一个简单的文本标签项，可以添加到 QGraphicsScene 中。

要设置 item 的文本，可以传递 QString 到 QGraphicsSimpleTextItem 的构造函数，或在之后调用 setText() 来更改文本。要设置文本填充色，调用 setBrush()。

简单文本项可以包含填充和轮廓，setBrush() 用于设置文本填充（即，文本色），setPen() 用于设置绘制文本轮廓的画笔，（后者可能很慢，特别是对于复杂的画笔以及具有长文本内容的 item）。如果只想绘制一行简单的文本，只需要调用 setBrush()，不需要设置画笔，QGraphicsSimpleTextItem 的画笔默认是 Qt::NoPen。

QGraphicsSimpleTextItem 使用文本的格式化大小和相关联的字体，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。可以通过调用 setFont() 设置字体。

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

这里写图片描述

示例

这里写图片描述

// 定义一个简单的文本项
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)));

// 将简单的文本项添加至场景中
QGraphicsScene *pScene = new QGraphicsScene();
pScene->addItem(pItem);

// 为视图设置场景
QGraphicsView *pView = new QGraphicsView();
pView->setScene(pScene);
pView->setStyleSheet("border:none; background:transparent;");

pView->show();

除了使用 QGraphicsScene 的 addItem() 添加图元之外，还可以使用更简单 addSimpleText() 函数，该函数会返回一个 QGraphicsSimpleTextItem。

QGraphicsTextItem

详细描述

QGraphicsTextItem 类提供了一个格式化的文本项，可以添加到 QGraphicsScene 中。

要设置 item 的文本，可以传递 QString 到 QGraphicsTextItem 的构造函数，或调用 setHtml()/setPlainText()。

QGraphicsTextItem 使用文本的格式化大小和相关联的字体，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。可以通过调用 setFont() 设置字体。

可以通过使用 setTextInteractionFlags() 设置 Qt::TextEditorInteraction 标志来使图元可编辑。

图元的首选文本宽度可以使用 setTextWidth() 设置，并使用 textWidth() 获取。

注意：为了在中心对齐 HTML 文本，必须设置项目的文本宽度。否则，可以在设置项目的文本后调用 adjustSize()。

这里写图片描述

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

纯文本

这里写图片描述

首先，通过调用 QGraphicsTextItem 的构造函数创建一个文本项（也可使用 QGraphicsScene 的 addText() 函数创建，并将文本项添加至场景中）。要设置项目的文本，传递 QString 至 QGraphicsTextItem 的构造函数，或调用 setPlainText()。

setDefaultTextColor() 如果要设置文本项的字体，通过调用 setFont() 设置。

// 定义一个文本项
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);

// 将文本项添加至场景中
QGraphicsScene *pScene = new QGraphicsScene();
pScene->addItem(pItem);

// 为视图设置场景
QGraphicsView *pView = new QGraphicsView();
pView->setScene(pScene);
pView->setStyleSheet("border:none; background:transparent;");

pView->show();

富文本

假设文本是 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 中。

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

这里写图片描述

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

示例

这里写图片描述

// 定义一个直线项
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));

// 将文本项添加至场景中
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 中。

要设置 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();

QGraphicsRectItem

详细说明

QGraphicsRectItem 类提供了一个矩形项，可以添加到 QGraphicsScene 中。

要设置 item 的矩形，可以传递一个 QRectF 到 QGraphicsRectItem 的构造函数，或调用 setRect() 函数。rect() 返回当前矩形。

这里写图片描述

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

注意：无效矩形（例如，宽度或高度为负）的呈现是未定义的。如果不能确定使用的是有效的矩形（例如，如果使用来自不可靠源的数据创建的矩形），那么应该使用 QRectF::normalized() 创建标准化的矩形，然后使用它们。

示例

这里写图片描述

// 定义一个矩形项
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));

// 将矩形项添加至场景中
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 中。

QGraphicsEllipseItem 表示一个椭圆的填充和轮廓，也可以使用它的椭圆段（见 startAngle()、spanAngle()）。

这里写图片描述

要设置 item 的椭圆，可以传递一个 QRectF 到 QGraphicsEllipseItem 的构造函数，或调用 setRect()。rect() 返回当前椭圆的几何形状。

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

示例

这里写图片描述

// 定义一个椭圆项
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，一个完整的椭圆）。

// 将椭圆项添加至场景中
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 中。

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

这里写图片描述

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

示例

这里写图片描述

const float Pi = 3.14159f;

// 定义一个路径项
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)));

// 将路径项添加至场景中
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 中。

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

这里写图片描述

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

示例

这里写图片描述

// 定义一个多边形项
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)));

// 将多边形项添加至场景中
QGraphicsScene *pScene = new QGraphicsScene();
pScene->addItem(pItem);

// 为视图设置场景
QGraphicsView *pView = new QGraphicsView();
pView->setScene(pScene);
pView->setStyleSheet("border:none; background:transparent;");

pView->show();

作者：u011012932 发表于2016/11/7 19:47:51 原文链接

阅读：54 评论：0 查看评论

简述

常见图元

QGraphicsSimpleTextItem

详细描述

示例

QGraphicsTextItem

详细描述

纯文本

富文本

超链接

编辑

QGraphicsLineItem

详细描述

示例

QGraphicsPixmapItem

详细描述

示例

QGraphicsRectItem

详细说明

示例

QGraphicsEllipseItem

详细说明

示例

QGraphicsPathItem

详细描述

示例

QGraphicsPolygonItem

详细描述

示例

Trending Articles