Qt 自定义流程图 diagram

前言

本文将对QGraphicsScene, QGraphicsView,QGraphicsItem这三个类进行简单介绍，并通过diagram流程图项目对自定义QGraphicsItem操作进行演示讲解。

程序执行效果

程序主界面

添加步骤

步骤删除

步骤连接

一键排序

程序源码下载

gitee

https://gitee.com/jiang_bin_yu/qt-diagram-jby

csdn

https://download.csdn.net/download/qq_37373742/87376898

图形视图框架成员介绍

QGraphicsScene, QGraphicsView,QGraphicsItem,分别是场景、视图和图元
1、场景：
QGraphicsScene场景类完成如下功能：

• 提供管理大量图元的快速接口
• 传播事件给场景中的每个图元
• 管理图元状态，如选择和焦点处理
• 提供无变换的绘制功能，如打印

2、视图：
QGraphicsView是视图窗口控件， 它使场景的内容可视化。可以连接几个视图到一个场景，也可以为相同的数据集提供几种不同的视口，
QGraphicsView是可滚动的窗口部件，如果需要使用OpenGL，使用QGrphicsView::setViewPort()将视口设置为QGLWidget。
视图接收键盘和鼠标的输入事件，并把它翻译为场景事件(将坐标转换为场景的坐标)，使用变换矩阵函数QGraphicsView::matrix()
可以变换场景的坐标，通过这种方法尅实现场景缩放和旋转。QGraphicsView::mapToScene()和QGraphicsView::mapFromScene()将
视图和场景的坐标进行转换。

3、图元：
QGraphicsItem是图元基类，QGraphics View框架提供了几种标准的图元。
如QGraphicsRectItem、QGraphicsEllipseItem,QGraphicsTextItem等，可以继承QGraphicsItem实现符合自己需要的图元。
QGraphicsItem功能：

• 处理鼠标按下、移动、释放、双击、悬停、滚轮和右键菜单事件
• 处理键盘输入事件
• 处理拖放事件
• 分组
• 碰撞检测

重写QGraphicsItem

要编写自己的图形项，首先要创建QGraphicsItem的子类，然后从实现它的两个纯虚拟公共函数开始：
**boundingRect()**它返回该项绘制的区域的估计值
**paint()**实现实际绘制。
QGraphicsScene基于boundingRect()建立其项索引，QGraphicsView使用它来剔除不可见项，以及确定绘制重叠项时需要重新编译的区域。此外，QGraphicsItem的碰撞检测机制使用boundingRect()提供有效的截止点
QGraphicScene希望所有boundingRect()和shape()项保持不变，除非通知它。如果要以任何方式更改项的几何图形，必须首先调用prepareGeometryChange()以允许QgraphicsScene更新其记账。

程序源码介绍

图元：arrow 继承父类 QGraphicsLineItem 功能：绘制步骤箭头
图元：DiagramPixmapItem 继承父类 QGraphicsPixmapItem 功能：功能按钮/流程按钮图元
视图：DiagramView 继承父类QGraphicsView
场景：DiagramScene 继承父类 QGraphicsScene 功能：管理场景内图元

重点代码

实例化功能图元和步骤图元并放在在指定位置

 //功能栏
    for(int i=0; i<4; i++)
    {
        setMode(DiagramScene::InsertItem);

        DiagramPixmapItem* item = new DiagramPixmapItem(m_itemPix.at(i),m_itemName.at(i),QSize(107,157),true);
        QPointF point = QPointF(0+(item->pixmap().width()+27)*i,20);
        connect(item,&DiagramPixmapItem::ItemIsPressed,this,&DiagramScene::slot_itemSelect);

        addItem(item);
        item->setPos(point);
        vParentItems.append(item);
    }
    //步骤栏
    for(int i=4; i<7; i++)
    {
        setMode(DiagramScene::InsertItem);

        DiagramPixmapItem* item = new DiagramPixmapItem(m_itemPix.at(i),m_itemName.at(i),QSize(107,157),true);
        QPointF point = QPointF(0,(item->pixmap().height()+item->getTextHeight()+27)*(i-2)-77);
        connect(item,&DiagramPixmapItem::ItemIsPressed,this,&DiagramScene::slot_itemSelect);

        addItem(item);
        item->setPos(point);
        vParentItems.append(item);
    }

设置当前功能

功能包含：
InsertItem 插入步骤图元
InsertLine 插入连接箭头图元
MoveItem 移动图元
DeleteItem  删除图元
 enum Mode { InsertItem, InsertLine, MoveItem,DeleteItem };
 //设置当前功能
 void DiagramScene::setMode(Mode mode)
{
    myMode = mode;
}

根据点击功能栏的功能图元执行相应动作

//设置下一次将要添加的步骤
void DiagramScene::slot_itemSelect()
{
    currentSelectItem = (DiagramPixmapItem*)sender();
    if(currentSelectItem->getMyText() == "连接")
    {
        setMode(DiagramScene::InsertLine);
    }
    else if(currentSelectItem->getMyText() == "删除")
    {
        setMode(DiagramScene::DeleteItem);
    }
    else if(currentSelectItem->getMyText() == "移动")
    {
        setMode(DiagramScene::MoveItem);
    }
    else if(currentSelectItem->getMyText() == "一键排序")
    {
        qDebug() << "一键排序";
        setMode(DiagramScene::MoveItem);
        QList<DiagramPixmapItem*> newSortItems;    //根据箭头从新排序
        DiagramPixmapItem* firstItem = nullptr;       //最开始的流程
        //找到最开始的流程
        for(int i=0; i<vEditItems.size(); i++)
        {
            if(vEditItems.at(i)->getArrowSize() == 1)
            {
                Arrow* m_arrow = vEditItems.at(i)->getArrow().at(0);
                if(m_arrow->startItem() == vEditItems.at(i))
                {
                    firstItem = vEditItems.at(i);
                    qDebug() << "开始流程是" << vEditItems.at(i)->getMyText();
                }
            }
        }
        if(firstItem != nullptr)
        {
            SortPixmapItemByArrow(firstItem,&newSortItems); //根据箭头方向按顺序添加item
            //将无箭头的item 添加到 newSortItems后面
            foreach (DiagramPixmapItem* p, vEditItems) {
                if(p->getArrowSize() == 0)
                    newSortItems.append(p);
            }
            vEditItems = newSortItems;
        }

        //根据箭头方向排序
        for(int i=0; i<vEditItems.size(); i++)
        {
            if(i<vPosition.size())
                vEditItems.at(i)->setPos(vPosition.at(i));
        }
    }
    else
        setMode(DiagramScene::InsertItem);
}

通过鼠标事件完成 图元插入 图元连接 图元删除等功能

void DiagramScene::mousePressEvent(QGraphicsSceneMouseEvent *mouseEvent)
{
    //qDebug() << "press pos" << mouseEvent->scenePos();
    if (mouseEvent->button() != Qt::LeftButton)
        return;
    DiagramItem *item;
    switch (myMode) {
    case InsertItem:{
        if(mouseEvent->scenePos().x() < 200)
        {
            setMode(MoveItem);
            qDebug() << "步骤选择区，不能添加步骤";
            return QGraphicsScene::mousePressEvent(mouseEvent);
        }
        DiagramPixmapItem* item = new DiagramPixmapItem(currentSelectItem->getMyPixmapPath(),currentSelectItem->getMyText(),QSize(107,157));
        connect(item,&DiagramPixmapItem::ItemIsPressed,this,&DiagramScene::slot_itemSelect);
        item->setPos(mouseEvent->scenePos());
        addItem(item);
        vEditItems.append(item);
        if(vEditItems.size() >= 2)
        {
            line = new QGraphicsLineItem(QLineF(vEditItems.at(vEditItems.size()-2)->scenePos(),
                                                vEditItems.at(vEditItems.size()-1)->scenePos()));
            line->setPen(QPen(myLineColor, 2));
        }
        addItem(line);
        autoAddArrow();
        //qDebug() << "insert item at: " << mouseEvent->scenePos();
        hasItemSelected = itemAt(mouseEvent->scenePos(), QTransform()) != nullptr;
        setMode(MoveItem);
        clearAllSelectParentItem();
        break;
    }
    case InsertLine:
    {
        if (itemAt(mouseEvent->scenePos(), QTransform()) == nullptr) break;//绘制线的起始点 没有落在item上则无效
        //父类Item 不画线
        DiagramPixmapItem *pixItem = qgraphicsitem_cast<DiagramPixmapItem *>(itemAt(mouseEvent->scenePos(), QTransform()));
        if(pixItem->isParentFlag())
            return QGraphicsScene::mousePressEvent(mouseEvent);

        line = new QGraphicsLineItem(QLineF(mouseEvent->scenePos(),
                                            mouseEvent->scenePos()));
        line->setPen(QPen(myLineColor, 2));
        addItem(line);
        break;
    }
    case DeleteItem:
    {
        hasItemSelected = itemAt(mouseEvent->scenePos(), QTransform()) != nullptr;
        if(hasItemSelected)
        {
            deleteItems(QList<QGraphicsItem*>() << itemAt(mouseEvent->scenePos(), QTransform()));
        }
        break;
    }
    default:
        hasItemSelected = itemAt(mouseEvent->scenePos(), QTransform()) != nullptr;
    }
    QGraphicsScene::mousePressEvent(mouseEvent);
}