ToB企服应用市场:ToB评测及商务社交产业平台

标题: 基于Qt的在QGraphicsView中绘制带有可动拐点的连线的一种方法 [打印本页]

---

作者: 用多少眼泪才能让你相信    时间: 前天 16:33
标题: 基于Qt的在QGraphicsView中绘制带有可动拐点的连线的一种方法
    摘要：本文详细先容了基于Qt框架在QGraphicsView 中实现带有可动拐点连线的绘制方法。通过自定CustomItem和CustomPath类，结合QGraphicsItem的几何变化事故与QPainterPath的路径绘制功能，实现了动态连线的基本框架。进一步探讨了平行线偏移规则的计划与拐点交织问题的办理方案，通过角平分线计算和交织检测优化路径毗连效果。最终提出了一种支持用户拖拽拐点、自动革新连线的交互式图形方案，并展示了代码实现与效果演示，为复杂图形编辑工具的开辟提供了参考。

    关键词：QGraphicsView、QGraphicsItem、QPainterPath、可动拐点、平行线偏移、角平分线、交织检测、Qt图形框架


    完整代码见末了。


1、QGraphicsItem和QPainterPath的底子利用

    做一点准备工作，先用一个简朴的案例，创建代码基本框架。
问题描述：
    已知起点和终点，怎样绘制过两点的线段？
    要求：点图形可动，连线图形可革新
办理思绪：
    1、准备工作，需要创建可动的图形类CustomItem和连线类CustomPath，以便观察各种环境。
    2、利用QPainterPath的moveTo()和lineTo()绘制连线。
    3、在图形类CustomItem的itemChange函数中革新连线。
代码如下：

1. class CustomPath;
2. // 图形类，描述起点和终点
3. class CustomItem : public QGraphicsRectItem
4. {
5. public:
6.     CustomItem(QGraphicsItem *parent = nullptr);
7.     void addPath(CustomPath *path);
9. protected:
10.     QVariant itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value) override;
12. private:
13.     QList<CustomPath *> mPathList; // 连线列表
14. };
16. CustomItem::CustomItem(QGraphicsItem *parent) : QGraphicsRectItem(parent)
17. {
18.     // 设置形状
19.     setRect(-5, -5, 10, 10);
20.     // 设置颜色
21.     setBrush(Qt::black);
22.     // 设置可移动
23.     setFlag(QGraphicsItem::ItemIsMovable, true);
24.     // 设置可发送几何变动，可在itemChange中进行检测
25.     setFlag(QGraphicsItem::ItemSendsGeometryChanges, true);
26. }
27. // 添加连线
28. void CustomItem::addPath(CustomPath *path)
29. {
30.     mPathList.append(path);
31. }
33. QVariant CustomItem::itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value)
34. {
35.     switch (change) {
36.     // 当位置变动时，刷新连线
37.     case QGraphicsItem::ItemPositionHasChanged:
38.     {
39.         for (int i = 0, size = mPathList.size(); i < size; ++i) {
40.             mPathList.at(i)->updatePosition();
41.         }
42.     }
44.     default:
45.         break;
46.     }
48.     return QGraphicsItem::itemChange(change, value);
49. }

复制代码

    在这段代码中，创建了图形类CustomItem，设置图形可移动，同时在移动时革新与图形相连的连线。

1. // 连线类，描述连线
2. class CustomPath : public QGraphicsPathItem
3. {
4. public:
5.     CustomPath(QGraphicsItem *start, QGraphicsItem *end, QGraphicsItem *parent = nullptr);
6.     void updatePosition(); // 刷新连线
8. private:
9.     QGraphicsItem *mStartItem = nullptr;  // 起点
10.     QGraphicsItem *mEndItem = nullptr;    // 终点
11. };
13. CustomPath::CustomPath(QGraphicsItem *start, QGraphicsItem *end, QGraphicsItem *parent)
14.     : QGraphicsPathItem(parent), mStartItem(start), mEndItem(end)
15. {
16.     // 设置绘制画笔，颜色黑色，笔宽为1
17.     setPen(QPen(Qt::black, 1));
18. }
19. // 刷新连线
20. void CustomPath::updatePosition()
21. {
22.     // 获取两端的位置
23.     QPointF start_pos = mStartItem->pos();
24.     QPointF end_pos = mEndItem->pos();
26.     // 绘制连线
27.     QPainterPath path;
28.     path.moveTo(start_pos);
29.     path.lineTo(end_pos);
30.     // 设置连线
31.     setPath(path);
32. }

复制代码

    在这段代码中，创建了连线类CustomPath，主要作用是革新连线updatePosition函数。

1.     // 创建画布
2.     QGraphicsScene *scene = new QGraphicsScene(this);
3.     ui->graphicsView->setScene(scene);
5.     // 创建起点
6.     CustomItem *item_start = new CustomItem;
7.     item_start->setPos(100, 100);
8.     scene->addItem(item_start);
9.     // 创建终点
10.     CustomItem *item_end = new CustomItem;
11.     item_end->setPos(200, 200);
12.     scene->addItem(item_end);
14.     // 创建连线
15.     CustomPath *path = new CustomPath(item_start, item_end);
16.     item_start->addPath(path);
17.     item_end->addPath(path);
18.     path->updatePosition();
19.     scene->addItem(path);

复制代码

    在这段代码中，创建了点A和点B，设置它们的位置，创建了连线并革新。


效果如下：

2、怎样创建平行线

    现在要在同一个连线类CustomPath中绘制两条连线，引出偏移规则的确定方法。
问题描述：
    现有点A和点B，分别在其附近找两点（点A1A2，点B1B2），怎样绘制两条平行线？
办理思绪：
    只需确定偏移规则。好比这两点分别位于点的左右或者上下两侧。这里设置为左右偏移5个像素点。

代码如下：

1. void CustomPath::updatePosition()
2. {
3.     QPointF start_pos = mStartItem->pos();
4.     QPointF end_pos = mEndItem->pos();
5.     // 起点左右偏移
6.     QPointF start_p1 = start_pos + QPointF(-5, 0);
7.     QPointF start_p2 = start_pos + QPointF(5, 0);
8.     // 终点左右偏移
9.     QPointF end_p1 = end_pos + QPointF(-5, 0);
10.     QPointF end_p2 = end_pos + QPointF(5, 0);
12.     // 两次连线
13.     QPainterPath path;
14.     path.moveTo(start_p1);
15.     path.lineTo(end_p1);
16.     path.moveTo(start_p2);
17.     path.lineTo(end_p2);
19.     setPath(path);
20. }

复制代码

    这段代码中，将起点和终点分别左右偏移五个像素，然后连线，利用两次moveTo()和lineTo()。

效果如下：

3、偏移规则的问题

问题描述：
    可以发现（如图），当移动两个点位于同一水平线时，连线会发生重叠。
办理思绪：
    这是由于偏移规则的缺陷。无论是上下偏移还是左右偏移或者其他的偏移，都会产生这种环境。
    那么，这两个偏移点必须根据环境发生变化。
    确定新的偏移规则：斜向偏移，直线如果斜向右上（或者斜向左下），则偏移点为（5，5）和（-5，-5）；直线如果斜向左上（或者斜向右下），则偏移点为（5，-5）和（-5，5）。
代码如下：

1. // 偏移规则
2. QPointF CustomPath::getOffset(const QPointF &p1, const QPointF &p2)
3. {
4.     QPointF dp = p1 - p2;
5.     QPointF offset;
6.     // 根据差值判断
7.     if (dp.x() * dp.y() >= 0) {
8.         // 设置偏移量
9.         offset = QPointF(-5, 5);
10.     } else {
11.         offset = QPointF(5, 5);
12.     }
13.     return offset;
14. }
16. void CustomPath::updatePosition()
17. {
18.     QPointF start_pos = mStartItem->pos();
19.     QPointF end_pos = mEndItem->pos();
21.     QPointF offset = getOffset(start_pos, end_pos);
23.     // 起点和终点偏移
24.     QPointF start_p1 = start_pos + offset;
25.     QPointF start_p2 = start_pos - offset;
26.     QPointF end_p1 = end_pos + offset;
27.     QPointF end_p2 = end_pos - offset;
29.     QPainterPath path;
30.     path.moveTo(start_p1);
31.     path.lineTo(end_p1);
32.     path.moveTo(start_p2);
33.     path.lineTo(end_p2);
35.     setPath(path);
36. }

复制代码

    在这段代码中，利用了两点xy轴的差值举行判断斜向方向，同时设置了偏移量。
效果如下：

4、带有拐点的连线

问题描述：
    重新从办理简朴的问题开始：现在有点X，需要创建从A->X->B的单条连线，怎样实现？
办理思绪：
    确定拐点位置，插入利用lineTo()即可。
代码如下：

1. // 拐点类
2. class CustomPoint : public QGraphicsEllipseItem
3. {
4. public:
5.     CustomPoint(QGraphicsItem *parent = nullptr);
6.     void setPathItem(CustomPath *pathItem);
8. protected:
9.     QVariant itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value) override;
11. private:
12.     CustomPath *mPathItem = nullptr; // 拐点所属连线
13. };
15. CustomPoint::CustomPoint(QGraphicsItem *parent)
16.     : QGraphicsEllipseItem(parent)
17. {
18.     // 设置图形为圆形
19.     setRect(-2, -2, 4, 4);
20.     setBrush(Qt::black);
21.     setFlag(QGraphicsItem::ItemIsMovable, true);
22.     setFlag(QGraphicsItem::ItemSendsGeometryChanges, true);
23. }
25. QVariant CustomPoint::itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value)
26. {
27.     switch (change) {
28.     case QGraphicsItem::ItemPositionHasChanged:
29.     {
30.         // 当拐点位置发生变化，刷新连线
31.         if (mPathItem) {
32.             mPathItem->updatePosition();
33.         }
34.     }
36.     default:
37.         break;
38.     }
40.     return QGraphicsItem::itemChange(change, value);
41. }
43. void CustomPoint::setPathItem(CustomPath *pathItem)
44. {
45.     mPathItem = pathItem;
46. }

复制代码

    在这段代码中，创建了拐点类CustomPoint，设置它的形状、笔刷、可移动属性；当拐点位置发生变化时，刷线连线。

1. // 对部分代码进行修改
2. class CustomPath : public QGraphicsPathItem
3. {
4. public:
5.     CustomPath(QGraphicsItem *start, QGraphicsItem *end, QGraphicsItem *parent = nullptr);
6.     void updatePosition();
7.     void setPoint(CustomPoint *point); // 设置拐点
9. private:
10.     QGraphicsItem *mStartItem = nullptr;
11.     QGraphicsItem *mEndItem = nullptr;
13.     CustomPoint *mPoint = nullptr;  // 拐点
14. };
16. void CustomPath::setPoint(CustomPoint *point)
17. {
18.     mPoint = point;
19. }
21. void CustomPath::updatePosition()
22. {
23.     QPointF start_pos = mStartItem->pos();
24.     QPointF end_pos = mEndItem->pos();
26.     QPointF point_pos = mPoint->pos();
28.     QPainterPath path;
29.     path.moveTo(start_pos);
30.     path.lineTo(point_pos);   // 从起点->拐点->终点
31.     path.lineTo(end_pos);
33.     setPath(path);
34. }
37.     // 修改使用代码
38.     QGraphicsScene *scene = new QGraphicsScene(this);
39.     ui->graphicsView->setScene(scene);
40.     // 创建起点
41.     CustomItem *item_start = new CustomItem;
42.     item_start->setPos(100, 100);
43.     scene->addItem(item_start);
44.     // 创建终点
45.     CustomItem *item_end = new CustomItem;
46.     item_end->setPos(200, 200);
47.     scene->addItem(item_end);
48.     // 创建连线
49.     CustomPath *path = new CustomPath(item_start, item_end);
50.     item_start->addPath(path);
51.     item_end->addPath(path);
52.     scene->addItem(path);
53.     // 添加拐点图形
54.     CustomPoint *point = new CustomPoint(path);
55.     point->setPos(100, 150);
56.     path->setPoint(point);  // 设置拐点
57.     point->setPathItem(path); // 设置连线
59.     path->updatePosition();

复制代码

    在这段代码中，对部分代码举行修改：在连线类中添加了拐点成员，在革新连线函数中连线到拐点，在实际利用代码中添加了拐点图形，在末了革新图形连线。
效果如下：

5、带有拐点的两条平行线

问题描述：
    那么怎样绘制带有拐点的两条连线呢？
办理思绪：
    直接将偏移规则应用到拐点位置，根据起点和拐点位置（或者拐点和终点位置）确定偏移，会怎样？
代码如下：

1. void CustomPath::updatePosition()
2. {
3.     QPointF start_pos = mStartItem->pos();
4.     QPointF end_pos = mEndItem->pos();
6.     QPointF point_pos = mPoint->pos();
7.     // 计算偏移
8.     QPointF offset_sp = getOffset(start_pos, point_pos);
9.     QPointF offset_pe = getOffset(point_pos, end_pos);
10.     // 起点偏移
11.     QPointF start_p1 = start_pos + offset_sp;
12.     QPointF start_p2 = start_pos - offset_sp;
13.     // 拐点对起点偏移
14.     QPointF point_ps1 = point_pos + offset_sp;
15.     QPointF point_ps2 = point_pos - offset_sp;
16.     // 拐点对终点偏移
17. //    QPointF point_pe1 = point_pos + offset_pe;
18. //    QPointF point_pe2 = point_pos - offset_pe;
19.     // 终点偏移
20.     QPointF end_p1 = end_pos + offset_pe;
21.     QPointF end_p2 = end_pos - offset_pe;
23.     // 使用两个
24.     QPainterPath path;
25.     path.moveTo(start_p1);
26.     path.lineTo(point_ps1);
27. //    path.lineTo(point_pe1);
28.     path.lineTo(end_p1);
30.     path.moveTo(start_p2);
31.     path.lineTo(point_ps2);
32. //    path.lineTo(point_pe2);
33.     path.lineTo(end_p2);
35.     // 使用四个
36. //    {
37. //        path.moveTo(start_p1);
38. //        path.lineTo(point_ps1);
39. //        path.moveTo(point_pe1);
40. //        path.lineTo(end_p1);
42. //        path.moveTo(start_p2);
43. //        path.lineTo(point_ps2);
44. //        path.moveTo(point_pe2);
45. //        path.lineTo(end_p2);
46. //    }
47.     setPath(path);
48. }

复制代码

    在调整代码的过程中，就会发现，在拐点对起点和拐点对终点应用偏移规则时，会产生四个偏移点。
    只利用其中两个会发生什么环境？利用四个会发生什么环境？
效果如下：
    利用两个的环境：可以看到连线产生了交错，而且某些角度环境下发生重合。

    利用四个的环境：可以看到连线产生交错，而且某些角度下毗连点错开。

6、拐点处的偏移问题

问题描述：
    如果对拐点也应用偏移规则，利用两个点，会产生交错的环境；利用四个点，不但会产生交错，而且会断开。
办理思绪：
    拐点处的偏移点应该只可以有两个；其偏移点只对一个点应用；考虑利用角平分线。
    方案就是：起点-拐点-终点，形成一个角度，计算出角平分线；过起点的两个偏移点，作起点和拐点连线的两条平行线；这两条平行线和角平分线的交点，作为拐点处的偏移点；然后毗连拐点处偏移点和终点偏移点，形成连线。
代码如下：

1. // 计算角平分线
2. QLineF CustomPath::calculateAngleBisector(const QPointF &start, const QPointF &mid, const QPointF &end)
3. {
4.     // 计算向量A和B
5.     QPointF vectorA = start - mid;
6.     QPointF vectorB = end - mid;
8.     // 归一化向量A和B
9.     qreal lengthA = std::hypot(vectorA.x(), vectorA.y());
10.     qreal lengthB = std::hypot(vectorB.x(), vectorB.y());
11.     QPointF unitA = vectorA / lengthA;
12.     QPointF unitB = vectorB / lengthB;
14.     // 计算角平分线向量
15.     QPointF bisector = unitA + unitB;
17.     // 如果共线则向量为零，需要使用垂线
18.     if (bisector.isNull()) {
19.         bisector = QPointF(-unitA.y(), unitA.x());
20.     }
22.     // 归一化角平分线向量
23.     qreal lengthBisector = std::hypot(bisector.x(), bisector.y());
24.     QPointF unitBisector = bisector / lengthBisector;
26.     // 从中点出发，沿角平分线方向绘制一条直线
27.     QPointF bisectorEnd = mid + unitBisector * 100; // 100为长度，可根据需要调整
28.     QPointF bisectorEnd_n = mid - unitBisector * 100;
29.     return QLineF(bisectorEnd_n, bisectorEnd);
30.     //    return unitBisector;
31. }
33. // 计算过p点的l1的平行线与bisector_line的交点
34. QPointF CustomPath::calculateBisectorPoint(const QLineF &l1, const QLineF &bisector_line, const QPointF &p)
35. {
36.     // 起点到拐点连线的向量
37.     QPointF lp(l1.p2() - l1.p1());
38.     qreal length = std::hypot(lp.x(), lp.y());
39.     QPointF unit = lp / length;
41.     // 过偏移点的平行线
42.     QLineF line(p, p+unit*100);
44.     // 计算交点
45.     QPointF intersection;
46.     QLineF::IntersectType type = line.intersects(bisector_line, &intersection);
47.     return intersection;
48. }
50. void CustomPath::updatePosition()
51. {
52.     QPointF start_pos = mStartItem->pos();
53.     QPointF end_pos = mEndItem->pos();
55.     QPointF point_pos = mPoint->pos();
56.     // 计算偏移
57.     QPointF offset_sp = getOffset(start_pos, point_pos);
58.     QPointF offset_pe = getOffset(point_pos, end_pos);
59.     // 起点偏移
60.     QPointF start_p1 = start_pos + offset_sp;
61.     QPointF start_p2 = start_pos - offset_sp;
62.     // 终点偏移
63.     QPointF end_p1 = end_pos + offset_pe;
64.     QPointF end_p2 = end_pos - offset_pe;
66.     // 计算角平分线
67.     QLineF bisector_line = calculateAngleBisector(start_pos, point_pos, end_pos);
68.     QLineF start_line(start_pos, point_pos);
69.     // 计算交点
70.     QPointF p1_bst_itst = calculateBisectorPoint(start_line, bisector_line, start_p1);
71.     QPointF p2_bst_itst = calculateBisectorPoint(start_line, bisector_line, start_p2);
73.     // 连线
74.     QPainterPath path;
75.     path.moveTo(start_p1);
76.     path.lineTo(p1_bst_itst);
77.     path.lineTo(end_p1);
79.     path.moveTo(start_p2);
80.     path.lineTo(p2_bst_itst);
81.     path.lineTo(end_p2);
83.     setPath(path);
84. }

复制代码

    在这段代码中，计算起点-拐点-终点形成角度的角平分线，考虑三点共线环境下，利用垂线向量；然后有起点到拐点的连线，过两起点偏移点，作平行线，并得到和角平分线的交点；从交点连线到终点偏移点。
效果如图：
    可见在拐点和终点的两条连线发生了交织，继续美满。

7、后半段交织问题

问题描述：
    偏移点并不总是对应的，拐点到终点的连线发生了交织。
办理思绪：
    判断后半段是否交织，如果交织，则互换偏移点。
代码如下：

1. // 判断是否交叉
2. bool CustomPath::calculateLineIsIntersect(const QPointF &start1, const QPointF &end1,
3.                                                 const QPointF &start2, const QPointF &end2)
4. {
5.     QLineF line1(start1, end1);
6.     QLineF line2(start2, end2);
7.     QPointF intersection;
8.     QLineF::IntersectType type = line1.intersects(line2, &intersection);
9.     if (type == QLineF::BoundedIntersection && ! intersection.isNull()) {
10.         return true;
11.     } else {
12.         return false;
13.     }
14. }
16. void CustomPath::updatePosition()
17. {
18.     QPointF start_pos = mStartItem->pos();
19.     QPointF end_pos = mEndItem->pos();
21.     QPointF point_pos = mPoint->pos();
23.     QPointF offset_sp = getOffset(start_pos, point_pos);
24.     QPointF offset_pe = getOffset(point_pos, end_pos);
26.     QPointF start_p1 = start_pos + offset_sp;
27.     QPointF start_p2 = start_pos - offset_sp;
29.     QPointF end_p1 = end_pos + offset_pe;
30.     QPointF end_p2 = end_pos - offset_pe;
32.     // 计算角平分线
33.     QLineF bisector_line = calculateAngleBisector(start_pos, point_pos, end_pos);
34.     QLineF start_line(start_pos, point_pos);
35.     // 计算交点
36.     QPointF p1_bst_itst = calculateBisectorPoint(start_line, bisector_line, start_p1);
37.     QPointF p2_bst_itst = calculateBisectorPoint(start_line, bisector_line, start_p2);
39.     QPainterPath path;
41.     // 前半段
42.     path.moveTo(start_p1);
43.     path.lineTo(p1_bst_itst);
44.     path.moveTo(start_p2);
45.     path.lineTo(p2_bst_itst);
47.     // 后半段，判断是否交叉
48.     if (calculateLineIsIntersect(end_p1, p1_bst_itst, end_p2, p2_bst_itst)) {
49.         // 如果交叉
50.         path.moveTo(p1_bst_itst);
51.         path.lineTo(end_p2);
53.         path.moveTo(p2_bst_itst);
54.         path.lineTo(end_p1);
55.     } else {
56.         path.moveTo(p1_bst_itst);
57.         path.lineTo(end_p1);
59.         path.moveTo(p2_bst_itst);
60.         path.lineTo(end_p2);
61.     }
63.     setPath(path);
64. }

复制代码

    在这段代码中，修改了绘制连线的顺序，先绘制前半段，再绘制后半段；如果后半段发生交织，则互换末了的终点偏移点。
效果如下：
    可见当形成的角度极小的时间，拐点处会非常尖锐，对这个问题我没有很好的办法。还好拐点是可以移动的。如果你有想法，接待共同讨论。

总结：

    本文系统性地办理了在Qt图形视图中绘制动态连线的技术难点。首先，通过继承QGraphicsItem实现可拖拽的图形项CustomItem，利用itemChange事故触发连线革新，确保了图形与路径的实时联动。其次，引入CustomPath类管理路径绘制，通过QPainterPath机动构建线段与拐点毗连逻辑。针对平行线偏移问题，提出基于斜向偏移与角平分线的动态调整策略，有用制止了路径重叠与错位。然而，在非常角度下拐点处仍可能因偏移计算产生尖锐毗连，需进一步优化算法或引入平滑曲线处理。

完整代码：

• mainwindow.h
  

点击折叠或睁开代码

1. #ifndef MAINWINDOW_H
2. #define MAINWINDOW_H
4. #include <QMainWindow>
5. #include <QtWidgets>
7. QT_BEGIN_NAMESPACE
8. namespace Ui { class MainWindow; }
9. QT_END_NAMESPACE
12. class CustomPath;
13. class CustomPoint;
14. // 图形类，描述起点和终点
15. class CustomItem : public QGraphicsRectItem
16. {
17. public:
18.    CustomItem(QGraphicsItem *parent = nullptr);
19.    void addPath(CustomPath *path);
21. protected:
22.    QVariant itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value) override;
24. private:
25.    QList<CustomPath *> mPathList; // 连线列表
26. };
27. // 连线类，描述连线
28. class CustomPath : public QGraphicsPathItem
29. {
30. public:
31.    CustomPath(QGraphicsItem *start, QGraphicsItem *end, QGraphicsItem *parent = nullptr);
32.    void updatePosition();   // 刷新连线
34.    void setPoint(CustomPoint *point);   // 设置拐点
36. private:
37.    QGraphicsItem *mStartItem = nullptr;  // 起点
38.    QGraphicsItem *mEndItem = nullptr;    // 终点
40.    CustomPoint *mPoint = nullptr;     // 拐点
42.    QPointF getOffset(const QPointF &p1, const QPointF &p2);
43.    QLineF calculateAngleBisector(const QPointF& start, const QPointF& mid, const QPointF& end);
44.    QPointF calculateBisectorPoint(const QLineF &l1, const QLineF &bisector_line, const QPointF &p);
45.    bool calculateLineIsIntersect(const QPointF &start1, const QPointF &end1, const QPointF &start2, const QPointF &end2);
47. };
48. // 拐点类
49. class CustomPoint : public QGraphicsEllipseItem
50. {
51. public:
52.    CustomPoint(QGraphicsItem *parent = nullptr);
53.    void setPathItem(CustomPath *pathItem);
55. protected:
56.    QVariant itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value) override;
58. private:
59.    CustomPath *mPathItem = nullptr;   // 拐点所属连线
60. };
62. class MainWindow : public QMainWindow
63. {
64.    Q_OBJECT
66. public:
67.    MainWindow(QWidget *parent = nullptr);
68.    ~MainWindow();
70. private:
71.    Ui::MainWindow *ui;
73.    void initGraphics();
74. };
75. #endif // MAINWINDOW_H

复制代码

• mainwindow.cpp
  

点击折叠或睁开代码

1. #include "mainwindow.h"
2. #include "ui_mainwindow.h"
6. MainWindow::MainWindow(QWidget *parent)
7.    : QMainWindow(parent)
8.    , ui(new Ui::MainWindow)
9. {
10.    ui->setupUi(this);
12.    initGraphics();
13. }
15. MainWindow::~MainWindow()
16. {
17.    delete ui;
18. }
20. // 问题1、2、3
21. //void MainWindow::initGraphics()
22. //{
23. //    // 创建画布
24. //    QGraphicsScene *scene = new QGraphicsScene(this);
25. //    ui->graphicsView->setScene(scene);
26. //    // 创建起点
27. //    CustomItem *item_start = new CustomItem;
28. //    item_start->setPos(100, 100);
29. //    scene->addItem(item_start);
30. //    // 创建终点
31. //    CustomItem *item_end = new CustomItem;
32. //    item_end->setPos(200, 200);
33. //    scene->addItem(item_end);
34. //    // 创建连线
35. //    CustomPath *path = new CustomPath(item_start, item_end);
36. //    item_start->addPath(path);
37. //    item_end->addPath(path);
38. //    scene->addItem(path);
40. //    path->updatePosition();
41. //}
42. // 问题4、5
43. void MainWindow::initGraphics()
44. {
45.    QGraphicsScene *scene = new QGraphicsScene(this);
46.    ui->graphicsView->setScene(scene);
48.    CustomItem *item_start = new CustomItem;
49.    item_start->setPos(100, 100);
50.    scene->addItem(item_start);
52.    CustomItem *item_end = new CustomItem;
53.    item_end->setPos(200, 200);
54.    scene->addItem(item_end);
56.    CustomPath *path = new CustomPath(item_start, item_end);
57.    item_start->addPath(path);
58.    item_end->addPath(path);
59.    scene->addItem(path);
60.    // 添加拐点图形
61.    CustomPoint *point = new CustomPoint(path);
62.    point->setPos(100, 150);
63.    path->setPoint(point);
64.    point->setPathItem(path);
66.    path->updatePosition();
68. }
71. CustomItem::CustomItem(QGraphicsItem *parent) : QGraphicsRectItem(parent)
72. {
73.    // 设置形状
74.    setRect(-5, -5, 10, 10);
75.    // 设置颜色
76.    setBrush(Qt::black);
77.    // 设置可移动
78.    setFlag(QGraphicsItem::ItemIsMovable, true);
79.    // 设置可发送几何变动，可在itemChange中进行检测
80.    setFlag(QGraphicsItem::ItemSendsGeometryChanges, true);
81. }
82. // 添加连线
83. void CustomItem::addPath(CustomPath *path)
84. {
85.    mPathList.append(path);
86. }
88. QVariant CustomItem::itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value)
89. {
90.    switch (change) {
91.    // 当位置变动时，刷新连线
92.    case QGraphicsItem::ItemPositionHasChanged:
93.    {
94.        for (int i = 0, size = mPathList.size(); i < size; ++i) {
95.            mPathList.at(i)->updatePosition();
96.        }
97.    }
99.    default:
100.        break;
101.    }
103.    return QGraphicsItem::itemChange(change, value);
104. }
106. CustomPath::CustomPath(QGraphicsItem *start, QGraphicsItem *end, QGraphicsItem *parent)
107.    : QGraphicsPathItem(parent), mStartItem(start), mEndItem(end)
108. {
109.    // 设置绘制画笔，颜色黑色，笔宽为1
110.    setPen(QPen(Qt::black, 1));
111. }
112. // 问题1
113. //void CustomPath::updatePosition()
114. //{
115. //    // 获取两端的位置
116. //    QPointF start_pos = mStartItem->pos();
117. //    QPointF end_pos = mEndItem->pos();
119. //    // 绘制连线
120. //    QPainterPath path;
121. //    path.moveTo(start_pos);
122. //    path.lineTo(end_pos);
123. //    // 设置连线
124. //    setPath(path);
125. //}
126. // 问题2
127. //void CustomPath::updatePosition()
128. //{
129. //    QPointF start_pos = mStartItem->pos();
130. //    QPointF end_pos = mEndItem->pos();
131. //    // 起点左右偏移
132. //    QPointF start_p1 = start_pos + QPointF(-5, 0);
133. //    QPointF start_p2 = start_pos + QPointF(5, 0);
134. //    // 终点左右偏移
135. //    QPointF end_p1 = end_pos + QPointF(-5, 0);
136. //    QPointF end_p2 = end_pos + QPointF(5, 0);
138. //    // 两次连线
139. //    QPainterPath path;
140. //    path.moveTo(start_p1);
141. //    path.lineTo(end_p1);
142. //    path.moveTo(start_p2);
143. //    path.lineTo(end_p2);
145. //    setPath(path);
146. //}
148. QPointF CustomPath::getOffset(const QPointF &p1, const QPointF &p2)
149. {
150.    QPointF dp = p1 - p2;
151.    QPointF offset;
152.    // 根据差值判断
153.    if (dp.x() * dp.y() >= 0) {
154.        // 设置偏移量
155.        offset = QPointF(-5, 5);
156.    } else {
157.        offset = QPointF(5, 5);
158.    }
159.    return offset;
160. }
161. // 问题3
162. //void CustomPath::updatePosition()
163. //{
164. //    QPointF start_pos = mStartItem->pos();
165. //    QPointF end_pos = mEndItem->pos();
167. //    QPointF offset = getOffset(start_pos, end_pos);
169. //    // 起点和终点偏移
170. //    QPointF start_p1 = start_pos + offset;
171. //    QPointF start_p2 = start_pos - offset;
172. //    QPointF end_p1 = end_pos + offset;
173. //    QPointF end_p2 = end_pos - offset;
175. //    QPainterPath path;
176. //    path.moveTo(start_p1);
177. //    path.lineTo(end_p1);
178. //    path.moveTo(start_p2);
179. //    path.lineTo(end_p2);
181. //    setPath(path);
182. //}
183. // 问题4
184. //void CustomPath::updatePosition()
185. //{
186. //    QPointF start_pos = mStartItem->pos();
187. //    QPointF end_pos = mEndItem->pos();
189. //    QPointF point_pos = mPoint->pos();
191. //    QPainterPath path;
192. //    path.moveTo(start_pos);
193. //    path.lineTo(point_pos);   // 从起点->拐点->终点
194. //    path.lineTo(end_pos);
196. //    setPath(path);
197. //}
199. // 问题5
200. //void CustomPath::updatePosition()
201. //{
202. //    QPointF start_pos = mStartItem->pos();
203. //    QPointF end_pos = mEndItem->pos();
205. //    QPointF point_pos = mPoint->pos();
206. //    // 计算偏移
207. //    QPointF offset_sp = getOffset(start_pos, point_pos);
208. //    QPointF offset_pe = getOffset(point_pos, end_pos);
209. //    // 起点偏移
210. //    QPointF start_p1 = start_pos + offset_sp;
211. //    QPointF start_p2 = start_pos - offset_sp;
212. //    // 拐点对起点偏移
213. //    QPointF point_ps1 = point_pos + offset_sp;
214. //    QPointF point_ps2 = point_pos - offset_sp;
215. //    // 拐点对终点偏移
216. //    QPointF point_pe1 = point_pos + offset_pe;
217. //    QPointF point_pe2 = point_pos - offset_pe;
218. //    // 终点偏移
219. //    QPointF end_p1 = end_pos + offset_pe;
220. //    QPointF end_p2 = end_pos - offset_pe;
222. //    // 使用两个
223. //    QPainterPath path;
224. //    path.moveTo(start_p1);
225. //    path.lineTo(point_ps1);
226. ////    path.lineTo(point_pe1);
227. //    path.lineTo(end_p1);
229. //    path.moveTo(start_p2);
230. //    path.lineTo(point_ps2);
231. ////    path.lineTo(point_pe2);
232. //    path.lineTo(end_p2);
233. //      // 使用四个
234. ////    {
235. ////        path.moveTo(start_p1);
236. ////        path.lineTo(point_ps1);
237. ////        path.moveTo(point_pe1);
238. ////        path.lineTo(end_p1);
240. ////        path.moveTo(start_p2);
241. ////        path.lineTo(point_ps2);
242. ////        path.moveTo(point_pe2);
243. ////        path.lineTo(end_p2);
244. ////    }
246. //    setPath(path);
247. //}
248. // 问题6
249. //void CustomPath::updatePosition()
250. //{
251. //    QPointF start_pos = mStartItem->pos();
252. //    QPointF end_pos = mEndItem->pos();
254. //    QPointF point_pos = mPoint->pos();
256. //    QPointF offset_sp = getOffset(start_pos, point_pos);
257. //    QPointF offset_pe = getOffset(point_pos, end_pos);
259. //    QPointF start_p1 = start_pos + offset_sp;
260. //    QPointF start_p2 = start_pos - offset_sp;
262. //    QPointF end_p1 = end_pos + offset_pe;
263. //    QPointF end_p2 = end_pos - offset_pe;
265. //    // 计算角平分线
266. //    QLineF bisector_line = calculateAngleBisector(start_pos, point_pos, end_pos);
267. //    QLineF start_line(start_pos, point_pos);
268. //    // 计算交点
269. //    QPointF p1_bst_itst = calculateBisectorPoint(start_line, bisector_line, start_p1);
270. //    QPointF p2_bst_itst = calculateBisectorPoint(start_line, bisector_line, start_p2);
273. //    QPainterPath path;
274. //    path.moveTo(start_p1);
275. //    path.lineTo(p1_bst_itst);
276. //    path.lineTo(end_p1);
278. //    path.moveTo(start_p2);
279. //    path.lineTo(p2_bst_itst);
280. //    path.lineTo(end_p2);
282. //    setPath(path);
283. //}
284. // 问题7
285. void CustomPath::updatePosition()
286. {
287.    QPointF start_pos = mStartItem->pos();
288.    QPointF end_pos = mEndItem->pos();
290.    QPointF point_pos = mPoint->pos();
292.    QPointF offset_sp = getOffset(start_pos, point_pos);
293.    QPointF offset_pe = getOffset(point_pos, end_pos);
295.    QPointF start_p1 = start_pos + offset_sp;
296.    QPointF start_p2 = start_pos - offset_sp;
298.    QPointF end_p1 = end_pos + offset_pe;
299.    QPointF end_p2 = end_pos - offset_pe;
301.    // 计算角平分线
302.    QLineF bisector_line = calculateAngleBisector(start_pos, point_pos, end_pos);
303.    QLineF start_line(start_pos, point_pos);
304.    // 计算交点
305.    QPointF p1_bst_itst = calculateBisectorPoint(start_line, bisector_line, start_p1);
306.    QPointF p2_bst_itst = calculateBisectorPoint(start_line, bisector_line, start_p2);
308.    QPainterPath path;
310.    // 前半段
311.    path.moveTo(start_p1);
312.    path.lineTo(p1_bst_itst);
313.    path.moveTo(start_p2);
314.    path.lineTo(p2_bst_itst);
317.    // 后半段，判断是否交叉
318.    if (calculateLineIsIntersect(end_p1, p1_bst_itst, end_p2, p2_bst_itst)) {
319.        // 如果交叉
320.        path.moveTo(p1_bst_itst);
321.        path.lineTo(end_p2);
323.        path.moveTo(p2_bst_itst);
324.        path.lineTo(end_p1);
325.    } else {
326.        path.moveTo(p1_bst_itst);
327.        path.lineTo(end_p1);
329.        path.moveTo(p2_bst_itst);
330.        path.lineTo(end_p2);
331.    }
333.    setPath(path);
334. }
335. // 计算角平分线
336. QLineF CustomPath::calculateAngleBisector(const QPointF &start, const QPointF &mid, const QPointF &end)
337. {
338.    // 计算向量A和B
339.    QPointF vectorA = start - mid;
340.    QPointF vectorB = end - mid;
342.    // 归一化向量A和B
343.    qreal lengthA = std::hypot(vectorA.x(), vectorA.y());
344.    qreal lengthB = std::hypot(vectorB.x(), vectorB.y());
345.    QPointF unitA = vectorA / lengthA;
346.    QPointF unitB = vectorB / lengthB;
348.    // 计算角平分线向量
349.    QPointF bisector = unitA + unitB;
351.    // 如果共线则向量为零，需要使用垂线
352.    if (bisector.isNull()) {
353.        bisector = QPointF(-unitA.y(), unitA.x());
354.    }
356.    // 归一化角平分线向量
357.    qreal lengthBisector = std::hypot(bisector.x(), bisector.y());
358.    QPointF unitBisector = bisector / lengthBisector;
360.    // 从中点出发，沿角平分线方向绘制一条直线
361.    QPointF bisectorEnd = mid + unitBisector * 100; // 100为长度，可根据需要调整
362.    QPointF bisectorEnd_n = mid - unitBisector * 100;
363.    return QLineF(bisectorEnd_n, bisectorEnd);
364.    //    return unitBisector;
365. }
366. // 计算过p点的l1的平行线与bisector_line的交点
367. QPointF CustomPath::calculateBisectorPoint(const QLineF &l1, const QLineF &bisector_line, const QPointF &p)
368. {
369.    // 起点到拐点连线的向量
370.    QPointF lp(l1.p2() - l1.p1());
371.    qreal length = std::hypot(lp.x(), lp.y());
372.    QPointF unit = lp / length;
374.    // 过偏移点的平行线
375.    QLineF line(p, p+unit*100);
377.    // 计算交点
378.    QPointF intersection;
379.    QLineF::IntersectType type = line.intersects(bisector_line, &intersection);
380.    return intersection;
381. }
382. // 判断是否交叉
383. bool CustomPath::calculateLineIsIntersect(const QPointF &start1, const QPointF &end1,
384.                                                const QPointF &start2, const QPointF &end2)
385. {
386.    QLineF line1(start1, end1);
387.    QLineF line2(start2, end2);
388.    QPointF intersection;
389.    QLineF::IntersectType type = line1.intersects(line2, &intersection);
390.    if (type == QLineF::BoundedIntersection && ! intersection.isNull()) {
391.        return true;
392.    } else {
393.        return false;
394.    }
395. }
397. void CustomPath::setPoint(CustomPoint *point)
398. {
399.    mPoint = point;
400. }
402. CustomPoint::CustomPoint(QGraphicsItem *parent)
403.    : QGraphicsEllipseItem(parent)
404. {
405.    // 设置图形为圆形
406.    setRect(-2, -2, 4, 4);
407.    setBrush(Qt::black);
408.    setFlag(QGraphicsItem::ItemIsMovable, true);
409.    setFlag(QGraphicsItem::ItemSendsGeometryChanges, true);
410. }
412. QVariant CustomPoint::itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value)
413. {
414.    switch (change) {
415.    case QGraphicsItem::ItemPositionHasChanged:
416.    {
417.        // 当拐点位置发生变化，刷新连线
418.        if (mPathItem) {
419.            mPathItem->updatePosition();
420.        }
421.    }
423.    default:
424.        break;
425.    }
427.    return QGraphicsItem::itemChange(change, value);
428. }
430. void CustomPoint::setPathItem(CustomPath *pathItem)
431. {
432.    mPathItem = pathItem;
433. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4