QT5.14.2自带Examples：Diagram Scene
概要
本示例演示如何使用 Graphics View 框架创建流程图。
可以添加流程图形状和文本，并通过箭头连接形状，如上图所示。形状、箭头和文本可以被赋予不同的颜色，并且可以更改文本的字体、样式和下划线。
Qt Graphics View 框架旨在管理和显示自定义的2D图形项。框架的主要类是 QGraphicsItem, QGraphicsScene 和 QGraphicsView。QGraphicsScene 管理 QGraphicsItem 并为它们提供一个平面。QGraphicsView是一个widget，用于在屏幕上渲染场景。
该框架包括一个事件传播体系结构，允许对场景中的项目进行精确的双精度交互。项目可以处理关键事件、鼠标按下、移动、释放和双击事件，还可以跟踪鼠标移动。
Graphics View使用BSP（Binary Space Partitioning：二叉空间分割）树，它可以实时可视化大型场景，即使有数百万个项。
在本例中，我们将演示如何通过实现继承QGraphicScene和QGraphicsItem的类来创建此类自定义图形场景和项。
实现步骤
新建工程
添加资源文件
main函数
#include "mainwindow.h"
#include MainWindow-1框架
定义
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include 实现
#include "mainwindow.h"
#include ::of(&QButtonGroup::buttonClicked),
// this, &MainWindow::pointerGroupClicked);
sceneScaleCombo = new QComboBox;
QStringList scales;
scales << tr("50%") << tr("75%") << tr("100%") << tr("125%") << tr("150%");
sceneScaleCombo->addItems(scales);
sceneScaleCombo->setCurrentIndex(2);
// connect(sceneScaleCombo, &QComboBox::currentTextChanged,
// this, &MainWindow::sceneScaleChanged);
pointerToolbar = addToolBar(tr("Pointer type"));
pointerToolbar->addWidget(pointerButton);
pointerToolbar->addWidget(linePointerButton);
pointerToolbar->addWidget(sceneScaleCombo);
}
QIcon MainWindow::createColorToolButtonIcon(const QString &imageFile, QColor color)
{
QPixmap pixmap(50, 80);
pixmap.fill(Qt::transparent);
QPainter painter(&pixmap);
QPixmap image(imageFile);
//!start:在按钮上方水平居中绘制图标，下端再画一个颜色框。
//按钮上的区域
QRect target(4, 0, 42, 43);
//图片的区域
QRect source(0, 0, 42, 43);
//QRect(left, top, width, height)
//这里height写的80，实际上大于等于20效果都一样
painter.fillRect(QRect(0, 60, 50, 80), color);
//将源的给定像素的矩形部分,绘制到绘制设备中的给定目标区域。
painter.drawPixmap(target, image, source);
//!start:在按钮上方水平居中绘制图标，下端再画一个颜色框。
return QIcon(pixmap);
}
QMenu *MainWindow::createColorMenu(const char *slot, QColor defaultColor)
{
QList<QColor> colors;
colors << Qt::black << Qt::white << Qt::red << Qt::blue << Qt::yellow;
QStringList names;
names << tr("black") << tr("white") << tr("red") << tr("blue")
<< tr("yellow");
QMenu *colorMenu = new QMenu(this);
for (int i = 0; i < colors.count(); ++i) {
QAction *action = new QAction(names.at(i), this);
action->setData(colors.at(i));
action->setIcon(createColorIcon(colors.at(i)));
connect(action, SIGNAL(triggered()), this, slot);
colorMenu->addAction(action);
if (colors.at(i) == defaultColor)
colorMenu->setDefaultAction(action);
}
return colorMenu;
}
QIcon MainWindow::createColorIcon(QColor color)
{
QPixmap pixmap(20, 20);
QPainter painter(&pixmap);
painter.setPen(Qt::NoPen);
painter.fillRect(QRect(0, 0, 20, 20), color);
return QIcon(pixmap);
}
void MainWindow::about()
{
QMessageBox::about(this, tr("About Diagram Scene"),
tr("The Diagram Scene example shows "
"use of the graphics framework."));
}
void MainWindow::buttonGroupClicked(int id)
{
const QList<QAbstractButton *> buttons = buttonGroup->buttons();
for (QAbstractButton *button : buttons) {
if (buttonGroup->button(id) != button)
button->setChecked(false);
}
// if (id == InsertTextButton) {
// scene->setMode(DiagramScene::InsertText);
// } else {
// scene->setItemType(DiagramItem::DiagramType(id));
// scene->setMode(DiagramScene::InsertItem);
// }
}
void MainWindow::backgroundButtonGroupClicked(QAbstractButton *button)
{
const QList<QAbstractButton *> buttons = backgroundButtonGroup->buttons();
for (QAbstractButton *myButton : buttons) {
if (myButton != button)
button->setChecked(false);
}
QString text = button->text();
// if (text == tr("Blue Grid"))
// scene->setBackgroundBrush(QPixmap(":/images/background1.png"));
// else if (text == tr("White Grid"))
// scene->setBackgroundBrush(QPixmap(":/images/background2.png"));
// else if (text == tr("Gray Grid"))
// scene->setBackgroundBrush(QPixmap(":/images/background3.png"));
// else
// scene->setBackgroundBrush(QPixmap(":/images/background4.png"));
// scene->update();
// view->update();
}
QWidget *MainWindow::createBackgroundCellWidget(const QString &text, const QString &image)
{
QToolButton *button = new QToolButton;
//下面这行可以不需要
button->setText(text);
button->setIcon(QIcon(image));
button->setIconSize(QSize(50, 50));
button->setCheckable(true);
backgroundButtonGroup->addButton(button);
QGridLayout *layout = new QGridLayout;
layout->addWidget(button, 0, 0, Qt::AlignHCenter);
layout->addWidget(new QLabel(text), 1, 0, Qt::AlignCenter);
QWidget *widget = new QWidget;
widget->setLayout(layout);
return widget;
}
阶段运行效果：
通过参数指定图片和颜色，绘制出新的pixmap，当做Icon。这样每次切换颜色的时候，按钮的图标的颜色部分也会跟着变化。
ToolButton可以设置一个菜单
主体部分左边为一个ToolBox（包含两个widget，每个widget又包含一个ButtonGroup），右边为Scene。
DiagramItem
类定义
#ifndef DIAGRAMITEM_H
#define DIAGRAMITEM_H
#include 从类的成员变量可以很容易的分析出来，DiagramItem就是一个基本图元，需要存储，控制Item的形状类型、点数据、右键菜单、连接箭头。
实现
#include "diagramitem.h"
#include "arrow.h"
#include 三种基本图元，起点和终点是相同的位置，构成一个闭环的图形。
Arrow类
类定义
#ifndef ARROW_H
#define ARROW_H
#include 
类实现
#include "arrow.h"
#include "diagramitem.h"
#include 
DiagramTextItem 类
类定义
#ifndef DIAGRAMTEXTITEM_H
#define DIAGRAMTEXTITEM_H
#include 类实现
#include "diagramtextitem.h"
#include "diagramscene.h"
DiagramTextItem::DiagramTextItem(QGraphicsItem *parent)
: QGraphicsTextItem(parent)
{
setFlag(QGraphicsItem::ItemIsMovable);
setFlag(QGraphicsItem::ItemIsSelectable);
}
QVariant DiagramTextItem::itemChange(GraphicsItemChange change,
const QVariant &value)
{
if (change == QGraphicsItem::ItemSelectedHasChanged)
emit selectedChange(this);
return value;
}
void DiagramTextItem::focusOutEvent(QFocusEvent *event)
{
setTextInteractionFlags(Qt::NoTextInteraction);
emit lostFocus(this);
QGraphicsTextItem::focusOutEvent(event);
}
void DiagramTextItem::mouseDoubleClickEvent(QGraphicsSceneMouseEvent *event)
{
if (textInteractionFlags() == Qt::NoTextInteraction)
setTextInteractionFlags(Qt::TextEditorInteraction);
QGraphicsTextItem::mouseDoubleClickEvent(event);
}
DiagramScene 类
类定义
#ifndef DIAGRAMSCENE_H
#define DIAGRAMSCENE_H
#include "diagramitem.h"
#include "diagramtextitem.h"
#include 类实现
#include "diagramscene.h"
#include "arrow.h"
#include MainWindow类-2:完善
类定义
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include "diagramitem.h"
#include 类实现
#include "arrow.h"
#include "diagramitem.h"
#include "diagramscene.h"
#include "diagramtextitem.h"
#include "mainwindow.h"
#include