QGraphicsView、QGraphicsScene和QGraphicsItem图形视图框架（三）添加图形项的简单案例

做一个坚强的女汉子

已于 2024-09-23 11:46:48 修改

阅读量866

点赞数 17

分类专栏： QT 文章标签：前端 qt graphicsview

于 2024-09-11 11:30:27 首次发布

本文链接：https://blog.csdn.net/m0_67254672/article/details/142098236

版权

QT 专栏收录该内容

45 篇文章 10 订阅

订阅专栏

一、qt自带的图形项

QGraphicsRectItem 矩形
QGraphicsEllipseItem    椭圆
QGraphicsLineItem     线
QGraphicsPixmapItem 图片

QGraphicsPolygonItem 多边形
QGraphicsSimpleTextItem 文本

QGraphicsPathItem    路径

二、Item主要函数介绍

1.QGraphicsRectItem矩形

构造函数

QGraphicsRectItem(QGraphicsItem *parent = Q_NULLPTR)
QGraphicsRectItem(const QRectF &rect, QGraphicsItem *parent = Q_NULLPTR)
QGraphicsRectItem(qreal x, qreal y, qreal width, qreal height, QGraphicsItem *parent = Q_NULLPTR)

设置矩形

void setRect(const QRectF &rectangle)
void setRect(qreal x, qreal y, qreal width, qreal height)

2. QGraphicsEllipseItem椭圆

构造函数（在给定矩形内绘制椭圆）

QGraphicsEllipseItem(QGraphicsItem *parent = Q_NULLPTR)
QGraphicsEllipseItem(const QRectF &rect, QGraphicsItem *parent = Q_NULLPTR)
QGraphicsEllipseItem(qreal x, qreal y, qreal width, qreal height, QGraphicsItem *parent = Q_NULLPTR)

设置矩形（在给定矩形内绘制椭圆）

void setRect(const QRectF &rect)
void setRect(qreal x, qreal y, qreal width, qreal height)

还可以通过设置起始角度和旋转角度绘制椭圆的一部分

void setSpanAngle(int angle)
void setStartAngle(int angle)

3.QGraphicsLineItem线

构造函数

QGraphicsLineItem(QGraphicsItem *parent = Q_NULLPTR)
QGraphicsLineItem(const QLineF &line, QGraphicsItem *parent = Q_NULLPTR)
QGraphicsLineItem(qreal x1, qreal y1, qreal x2, qreal y2, QGraphicsItem *parent = Q_NULLPTR)

设置线

void setLine(const QLineF &line)
void setLine(qreal x1, qreal y1, qreal x2, qreal y2)

4.QGraphicsPixmapItem图片

构造函数

QGraphicsPixmapItem(QGraphicsItem *parent = Q_NULLPTR)
QGraphicsPixmapItem(const QPixmap &pixmap, QGraphicsItem *parent = Q_NULLPTR)

设置图片

void setPixmap(const QPixmap &pixmap)

设置偏移量（默认使用左上角的偏移量绘制其像素图。）

void setOffset(const QPointF &offset)
void setOffset(qreal x, qreal y)

5.QGraphicsPolygonItem多边形

构造函数

QGraphicsPolygonItem(QGraphicsItem *parent = Q_NULLPTR)
QGraphicsPolygonItem(const QPolygonF &polygon, QGraphicsItem *parent = Q_NULLPTR)

设置多边形

void setPolygon(const QPolygonF &polygon)

其中如果设置setBrush()将是一个多边形，不设置将是一个多边线。

6.QGraphicsSimpleTextItem文本

构造函数

QGraphicsSimpleTextItem(QGraphicsItem *parent = Q_NULLPTR)
QGraphicsSimpleTextItem(const QString &text, QGraphicsItem *parent = Q_NULLPTR)

设置文本内容

void setText(const QString &text)

设置文本字体

void setFont(const QFont &font)

7.QGraphicsPathItem路径

构造函数

QGraphicsPathItem(QGraphicsItem *parent = Q_NULLPTR)
QGraphicsPathItem(const QPainterPath &path, QGraphicsItem *parent = Q_NULLPTR)

设置路径

void setPath(const QPainterPath &path)

QPainterPath

QPainterPath是 Qt 框架中用于创建和操作图形路径的一个重要类。

可以添加简单的基本图形：

椭圆

void addEllipse(const QRectF &boundingRectangle)
void addEllipse(qreal x, qreal y, qreal width, qreal height)
void addEllipse(const QPointF &center, qreal rx, qreal ry)

矩形

void addRect(const QRectF &rectangle)
void addRect(qreal x, qreal y, qreal width, qreal height)

圆角矩形

void addRoundedRect(const QRectF &rect, qreal xRadius, qreal yRadius, Qt::SizeMode mode = Qt::AbsoluteSize)
void addRoundedRect(qreal x, qreal y, qreal w, qreal h, qreal xRadius, qreal yRadius, Qt::SizeMode mode = Qt::AbsoluteSize)

多边形

void addPolygon(const QPolygonF &polygon)

文本

void addText(const QPointF &point, const QFont &font, const QString &text)
void addText(qreal x, qreal y, const QFont &font, const QString &text)

区域

void addRegion(const QRegion &region)

线

//将当前点移动到给定点，隐式地开始一个子路径并关闭上一个子路径。

void moveTo(const QPointF &point)
void moveTo(qreal x, qreal y)

//添加一条从当前位置到给定端点的直线。绘制线条后，当前位置将更新为线条的终点。

void lineTo(const QPointF &endPoint)
void lineTo(qreal x, qreal y)

//使用c1和c2指定的控制点在当前位置和给定端点之间添加三次贝塞尔曲线。
//添加曲线后，当前位置将更新为曲线的终点。

void cubicTo(const QPointF &c1, const QPointF &c2, const QPointF &endPoint)
void cubicTo(qreal c1X, qreal c1Y, qreal c2X, qreal c2Y, qreal endPointX, qreal endPointY)

//在当前位置和给定端点之间添加一条二次贝塞尔曲线，控制点由c指定。
//添加曲线后，当前点将更新为曲线的终点。

void quadTo(const QPointF &c, const QPointF &endPoint)
void quadTo(qreal cx, qreal cy, qreal endPointX, qreal endPointY)

三、坐标问题

需要注意：设置图形项在场景中的位置时，设置的是图形项中的原点位置位于场景中的位置。

已添加一个矩形为例。

原点的位置

有两种常用方法：

1.以矩形的左上角作为矩形内部的原点。

    QGraphicsRectItem *rect1 = new QGraphicsRectItem(0,0,20,150);
    rect1->setBrush(Qt::transparent);
    rect1->setPen(QPen(Qt::red));
    rect1->setPos(-35,50);
    scene->addItem(rect1);

2.以矩形的中心点作为矩形内部的原点。

    QGraphicsRectItem *rect2 = new QGraphicsRectItem(-10,-75,20,150);
    rect2->setBrush(Qt::transparent);
    rect2->setPen(QPen(Qt::red));
    rect2->setPos(25,125);
    scene->addItem(rect2);

四、代码示例

1.创建视图

可在图形界面直接拖过来一个QGraphicsView视图控件，如图：

或者直接在代码中new一个QGraphicsView视图

    QGraphicsView *view = new QGraphicsView(this);
    view->setRenderHint(QPainter::Antialiasing);//设置抗锯齿
    QVBoxLayout *layout = new QVBoxLayout(this);
    layout->addWidget(view);

2.创建场景

    QGraphicsScene *scene = new QGraphicsScene;
    scene->setSceneRect(-1000,-1000,2000,2000);
    view->setScene(scene);

3.添加图形项

    //添加线
    QGraphicsLineItem *line1 = new QGraphicsLineItem(-17.68,-92.68,-27.68,-102.68);
    line1->setPen(QPen(Qt::gray));
    scene->addItem(line1);
    QGraphicsLineItem *line2 = new QGraphicsLineItem(17.68,-92.68,27.68,-102.68);
    line2->setPen(QPen(Qt::gray));
    scene->addItem(line2);
    //添加椭圆
    QGraphicsEllipseItem * ellipse = new QGraphicsEllipseItem(-25,-25,50,50);
    ellipse->setBrush(Qt::magenta);
    ellipse->setPen(Qt::NoPen);
    ellipse->setPos(0,-75);
    scene->addItem(ellipse);
    //添加图片
    QPixmap pix = QPixmap("../item_simple/1.png");
    pix = pix.scaled(100,100,Qt::KeepAspectRatio);
    QGraphicsPixmapItem *pixmap = new QGraphicsPixmapItem(pix);
    pixmap->setPos(-50,-50);
    scene->addItem(pixmap);
    //添加矩形
    QGraphicsRectItem *rect1 = new QGraphicsRectItem(0,0,20,150);
    rect1->setBrush(Qt::transparent);
    rect1->setPen(QPen(Qt::red));
    rect1->setPos(-35,50);
    scene->addItem(rect1);
    QGraphicsRectItem *rect2 = new QGraphicsRectItem(-10,-75,20,150);
    rect2->setBrush(Qt::transparent);
    rect2->setPen(QPen(Qt::red));
    rect2->setPos(25,125);
    scene->addItem(rect2);
    //添加复杂路径
    QPainterPath path_1;
    path_1.moveTo(50,0);
    path_1.quadTo(100,0,150,100);//在当前位置和给定端点之间添加一条二次贝塞尔曲线
    QGraphicsPathItem *path1 = new QGraphicsPathItem(path_1);
    path1->setPen(QPen(Qt::green));
    scene->addItem(path1);
    QPainterPath path_2;
    path_2.moveTo(-50,0);
    path_2.cubicTo(-100,0,-125,50,-150,100);//使用c1和c2指定的控制点在当前位置和给定端点之间添加三次贝塞尔曲线。
    QGraphicsPathItem *path2 = new QGraphicsPathItem(path_2);
    path2->setPen(QPen(Qt::green));
    scene->addItem(path2);
    //添加多边形
    QPolygonF poly1;
    poly1.push_back(QPointF(-25,200));
    poly1.push_back(QPointF(-5,220));
    poly1.push_back(QPointF(-45,220));
    QGraphicsPolygonItem *polygon1 = new QGraphicsPolygonItem(poly1);
    polygon1->setBrush(Qt::blue);
    polygon1->setPen(QPen(Qt::blue));
    scene->addItem(polygon1);
    QPolygonF poly2;
    poly2.push_back(QPointF(25,200));
    poly2.push_back(QPointF(5,220));
    poly2.push_back(QPointF(45,220));
    QGraphicsPolygonItem *polygon2 = new QGraphicsPolygonItem(poly2);
    polygon2->setPen(QPen(Qt::blue,2));
    scene->addItem(polygon2);
    //添加文本
    QGraphicsSimpleTextItem *text = new QGraphicsSimpleTextItem("你好！");
    QFont font;
    font.setPointSize(20);
    text->setFont(font);
    text->setPen(QPen(Qt::darkMagenta));
    text->setPos(200,100);
    scene->addItem(text);

效果展示