登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›Qt图形连线功能升级：支持多拐点和颜色区分 ...

Qt图形连线功能升级：支持多拐点和颜色区分

豌畔丛 7 天前
摘要：本文在Qt图形框架中扩展了连线功能，实现了给连线添加多个拐点并使用不同颜色绘制的效果。该实现优化了连线的可视化效果，提升了代码可扩展性，为复杂图形编辑工具的开发提供了参考。

关键词：QGraphicsPathItem、拐点、QPainterPath、颜色设置、Qt图形框架、连线

完整代码见最后。

在上一篇文章的基础上继续实现两个功能：

  • 给连线添加多个拐点
  • 使用不同的颜色给连线上色

添加代码：
  1. // 连线类，描述连线
  2. class CustomPath : public QGraphicsPathItem
  3. {
  4. public:
  5.     CustomPath(QGraphicsItem *start, QGraphicsItem *end, QGraphicsItem *parent = nullptr);
  6.     void updatePosition();   // 刷新连线
  8.     void addPoint(CustomPoint *point);   // 设置拐点
  10. protected:
  11.     void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = nullptr) override;
  13. private:
  14.     QGraphicsItem *mStartItem = nullptr;  // 起点
  15.     QGraphicsItem *mEndItem = nullptr;    // 终点
  17.     QList<CustomPoint *> mPointList;     // 拐点列表
  19.     QPainterPath mPath1;  // 连线1
  20.     QPainterPath mPath2;  // 连线2
  22.     QPointF getOffset(const QPointF &p1, const QPointF &p2);
  23.     QLineF calculateAngleBisector(const QPointF& start, const QPointF& mid, const QPointF& end);
  24.     QPointF calculateBisectorPoint(const QLineF &l1, const QLineF &bisector_line, const QPointF &p);
  25.     bool calculateLineIsIntersect(const QPointF &start1, const QPointF &end1, const QPointF &start2, const QPointF &end2);
  27. };
  29. void CustomPath::addPoint(CustomPoint *point)
  30. {
  31.     mPointList.append(point);
  32. }
  34. void CustomPath::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
  35. {
  36.     painter->save();
  37.     // 用不同的画笔绘制连线
  38.     painter->setPen(QPen(Qt::blue, 2.0));
  39.     painter->drawPath(mPath1);
  40.     painter->setPen(QPen(Qt::red, 2.0));
  41.     painter->drawPath(mPath2);
  43.     painter->restore();
  44. }
  46. void CustomPath::updatePosition()
  47. {
  49.     QPointF start = mStartItem->pos();
  50.     QPointF end = mEndItem->pos();
  52.     QPointF start_offset = getOffset(start, mPointList.first()->pos());
  53.     QPointF start_p1 = start + start_offset;
  54.     QPointF start_p2 = start - start_offset;
  56.     mPath1.clear();
  57.     mPath2.clear();
  58.     mPath1.moveTo(start_p1);
  59.     mPath2.moveTo(start_p2);
  61.     QList<QPointF> points;
  62.     points.append(start);
  63.     for (int i = 0, size = mPointList.size(); i < size; ++i) {
  64.         points.append(mPointList.at(i)->pos());
  65.     }
  66.     points.append(end);
  68.     Q_ASSERT(points.size() >= 3);
  69.     // 记录拐点的偏移点的位置
  70.     QPointF next_start_p1 = start_p1, next_start_p2 = start_p2;
  71.     // 每个拐点都只绘制前半段
  72.     for (int i = 1, size = points.size(); i < size - 1; ++i) {
  73.         QPointF temp_start = points.at(i-1), temp_point = points.at(i), temp_end = points.at(i+1);
  74.         // 计算角平分线
  75.         QLineF bisector_line = calculateAngleBisector(temp_start, temp_point, temp_end);
  76.         QLineF start_line(temp_start, temp_point);
  77.         // 计算交点
  78.         QPointF p1_bst_itst = calculateBisectorPoint(start_line, bisector_line, next_start_p1);
  79.         QPointF p2_bst_itst = calculateBisectorPoint(start_line, bisector_line, next_start_p2);
  80.         // 判断是否交叉
  81.         if (calculateLineIsIntersect(next_start_p1, p1_bst_itst, next_start_p2, p2_bst_itst)) {
  82.             // 如果交叉
  83.             mPath1.lineTo(p2_bst_itst);
  84.             mPath2.lineTo(p1_bst_itst);
  86.             next_start_p1 = p2_bst_itst;
  87.             next_start_p2 = p1_bst_itst;
  88.         } else {
  89.             mPath1.lineTo(p1_bst_itst);
  90.             mPath2.lineTo(p2_bst_itst);
  92.             next_start_p1 = p1_bst_itst;
  93.             next_start_p2 = p2_bst_itst;
  94.         }
  95.     }
  97.     QPointF end_offset = getOffset(mPointList.last()->pos(), end);
  98.     QPointF end_p1 = end + end_offset;
  99.     QPointF end_p2 = end - end_offset;
  100.     // 最后的一段
  101.     if (calculateLineIsIntersect(next_start_p1, end_p1, next_start_p2, end_p2)) {
  102.         // 如果交叉
  103.         mPath1.lineTo(end_p2);
  104.         mPath2.lineTo(end_p1);
  105.     } else {
  106.         mPath1.lineTo(end_p1);
  107.         mPath2.lineTo(end_p2);
  108.     }
  110.     QPainterPath path;
  111.     path.addPath(mPath1);
  112.     path.addPath(mPath2);
  114.     setPath(path);
  115. }
  117.     QGraphicsScene *scene = new QGraphicsScene(this);
  118.     ui->graphicsView->setScene(scene);
  120.     CustomItem *item_start = new CustomItem;
  121.     item_start->setPos(100, 100);
  122.     scene->addItem(item_start);
  124.     CustomItem *item_end = new CustomItem;
  125.     item_end->setPos(200, 200);
  126.     scene->addItem(item_end);
  128.     CustomPath *path = new CustomPath(item_start, item_end);
  129.     item_start->addPath(path);
  130.     item_end->addPath(path);
  131.     scene->addItem(path);
  132.     // 添加拐点图形
  133.     CustomPoint *point1 = new CustomPoint(path);
  134.     point1->setPos(100, 150);
  135.     path->addPoint(point1);
  136.     point1->setPathItem(path);
  138.     CustomPoint *point2 = new CustomPoint(path);
  139.     point2->setPos(150, 100);
  140.     path->addPoint(point2);
  141.     point2->setPathItem(path);
  143.     path->updatePosition();
复制代码
在这段代码中，

  • 给CustomPath添加了拐点列表QList，用于多拐点的存储；
  • 添加了QPainterPath 的两条连线，用于不同的画笔绘制；
  • 重写paint()函数；
  • 对应拐点列表，修改updatePosition()函数，对每个拐点进行计算，刷新连线；
  • 添加测试代码，添加第二个拐点；

效果如下：
    可见，两条线的颜色在视觉上是有互换的情况的。本人能力有限，欢迎各位交流讨论。
1.gif


完整代码：



  • 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 addPoint(CustomPoint *point);   // 设置拐点
  36. protected:
  37.    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = nullptr) override;
  39. private:
  40.    QGraphicsItem *mStartItem = nullptr;  // 起点
  41.    QGraphicsItem *mEndItem = nullptr;    // 终点
  43.    QList<CustomPoint *> mPointList;     // 拐点列表
  45.    QPainterPath mPath1;  // 连线1
  46.    QPainterPath mPath2;  // 连线2
  49.    QPointF getOffset(const QPointF &p1, const QPointF &p2);
  50.    QLineF calculateAngleBisector(const QPointF& start, const QPointF& mid, const QPointF& end);
  51.    QPointF calculateBisectorPoint(const QLineF &l1, const QLineF &bisector_line, const QPointF &p);
  52.    bool calculateLineIsIntersect(const QPointF &start1, const QPointF &end1, const QPointF &start2, const QPointF &end2);
  54. };
  55. // 拐点类
  56. class CustomPoint : public QGraphicsEllipseItem
  57. {
  58. public:
  59.    CustomPoint(QGraphicsItem *parent = nullptr);
  60.    void setPathItem(CustomPath *pathItem);
  62. protected:
  63.    QVariant itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value) override;
  65. private:
  66.    CustomPath *mPathItem = nullptr;   // 拐点所属连线
  67. };
  69. class MainWindow : public QMainWindow
  70. {
  71.    Q_OBJECT
  73. public:
  74.    MainWindow(QWidget *parent = nullptr);
  75.    ~MainWindow();
  77. private:
  78.    Ui::MainWindow *ui;
  80.    void initGraphics();
  81. };
  82. #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. void MainWindow::initGraphics()
  21. {
  22.    QGraphicsScene *scene = new QGraphicsScene(this);
  23.    ui->graphicsView->setScene(scene);
  25.    CustomItem *item_start = new CustomItem;
  26.    item_start->setPos(100, 100);
  27.    scene->addItem(item_start);
  29.    CustomItem *item_end = new CustomItem;
  30.    item_end->setPos(200, 200);
  31.    scene->addItem(item_end);
  33.    CustomPath *path = new CustomPath(item_start, item_end);
  34.    item_start->addPath(path);
  35.    item_end->addPath(path);
  36.    scene->addItem(path);
  37.    // 添加拐点图形
  38.    CustomPoint *point1 = new CustomPoint(path);
  39.    point1->setPos(100, 150);
  40.    path->addPoint(point1);
  41.    point1->setPathItem(path);
  43.    CustomPoint *point2 = new CustomPoint(path);
  44.    point2->setPos(150, 100);
  45.    path->addPoint(point2);
  46.    point2->setPathItem(path);
  48.    path->updatePosition();
  50. }
  53. CustomItem::CustomItem(QGraphicsItem *parent) : QGraphicsRectItem(parent)
  54. {
  55.    // 设置形状
  56.    setRect(-5, -5, 10, 10);
  57.    // 设置颜色
  58.    setBrush(Qt::black);
  59.    // 设置可移动
  60.    setFlag(QGraphicsItem::ItemIsMovable, true);
  61.    // 设置可发送几何变动，可在itemChange中进行检测
  62.    setFlag(QGraphicsItem::ItemSendsGeometryChanges, true);
  63. }
  64. // 添加连线
  65. void CustomItem::addPath(CustomPath *path)
  66. {
  67.    mPathList.append(path);
  68. }
  70. QVariant CustomItem::itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value)
  71. {
  72.    switch (change) {
  73.    // 当位置变动时，刷新连线
  74.    case QGraphicsItem::ItemPositionHasChanged:
  75.    {
  76.        for (int i = 0, size = mPathList.size(); i < size; ++i) {
  77.            mPathList.at(i)->updatePosition();
  78.        }
  79.    }
  81.    default:
  82.        break;
  83.    }
  85.    return QGraphicsItem::itemChange(change, value);
  86. }
  88. CustomPath::CustomPath(QGraphicsItem *start, QGraphicsItem *end, QGraphicsItem *parent)
  89.    : QGraphicsPathItem(parent), mStartItem(start), mEndItem(end)
  90. {
  91.    // 设置绘制画笔，颜色黑色，笔宽为1
  92.    setPen(QPen(Qt::black, 1));
  93. }
  95. QPointF CustomPath::getOffset(const QPointF &p1, const QPointF &p2)
  96. {
  97.    QPointF dp = p1 - p2;
  98.    QPointF offset;
  99.    // 根据差值判断
  100.    if (dp.x() * dp.y() >= 0) {
  101.        // 设置偏移量
  102.        offset = QPointF(-5, 5);
  103.    } else {
  104.        offset = QPointF(5, 5);
  105.    }
  106.    return offset;
  107. }
  109. void CustomPath::updatePosition()
  110. {
  112.    QPointF start = mStartItem->pos();
  113.    QPointF end = mEndItem->pos();
  115.    QPointF start_offset = getOffset(start, mPointList.first()->pos());
  116.    QPointF start_p1 = start + start_offset;
  117.    QPointF start_p2 = start - start_offset;
  119.    mPath1.clear();
  120.    mPath2.clear();
  121.    mPath1.moveTo(start_p1);
  122.    mPath2.moveTo(start_p2);
  124.    QList<QPointF> points;
  125.    points.append(start);
  126.    for (int i = 0, size = mPointList.size(); i < size; ++i) {
  127.        points.append(mPointList.at(i)->pos());
  128.    }
  129.    points.append(end);
  131.    Q_ASSERT(points.size() >= 3);
  132.    QPointF next_start_p1 = start_p1, next_start_p2 = start_p2;
  133.    for (int i = 1, size = points.size(); i < size - 1; ++i) {
  134.        QPointF temp_start = points.at(i-1), temp_point = points.at(i), temp_end = points.at(i+1);
  135.        // 计算角平分线
  136.        QLineF bisector_line = calculateAngleBisector(temp_start, temp_point, temp_end);
  137.        QLineF start_line(temp_start, temp_point);
  138.        // 计算交点
  139.        QPointF p1_bst_itst = calculateBisectorPoint(start_line, bisector_line, next_start_p1);
  140.        QPointF p2_bst_itst = calculateBisectorPoint(start_line, bisector_line, next_start_p2);
  141.        // 判断是否交叉
  142.        if (calculateLineIsIntersect(next_start_p1, p1_bst_itst, next_start_p2, p2_bst_itst)) {
  143.            // 如果交叉
  144.            mPath1.lineTo(p2_bst_itst);
  145.            mPath2.lineTo(p1_bst_itst);
  147.            next_start_p1 = p2_bst_itst;
  148.            next_start_p2 = p1_bst_itst;
  149.        } else {
  150.            mPath1.lineTo(p1_bst_itst);
  151.            mPath2.lineTo(p2_bst_itst);
  153.            next_start_p1 = p1_bst_itst;
  154.            next_start_p2 = p2_bst_itst;
  155.        }
  156.    }
  158.    QPointF end_offset = getOffset(mPointList.last()->pos(), end);
  159.    QPointF end_p1 = end + end_offset;
  160.    QPointF end_p2 = end - end_offset;
  162.    if (calculateLineIsIntersect(next_start_p1, end_p1, next_start_p2, end_p2)) {
  163.        // 如果交叉
  164.        mPath1.lineTo(end_p2);
  165.        mPath2.lineTo(end_p1);
  166.    } else {
  167.        mPath1.lineTo(end_p1);
  168.        mPath2.lineTo(end_p2);
  169.    }
  171.    QPainterPath path;
  172.    path.addPath(mPath1);
  173.    path.addPath(mPath2);
  175.    setPath(path);
  176. }
  178. void CustomPath::addPoint(CustomPoint *point)
  179. {
  180.    mPointList.append(point);
  181. }
  183. void CustomPath::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
  184. {
  185.    painter->save();
  187.    painter->setPen(QPen(Qt::blue, 2.0));
  188.    painter->drawPath(mPath1);
  189.    painter->setPen(QPen(Qt::red, 2.0));
  190.    painter->drawPath(mPath2);
  192.    painter->restore();
  193. }
  195. // 计算角平分线
  196. QLineF CustomPath::calculateAngleBisector(const QPointF &start, const QPointF &mid, const QPointF &end)
  197. {
  198.    // 计算向量A和B
  199.    QPointF vectorA = start - mid;
  200.    QPointF vectorB = end - mid;
  202.    // 归一化向量A和B
  203.    qreal lengthA = std::hypot(vectorA.x(), vectorA.y());
  204.    qreal lengthB = std::hypot(vectorB.x(), vectorB.y());
  205.    QPointF unitA = vectorA / lengthA;
  206.    QPointF unitB = vectorB / lengthB;
  208.    // 计算角平分线向量
  209.    QPointF bisector = unitA + unitB;
  211.    // 如果共线则向量为零，需要使用垂线
  212.    if (bisector.isNull()) {
  213.        bisector = QPointF(-unitA.y(), unitA.x());
  214.    }
  216.    // 归一化角平分线向量
  217.    qreal lengthBisector = std::hypot(bisector.x(), bisector.y());
  218.    QPointF unitBisector = bisector / lengthBisector;
  220.    // 从中点出发，沿角平分线方向绘制一条直线
  221.    QPointF bisectorEnd = mid + unitBisector * 100; // 100为长度，可根据需要调整
  222.    QPointF bisectorEnd_n = mid - unitBisector * 100;
  223.    return QLineF(bisectorEnd_n, bisectorEnd);
  224.    //    return unitBisector;
  225. }
  226. // 计算过p点的l1的平行线与bisector_line的交点
  227. QPointF CustomPath::calculateBisectorPoint(const QLineF &l1, const QLineF &bisector_line, const QPointF &p)
  228. {
  229.    // 起点到拐点连线的向量
  230.    QPointF lp(l1.p2() - l1.p1());
  231.    qreal length = std::hypot(lp.x(), lp.y());
  232.    QPointF unit = lp / length;
  234.    // 过偏移点的平行线
  235.    QLineF line(p, p+unit*100);
  237.    // 计算交点
  238.    QPointF intersection;
  239.    QLineF::IntersectType type = line.intersects(bisector_line, &intersection);
  240.    return intersection;
  241. }
  242. // 判断是否交叉
  243. bool CustomPath::calculateLineIsIntersect(const QPointF &start1, const QPointF &end1,
  244.                                                const QPointF &start2, const QPointF &end2)
  245. {
  246.    QLineF line1(start1, end1);
  247.    QLineF line2(start2, end2);
  248.    QPointF intersection;
  249.    QLineF::IntersectType type = line1.intersects(line2, &intersection);
  250.    if (type == QLineF::BoundedIntersection && ! intersection.isNull()) {
  251.        return true;
  252.    } else {
  253.        return false;
  254.    }
  255. }
  257. CustomPoint::CustomPoint(QGraphicsItem *parent)
  258.    : QGraphicsEllipseItem(parent)
  259. {
  260.    // 设置图形为圆形
  261.    setRect(-2, -2, 4, 4);
  262.    setBrush(Qt::black);
  263.    setFlag(QGraphicsItem::ItemIsMovable, true);
  264.    setFlag(QGraphicsItem::ItemSendsGeometryChanges, true);
  265. }
  267. QVariant CustomPoint::itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value)
  268. {
  269.    switch (change) {
  270.    case QGraphicsItem::ItemPositionHasChanged:
  271.    {
  272.        // 当拐点位置发生变化，刷新连线
  273.        if (mPathItem) {
  274.            mPathItem->updatePosition();
  275.        }
  276.    }
  278.    default:
  279.        break;
  280.    }
  282.    return QGraphicsItem::itemChange(change, value);
  283. }
  285. void CustomPoint::setPathItem(CustomPath *pathItem)
  286. {
  287.    mPathItem = pathItem;
  288. }
复制代码


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
豌畔丛
7 天前

0

粉丝关注

9

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫