一、简述

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

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

二、常见的 QGraphicsItem

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

  • QGraphicsSimpleTextItem：提供了一个简单的文本标签项
  • QGraphicsTextItem：提供了一个格式化的文本项
  • QGraphicsLineItem：提供了一个直线项
  • QGraphicsPixmapItem：提供了一个图像项
  • QGraphicsRectItem：提供了一个矩形项
  • QGraphicsEllipseItem：提供了一个椭圆项
  • QGraphicsPathItem：提供了一个路径项
  • QGraphicsPolygonItem：提供了一个多边形项

    三、QGraphicsSimpleTextItem

    3.1 详细描述

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

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

QGraphicsSimpleTextItem 可以具有填充和轮廓，setBrush() 用于设置文本填充（即文本色），setPen() 用于设置绘制文本轮廓的画笔（后者可能很慢，特别是对于复杂的画笔，以及具有长文本内容的 item）。

如果只想绘制一行简单的文本，只需要调用 setBrush()，不需要设置画笔。QGraphicsSimpleTextItem 的画笔默认是Qt::NoPen。

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

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

QGraphicsSimpleTextItem-1.png

3.2 示例

image.png

  1. #include <QFont>
  2. #include <QGraphicsScene>
  3. #include <QGraphicsSimpleTextItem>
  4. #include <QGraphicsView>
  5. #include <QLayout>
  6. #include <QString>
  8. Widget::Widget(QWidget* parent)
  9.     : QWidget(parent)
  10.     , ui(new Ui::Widget)
  11. {
  12.     ui->setupUi(this);
  13.     QGraphicsSimpleTextItem* pItem = new QGraphicsSimpleTextItem();
  14.     pItem->setText(tr("this is a example"));
  16.     // 字体
  17.     QFont font = pItem->font();
  18.     font.setPixelSize(20); //像素大小
  19.     font.setItalic(true); // 斜体
  21.     // 设置item的字体和颜色
  22.     pItem->setFont(font);
  23.     pItem->setBrush(QBrush(QColor(0, 160, 230)));
  25.     // 将Item添加到场景中
  26.     QGraphicsScene* pScene = new QGraphicsScene();
  27.     pScene->addItem(pItem);
  29.     // 为视图设置场景
  30.     QGraphicsView* pView = new QGraphicsView();
  31.     pView->setScene(pScene);
  32.     pView->setStyleSheet("border:none; background:skyblue");
  33.     QVBoxLayout* layout = new QVBoxLayout(this);
  34.     layout->addWidget(pView);
  35. }

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

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

四、QGraphicsTextItem

4.1 详细描述

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

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

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

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

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

注意：为了在中心对齐 HTML 文本，必须设置 item 的文本宽度。否则，可以在设置 item 的文本后调用 adjustSize()。
QGraphicsTextItem.png
注意：QGraphicsTextItem 默认接受 hover 事件，可以使用 setAcceptHoverEvents() 更改此值。

4.2 示例

image.png

  1. #include <QFont>
  2. #include <QGraphicsScene>
  3. #include <QGraphicsTextItem>
  4. #include <QGraphicsView>
  5. #include <QLayout>
  6. #include <QString>
  8. Widget::Widget(QWidget* parent)
  9.     : QWidget(parent)
  10.     , ui(new Ui::Widget)
  11. {
  12.     ui->setupUi(this);
  13.     QGraphicsTextItem* pItem = new QGraphicsTextItem();
  14.     pItem->setPlainText(tr("this is a example"));
  16.     // 字体
  17.     QFont font = pItem->font();
  18.     font.setPixelSize(20); //像素大小
  19.     font.setItalic(true); // 斜体
  20.     font.setUnderline(true); // 下划线
  22.     // 设置item的字体
  23.     pItem->setFont(font);
  25.     // 将Item添加到场景中
  26.     QGraphicsScene* pScene = new QGraphicsScene();
  27.     pScene->addItem(pItem);
  29.     // 为视图设置场景
  30.     QGraphicsView* pView = new QGraphicsView();
  31.     pView->setScene(pScene);
  32.     pView->setStyleSheet("border:none; background:skyblue");
  33.     QVBoxLayout* layout = new QVBoxLayout(this);
  34.     layout->addWidget(pView);
  35. }

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

  • 构造QGraphicsSimpleTextItem，然后通过QGraphicsScene::addItem()添加
  • 使用QGraphicsScene::addText()创建并添加一个QGraphicsTextItem，并返回 item 的指针

    4.3 富文本

    暂略

    4.3 超链接

    暂略

    4.3 编辑

    暂略

    五、QGraphicsLineItem

    5.1 详细描述

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


要设置 item 的直线，可以传递 QLineF 到 QGraphicsLineItem 的构造函数，或调用 setLine() 函数。line() 返回当前直线。默认情况下，该直线为黑色，宽度为 0，可以通过调用 setPen() 进行更改。
QGraphicsLineItem.png
QGraphicsLineItem 使用直线和画笔的宽度，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。paint() 函数使用 item 关联的画笔绘制直线。

5.2 示例

  1. #include <QGraphicsLineItem>
  2. #include <QGraphicsScene>
  3. #include <QGraphicsView>
  4. #include <QLayout>
  5. #include <QPen>
  6. #include <QString>
  8. Widget::Widget(QWidget* parent)
  9.     : QWidget(parent)
  10.     , ui(new Ui::Widget)
  11. {
  12.     ui->setupUi(this);
  13.     QGraphicsLineItem* pItem = new QGraphicsLineItem();
  15.     // 设置画笔
  16.     QPen pen = pItem->pen();
  17.     pen.setColor(QColor(0, 160, 230));
  18.     pen.setWidth(3);
  20.     // 设置item的字体
  21.     pItem->setPen(pen);
  23.     // 设置直线位于(x1, y1)和(x2, y2)之间
  24.     pItem->setLine(QLineF(0, 0, 100, 100));
  26.     // 将Item添加到场景中
  27.     QGraphicsScene* pScene = new QGraphicsScene();
  28.     pScene->addItem(pItem);
  30.     // 为视图设置场景
  31.     QGraphicsView* pView = new QGraphicsView();
  32.     pView->setScene(pScene);
  33.     pView->setStyleSheet("border:none; background:skyblue");
  35.     QVBoxLayout* layout = new QVBoxLayout(this);
  36.     layout->addWidget(pView);
  37. }

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

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

    六、QGraphicsPixmapItem

    6.1 详细描述

    QGraphicsPixmapItem 类提供了一个图像项，可以添加到 QGraphicsScene 中。

要设置 item 的图像，可以传递 QPixmap 到 QGraphicsPixmapItem 的构造函数，或调用 setPixmap() 函数，pixmap() 返回当前的图像。

QGraphicsPixmapItem 使用 pixmap 的可选 alpha 掩码，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。
QGraphicsPixmapItem.png
图像在 item 的 (0, 0) 坐标处绘制，由 offset() 返回。可以通过调用 setOffset() 更改绘图偏移量。


可以通过调用 setTransformationMode() 设置图像的变换模式，默认情况下，使用 Qt::FastTransformation，它提供了快速、不平滑的缩放。Qt::SmoothTransformation 在 painter 上启用 QPainter::SmoothPixmapTransform，质量取决于平台和视口。结果通常不如调用 QPixmap::scale() 直接，调用 transformMode() 获取项目的当前转换模式。

6.2 示例

image.png

  1. #include <QGraphicsPixmapItem>
  2. #include <QGraphicsScene>
  3. #include <QGraphicsView>
  4. #include <QLayout>
  5. #include <QPen>
  6. #include <QString>
  8. Widget::Widget(QWidget* parent)
  9.     : QWidget(parent)
  10.     , ui(new Ui::Widget)
  11. {
  12.     ui->setupUi(this);
  13.     QGraphicsPixmapItem* pItem = new QGraphicsPixmapItem();
  15.     QPixmap image("F:\\0.图片壁纸\\4k\\9_cage4_8k.jpg");
  17.     pItem->setPixmap(image.scaled(600, 400));
  18.     pItem->setTransformationMode(Qt::FastTransformation);
  19.     // 将Item添加到场景中
  20.     QGraphicsScene* pScene = new QGraphicsScene();
  21.     pScene->addItem(pItem);
  23.     // 为视图设置场景
  24.     QGraphicsView* pView = new QGraphicsView();
  25.     pView->setScene(pScene);
  26.     // pView->setStyleSheet("border:none; background:skyblue");
  28.     QVBoxLayout* layout = new QVBoxLayout(this);
  29.     layout->addWidget(pView);
  30. }

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

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

    七、QGraphicsRectItem

    7.1 详细说明

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

    要设置 item 的矩形，可以传递一个 QRectF 到 QGraphicsRectItem 的构造函数，或调用 setRect() 函数。rect() 返回当前矩形。
    QGraphicsRectItem.png
    QGraphicsRectItem 使用矩形和画笔宽度，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。paint() 函数使用 item 关联的画笔和画刷绘制矩形，可以通过调用 setPen() 和 setBrush() 函数来设置。


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

7.2 示例

image.png

  1. #include <QGraphicsRectItem>
  2. #include <QGraphicsScene>
  3. #include <QGraphicsView>
  4. #include <QLayout>
  5. #include <QPen>
  6. #include <QString>
  8. Widget::Widget(QWidget* parent)
  9.     : QWidget(parent)
  10.     , ui(new Ui::Widget)
  11. {
  12.     ui->setupUi(this);
  13.     QGraphicsRectItem* pItem = new QGraphicsRectItem();
  15.     // 设置画笔、画刷
  16.     QPen pen = pItem->pen();
  17.     pen.setWidth(5);
  18.     pen.setColor(Qt::white);
  19.     pItem->setPen(pen);
  20.     pItem->setBrush(QBrush(QColor(0, 160, 230)));
  22.     // 矩形区域 起点:(100,100) 宽高 200
  23.     pItem->setRect(QRectF(100, 100, 200, 200));
  25.     // 将Item添加到场景中
  26.     QGraphicsScene* pScene = new QGraphicsScene();
  27.     pScene->addItem(pItem);
  29.     // 为视图设置场景
  30.     QGraphicsView* pView = new QGraphicsView();
  31.     pView->setScene(pScene);
  32.     pView->setStyleSheet("border:none; background:skyblue");
  34.     QVBoxLayout* layout = new QVBoxLayout(this);
  35.     layout->addWidget(pView);
  36. }

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

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

    八、QGraphicsEllipseItem

    8.1 详细说明

QGraphicsEllipseItem 类提供了一个椭圆项，可以添加到 QGraphicsScene 中。

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

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


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

8.2 示例

image.png

  1. #include <QGraphicsEllipseItem>
  2. #include <QGraphicsScene>
  3. #include <QGraphicsView>
  4. #include <QLayout>
  5. #include <QPen>
  6. #include <QString>
  8. Widget::Widget(QWidget* parent)
  9.     : QWidget(parent)
  10.     , ui(new Ui::Widget)
  11. {
  12.     ui->setupUi(this);
  13.     QGraphicsEllipseItem* pItem = new QGraphicsEllipseItem();
  15.     // 设置画笔、画刷
  16.     QPen pen = pItem->pen();
  17.     pen.setWidth(5);
  18.     pen.setColor(Qt::white);
  19.     pItem->setPen(pen);
  20.     pItem->setBrush(QBrush(QColor(0, 160, 230)));
  22.     // 矩形区域 起点:(100,100) 宽400,高200
  23.     pItem->setRect(QRectF(100, 100, 400, 200));
  24.     pItem->setStartAngle(16 * 90); // 起始角度
  25.     pItem->setSpanAngle(16 * 270); // 跨角
  26.     // 默认情况下, 角度为5760(360*16 一个完整的椭圆)
  28.     // 将Item添加到场景中
  29.     QGraphicsScene* pScene = new QGraphicsScene();
  30.     pScene->addItem(pItem);
  32.     // 为视图设置场景
  33.     QGraphicsView* pView = new QGraphicsView();
  34.     pView->setScene(pScene);
  35.     pView->setStyleSheet("border:none; background:skyblue");
  37.     QVBoxLayout* layout = new QVBoxLayout(this);
  38.     layout->addWidget(pView);
  39. }

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

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

    九、QGraphicsPathItem

    9.1 详细描述

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

    要设置 item 的路径，可以传递 QPainterPath 到 QGraphicsPathItem 的构造函数，或调用 setPath() 函数，path() 返回当前路径。
    QGraphicsPathItem.png
    QGraphicsPathItem 使用路径，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。paint() 函数使用 item 关联的画笔和画刷来绘制路径，可以通过调用 setPen() 和 setBrush() 函数来设置。

    9.2 示例

    image.png ```cpp

    include

    include

    include

    include

    include

    include

Widget::Widget(QWidget* parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); const float PI = 3.14159f;

  1. QGraphicsPathItem* pItem = new QGraphicsPathItem();
  3. // 绘制星星
  4. QPainterPath starPath;
  5. starPath.moveTo(90, 50);
  6. for (int i = 0; i < 5; i++) {
  7.     starPath.lineTo(50 + 40 * std::cos(0.8 * i * PI), 50 + 40 * std::sin(0.8 * i * PI));
  8. }
  9. starPath.closeSubpath();
  10. pItem->setPath(starPath);
  12. // 设置画笔、画刷
  13. QPen pen = pItem->pen();
  14. pen.setWidth(2);
  15. pen.setColor(Qt::white);
  16. pItem->setPen(pen);
  17. pItem->setBrush(QBrush(QColor(0, 160, 230)));
  19. // 将Item添加到场景中
  20. QGraphicsScene* pScene = new QGraphicsScene();
  21. pScene->addItem(pItem);
  23. // 为视图设置场景
  24. QGraphicsView* pView = new QGraphicsView();
  25. pView->setScene(pScene);
  26. pView->setStyleSheet("border:none; background:skyblue");
  28. QVBoxLayout* layout = new QVBoxLayout(this);
  29. layout->addWidget(pView);

}

  1. 要将`QGraphicsPathItem`添加至场景中，有两种方式：
  3. - 构造`QGraphicsPathItem`，然后通过`QGraphicsScene::addItem()`添加
  4. - 使用`QGraphicsScene::addEllipse()`创建并添加一个`QGraphicsPathItem`，并返回 item 的指针
  5. <a name="vGAdD"></a>
  6. # 十、QGraphicsPolygonItem
  7. <a name="COluD"></a>
  8. ## 10.1 详细描述
  9. QGraphicsPolygonItem 类提供了一个多边形项，可以添加到 QGraphicsScene 中。
  10. <br />
  11. <br />要设置 item 的多边形，传递 QPolygonF 到 QGraphicsPolygonItem 的构造函数，或调用 setPolygon() 函数。polygon() 返回当前的多边形。<br />![QGraphicsPolygonItem.png](https://cdn.nlark.com/yuque/0/2021/png/2878535/1619198893544-0164429a-e35e-4b3f-b9f7-506cd85cc511.png#clientId=uc100d8ee-7abd-4&from=drop&id=u4b117999&margin=%5Bobject%20Object%5D&name=QGraphicsPolygonItem.png&originHeight=177&originWidth=182&originalType=binary&size=7186&status=done&style=none&taskId=u162c2fbd-d6ba-436e-87e6-cf697ac7a9a)<br />QGraphicsPolygonItem 使用多边形和画笔宽度，为 boundingRect()、shape() 和 contains() 提供了一个合理的实现。paint() 函数使用 item 关联的画笔和画刷绘制多边形，可以通过调用 setPen() 和 setBrush() 函数进行设置。
  12. <a name="rkNEn"></a>
  13. ## 10.2 示例
  14. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/2878535/1619199162726-b144454d-31bc-4d11-9462-062cf6048f6c.png#clientId=uc100d8ee-7abd-4&from=paste&height=634&id=ud9785f83&margin=%5Bobject%20Object%5D&name=image.png&originHeight=634&originWidth=804&originalType=binary&size=18151&status=done&style=none&taskId=u6217198d-f0ee-4e07-9733-8849ab51844&width=804)
  15. ```cpp
  16. #include <QGraphicsPolygonItem>
  17. #include <QGraphicsScene>
  18. #include <QGraphicsView>
  19. #include <QLayout>
  20. #include <QPen>
  21. #include <QString>
  23. Widget::Widget(QWidget* parent)
  24.     : QWidget(parent)
  25.     , ui(new Ui::Widget)
  26. {
  27.     ui->setupUi(this);
  29.     QGraphicsPolygonItem* pItem = new QGraphicsPolygonItem();
  31.     // 绘制多边形
  32.     QPolygonF polygon;
  33.     polygon << QPointF(200.0, 120.0) << QPointF(230.0, 130.0)
  34.             << QPointF(260.0, 180.0) << QPointF(200.0, 200.0);
  35.     pItem->setPolygon(polygon);
  37.     // 设置画笔、画刷
  38.     QPen pen = pItem->pen();
  39.     pen.setWidth(2);
  40.     pen.setColor(Qt::white);
  41.     pItem->setPen(pen);
  42.     pItem->setBrush(QBrush(QColor(0, 160, 230)));
  44.     // 将Item添加到场景中
  45.     QGraphicsScene* pScene = new QGraphicsScene();
  46.     pScene->addItem(pItem);
  48.     // 为视图设置场景
  49.     QGraphicsView* pView = new QGraphicsView();
  50.     pView->setScene(pScene);
  51.     pView->setStyleSheet("border:none; background:skyblue");
  53.     QVBoxLayout* layout = new QVBoxLayout(this);
  54.     layout->addWidget(pView);
  55. }

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

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

参考链接 https://waleon.blog.csdn.net/article/details/53065293 https://www.cnblogs.com/aiguona/p/10002255.html