Qt Graphics View 绘图实例
这个实例程序实现如下功能:
- 可以创建矩形、椭圆、三角形、梯形、直线、文字等基本图形。
- 每个图形项都可以被选择和移动。
- 图形项或整个视图可以缩放和旋转。
- 图形项重叠时,可以调整前置或后置。
- 多个图形项可以组合,也可以解散组合。
- 可以删除选择的图形项。
- 鼠标在视图上移动时,会在状态栏显示视图坐标和场景坐标。
- 鼠标单击某个图形是,会显示图形项的局部坐标,也会显示图形项的文字描述和编号。
- 双击某个图形项时,会显示图形项的类型调用颜色对话框,设置图形项的填充颜色、线条颜色或文字的字体。
- 选中某个图形项时,可以进行按键操作,Delete 键删除图形项,PageUp 放大, PageDn 缩小,空格键旋转90°,上下左右光标键移动图形项。
"QWGraphicsView.h" 头文件代码如下:
#pragma once#include <QGraphicsView>#include <QObject>class QWGraphicsView : public QGraphicsView
{Q_OBJECTpublic:QWGraphicsView(QWidget *parent);~QWGraphicsView();protected:void mouseMoveEvent(QMouseEvent *event);void mousePressEvent(QMouseEvent *event);void mouseDoubleClickEvent(QMouseEvent *event);void keyPressEvent(QKeyEvent *event);signals:void mouseMovePoint(QPoint point);//鼠标移动void mouseClicked(QPoint point);//鼠标单击void mouseDoubleClick(QPoint point);//双击事件void keyPress(QKeyEvent *event);//按键事件};
QWGraphicsView 类的 4个事件的实现代码,在每个事件里发射相应的信号。在QWGraphicsView 类里,将鼠标和键盘事件转换为信号,就可以利用信号与槽机制,在主程序里设计槽函数相对应的鼠标和键盘操作进行响应。
鼠标移动事件、鼠标左键按下事件、鼠标双击事件、按键事件
"QWGraphicsView.cpp" 文件代码如下:
#include "QWGraphicsView.h"#include <QMouseEvent>
#include <QPoint>//解决QT中中文显示乱码问题
#pragma execution_character_set("utf-8")QWGraphicsView::QWGraphicsView(QWidget *parent): QGraphicsView(parent)
{
}QWGraphicsView::~QWGraphicsView()
{
}//鼠标移动事件
void QWGraphicsView::mouseMoveEvent(QMouseEvent *event)
{//QPoint point;QPoint point = event->pos();//QGraphicsView的坐标emit mouseMovePoint(point); //释放信号QGraphicsView::mouseMoveEvent(event);
}//鼠标左键按下事件
void QWGraphicsView::mousePressEvent(QMouseEvent *event)
{if (event->button() == Qt::LeftButton){//QPoint point;QPoint point = event->pos();//QGraphicsView的坐标emit mouseClicked(point);//释放信号}QGraphicsView::mousePressEvent(event);
}//鼠标双击事件
void QWGraphicsView::mouseDoubleClickEvent(QMouseEvent *event)
{if (event->button() == Qt::LeftButton){//QPoint point;QPoint point = event->pos(); //QGraphicsView的坐标emit mouseDoubleClick(point);//释放信号}QGraphicsView::mouseDoubleClickEvent(event);
}//按键事件
void QWGraphicsView::keyPressEvent(QKeyEvent *event)
{emit keyPress(event);QGraphicsView::keyPressEvent(event);
}
"sample8_5QGraphicsDraw.h" 头文件代码如下:
#pragma once#include <QtWidgets/QMainWindow>
#include "ui_sample8_5QGraphicsDraw.h"#include <QLabel>
#include <QGraphicsScene>class sample8_5QGraphicsDraw : public QMainWindow
{Q_OBJECTpublic:sample8_5QGraphicsDraw(QWidget *parent = Q_NULLPTR);private:Ui::sample8_5QGraphicsDrawClass ui;private:static const int ItemId = 1;//绘图项自定义数据的keystatic const int ItemDesciption = 2;//绘图项自定义数据的keyint seqNum = 0;int backZ = 0;int frontZ = 0;QGraphicsScene *scene;QLabel *labViewCord;QLabel *labSceneCord;QLabel *labItemCord;QLabel *labItemInfo;private slots:void on_mouseMovePoint(QPoint point);//鼠标移动void on_mouseClicked(QPoint point);//鼠标单击void on_mouseDoubleClick(QPoint point);//鼠标双击void on_keyPress(QKeyEvent *event);//按键void on_actItem_Rect_triggered();void on_actItem_Ellipse_triggered();void on_actItem_Polygon_triggered();void on_actEdit_Delete_triggered();void on_actZoomIn_triggered();void on_actZoomOut_triggered();void on_actRestore_triggered();void on_actRotateLeft_triggered();void on_actRotateRight_triggered();void on_actEdit_Front_triggered();void on_actEdit_Back_triggered();void on_actItem_Line_triggered();void on_actItem_Text_triggered();void on_actGroup_triggered();void on_actGroupBreak_triggered();void on_actItem_Circle_triggered();void on_actItem_Triangle_triggered();
};
#include "sample8_5QGraphicsDraw.h"#include <QGraphicsRectItem>
#include <QInputDialog>
#include <QColorDialog>
#include <QFontDialog>
#include <QTime>
#include <QKeyEvent>//解决QT中中文显示乱码问题
#pragma execution_character_set("utf-8")//函数模板
template<class T> void setBrushColor(T *item)
{QColor color = item->brush().color();color = QColorDialog::getColor(color, NULL, "选择填充颜色");if (color.isValid()){item->setBrush(QBrush(color));}
}sample8_5QGraphicsDraw::sample8_5QGraphicsDraw(QWidget *parent)
: QMainWindow(parent)
{ui.setupUi(this);labViewCord = new QLabel("View 坐标:"); //创建状态栏标签labViewCord->setMinimumWidth(150);ui.statusBar->addWidget(labViewCord);labSceneCord = new QLabel("Scene 坐标:");labSceneCord->setMinimumWidth(150);ui.statusBar->addWidget(labSceneCord);labItemCord = new QLabel("Item 坐标:");labItemCord->setMinimumWidth(150);ui.statusBar->addWidget(labItemCord);labItemInfo = new QLabel("ItemInfo: ");labItemInfo->setMinimumWidth(200);ui.statusBar->addWidget(labItemInfo);scene = new QGraphicsScene(-300, -200, 600, 200); //创建QGraphicsSceneui.View->setScene(scene); //与view关联//ui.View->setDragMode(QGraphicsView::RubberBandDrag);ui.View->setCursor(Qt::CrossCursor); //设置鼠标ui.View->setMouseTracking(true); //ui.View->setDragMode(QGraphicsView::RubberBandDrag);this->setCentralWidget(ui.View);QObject::connect(ui.View, SIGNAL(mouseMovePoint(QPoint)),this, SLOT(on_mouseMovePoint(QPoint)));QObject::connect(ui.View, SIGNAL(mouseClicked(QPoint)),this, SLOT(on_mouseClicked(QPoint)));QObject::connect(ui.View, SIGNAL(mouseDoubleClick(QPoint)),this, SLOT(on_mouseDoubleClick(QPoint)));QObject::connect(ui.View, SIGNAL(keyPress(QKeyEvent*)),this, SLOT(on_keyPress(QKeyEvent*)));qsrand(QTime::currentTime().second());
}
鼠标移动事件,point是 GraphicsView的坐标,物理坐标
//鼠标移动事件,point是 GraphicsView的坐标,物理坐标
void sample8_5QGraphicsDraw::on_mouseMovePoint(QPoint point)
{labViewCord->setText(QString::asprintf("View 坐标:%d,%d", point.x(), point.y()));QPointF pointScene = ui.View->mapToScene(point); //转换到Scene坐标labSceneCord->setText(QString::asprintf("Scene 坐标:%.0f,%.0f", pointScene.x(), pointScene.y()));
}
鼠标单击事件
//鼠标单击事件
void sample8_5QGraphicsDraw::on_mouseClicked(QPoint point)
{QPointF pointScene = ui.View->mapToScene(point); //转换到Scene坐标QGraphicsItem *item = NULL;item = scene->itemAt(pointScene, ui.View->transform()); //获取光标下的绘图项if (item != NULL) //有绘图项{QPointF pointItem = item->mapFromScene(pointScene); //转换为绘图项的局部坐标labItemCord->setText(QString::asprintf("Item 坐标:%.0f,%.0f", pointItem.x(), pointItem.y()));labItemInfo->setText(item->data(ItemDesciption).toString() + ", ItemId=" +item->data(ItemId).toString());}
}
鼠标双击事件,调用相应的对话框,设置填充颜色、线条颜色或字体
//鼠标双击事件,调用相应的对话框,设置填充颜色、线条颜色或字体
void sample8_5QGraphicsDraw::on_mouseDoubleClick(QPoint point)
{QPointF pointScene = ui.View->mapToScene(point); //转换到Scene坐标QGraphicsItem *item = NULL;item = scene->itemAt(pointScene, ui.View->transform()); //获取光标下的绘图项if (item == NULL) //没有绘图项return;switch (item->type()) //绘图项的类型{case QGraphicsRectItem::Type: //矩形框{//强制类型转换QGraphicsRectItem *theItem = qgraphicsitem_cast<QGraphicsRectItem*>(item);setBrushColor(theItem);break;}case QGraphicsEllipseItem::Type: //椭圆和圆都是 QGraphicsEllipseItem{QGraphicsEllipseItem *theItem;theItem = qgraphicsitem_cast<QGraphicsEllipseItem*>(item);setBrushColor(theItem);break;}case QGraphicsPolygonItem::Type: //梯形和三角形{QGraphicsPolygonItem *theItem = qgraphicsitem_cast<QGraphicsPolygonItem*>(item);setBrushColor(theItem);break;}case QGraphicsLineItem::Type: //直线,设置线条颜色{QGraphicsLineItem *theItem = qgraphicsitem_cast<QGraphicsLineItem*>(item);QPen pen = theItem->pen();QColor color = theItem->pen().color();color = QColorDialog::getColor(color, this, "选择线条颜色");if (color.isValid()){pen.setColor(color);theItem->setPen(pen);}break;}case QGraphicsTextItem::Type: //文字,设置字体{QGraphicsTextItem *theItem = qgraphicsitem_cast<QGraphicsTextItem*>(item);QFont font = theItem->font();bool ok = false;font = QFontDialog::getFont(&ok, font, this, "设置字体");if (ok)theItem->setFont(font);break;}}
}
按键事件
//按键事件
void sample8_5QGraphicsDraw::on_keyPress(QKeyEvent *event)
{ if (scene->selectedItems().count() != 1){return; //没有选中的绘图项,或选中的多于1个}QGraphicsItem *item = scene->selectedItems().at(0);if (event->key() == Qt::Key_Delete)//删除scene->removeItem(item);else if (event->key() == Qt::Key_Space) //顺时针旋转90度item->setRotation(90 + item->rotation());else if (event->key() == Qt::Key_PageUp)//放大item->setScale(0.1 + item->scale());else if (event->key() == Qt::Key_PageDown) //缩小item->setScale(-0.1 + item->scale());else if (event->key() == Qt::Key_Left) //左移item->setX(-1 + item->x());else if (event->key() == Qt::Key_Right) //右移item->setX(1 + item->x());else if (event->key() == Qt::Key_Up) //上移item->setY(-1 + item->y());else if (event->key() == Qt::Key_Down) //下移item->setY(1 + item->y());
}
添加一个矩形
//添加一个矩形
void sample8_5QGraphicsDraw::on_actItem_Rect_triggered()
{QGraphicsRectItem *item = new QGraphicsRectItem(-50, -25, 100, 50);//x,y 为左上角的图元局部坐标,图元中心点为0,0item->setFlags(QGraphicsItem::ItemIsMovable| QGraphicsItem::ItemIsSelectable| QGraphicsItem::ItemIsFocusable);item->setBrush(QBrush(Qt::yellow));item->setZValue(++frontZ);item->setPos(-50 + (qrand() % 100), -50 + (qrand() % 100));item->setData(ItemId, ++seqNum);item->setData(ItemDesciption, "矩形");scene->addItem(item);scene->clearSelection();item->setSelected(true);
}
添加一个椭圆
//添加一个椭圆
void sample8_5QGraphicsDraw::on_actItem_Ellipse_triggered()
{QGraphicsEllipseItem *item = new QGraphicsEllipseItem(-50, -30, 100, 60);item->setFlags(QGraphicsItem::ItemIsMovable| QGraphicsItem::ItemIsSelectable| QGraphicsItem::ItemIsFocusable);item->setBrush(QBrush(Qt::blue)); //填充颜色item->setZValue(++frontZ); //用于叠放顺序item->setPos(-50 + (qrand() % 100), -50 + (qrand() % 100)); //初始位置item->setData(ItemId, ++seqNum); //自定义数据,ItemId键item->setData(ItemDesciption, "椭圆"); //自定义数据,ItemDesciption键scene->addItem(item);scene->clearSelection();item->setSelected(true);
}
添加一个梯形
//添加一个梯形
void sample8_5QGraphicsDraw::on_actItem_Polygon_triggered()
{QGraphicsPolygonItem *item = new QGraphicsPolygonItem;QPolygonF points;points.append(QPointF(-40, -40));points.append(QPointF(40, -40));points.append(QPointF(100, 40));points.append(QPointF(-100, 40));item->setPolygon(points);item->setPos(-50 + (qrand() % 100), -50 + (qrand() % 100));item->setFlags(QGraphicsItem::ItemIsMovable| QGraphicsItem::ItemIsSelectable| QGraphicsItem::ItemIsFocusable);item->setBrush(QBrush(Qt::green));item->setZValue(++frontZ);item->setData(ItemId, ++seqNum);item->setData(ItemDesciption, "梯形");scene->addItem(item);scene->clearSelection();item->setSelected(true);
}
删除所有选中的绘图项
//删除所有选中的绘图项
void sample8_5QGraphicsDraw::on_actEdit_Delete_triggered()
{ int cnt = scene->selectedItems().count();if (cnt > 0)for (int i = 0; i < cnt; i++){QGraphicsItem* item = scene->selectedItems().at(0);scene->removeItem(item); //删除绘图项}
}
放大
//放大
void sample8_5QGraphicsDraw::on_actZoomIn_triggered()
{int cnt = scene->selectedItems().count();if (cnt == 1){QGraphicsItem *item;item = scene->selectedItems().at(0);item->setScale(0.1 + item->scale());}else{ui.View->scale(1.1, 1.1);}
}
缩小
//缩小
void sample8_5QGraphicsDraw::on_actZoomOut_triggered()
{int cnt = scene->selectedItems().count();if (cnt == 1){QGraphicsItem *item;item = scene->selectedItems().at(0);item->setScale(item->scale() - 0.1);}else{ui.View->scale(0.9, 0.9);}
}
取消所有变换
//取消所有变换
void sample8_5QGraphicsDraw::on_actRestore_triggered()
{int cnt = scene->selectedItems().count();if (cnt == 1){QGraphicsItem* item = scene->selectedItems().at(0);// item->resetTransform(); //不起作用item->setRotation(0);item->setScale(1.0);}else{ui.View->resetTransform();}
}
逆时针旋转、顺时针旋转
//逆时针旋转
void sample8_5QGraphicsDraw::on_actRotateLeft_triggered()
{int cnt = scene->selectedItems().count();if (cnt == 1){QGraphicsItem* item = scene->selectedItems().at(0);item->setRotation(-30 + item->rotation());}else{ui.View->rotate(-30);}
}
//顺时针旋转
void sample8_5QGraphicsDraw::on_actRotateRight_triggered()
{int cnt = scene->selectedItems().count();if (cnt == 1){QGraphicsItem* item = scene->selectedItems().at(0);item->setRotation(+30 + item->rotation());}else{ui.View->rotate(+30);}
}
前置、后置
//bring to front,前置
void sample8_5QGraphicsDraw::on_actEdit_Front_triggered()
{int cnt = scene->selectedItems().count();if (cnt > 0){ //只处理选中的第1个绘图项QGraphicsItem* item = scene->selectedItems().at(0);item->setZValue(++frontZ);}
}//bring to back,后置
void sample8_5QGraphicsDraw::on_actEdit_Back_triggered()
{int cnt = scene->selectedItems().count();if (cnt > 0){//只处理选中的第1个绘图项QGraphicsItem* item = scene->selectedItems().at(0);item->setZValue(--backZ);}}
添加直线
//添加直线
void sample8_5QGraphicsDraw::on_actItem_Line_triggered()
{QGraphicsLineItem *item = new QGraphicsLineItem(-100, 0, 100, 0);//x,y 为左上角的图元局部坐标,图元中心点为0,0item->setFlags(QGraphicsItem::ItemIsMovable| QGraphicsItem::ItemIsSelectable| QGraphicsItem::ItemIsFocusable);QPen pen(Qt::red);pen.setWidth(3);item->setPen(pen);item->setZValue(++frontZ);item->setPos(-50 + (qrand() % 100), -50 + (qrand() % 100));item->setData(ItemId, ++seqNum);item->setData(ItemDesciption, "直线");scene->addItem(item);scene->clearSelection();item->setSelected(true);
}
添加文字
//添加文字
void sample8_5QGraphicsDraw::on_actItem_Text_triggered()
{ QString str = QInputDialog::getText(this, "输入文字", "请输入文字");if (str.isEmpty()){return;}QGraphicsTextItem *item = new QGraphicsTextItem(str);QFont font = this->font();font.setPointSize(20);font.setBold(true);item->setFont(font);item->setFlags(QGraphicsItem::ItemIsMovable| QGraphicsItem::ItemIsSelectable| QGraphicsItem::ItemIsFocusable);item->setPos(-50 + (qrand() % 100), -50 + (qrand() % 100));item->setZValue(++frontZ);item->setData(ItemId, ++seqNum);item->setData(ItemDesciption, "文字");scene->addItem(item);scene->clearSelection();item->setSelected(true);
}
添加圆形、添加三角形
//添加圆形
void sample8_5QGraphicsDraw::on_actItem_Circle_triggered()
{ QGraphicsEllipseItem *item = new QGraphicsEllipseItem(-50, -50, 100, 100);item->setFlags(QGraphicsItem::ItemIsMovable| QGraphicsItem::ItemIsSelectable| QGraphicsItem::ItemIsFocusable);item->setBrush(QBrush(Qt::cyan));item->setZValue(++frontZ);item->setPos(-50 + (qrand() % 100), -50 + (qrand() % 100));item->setData(ItemId, ++seqNum);item->setData(ItemDesciption, "圆形");scene->addItem(item);scene->clearSelection();item->setSelected(true);
}//添加三角形
void sample8_5QGraphicsDraw::on_actItem_Triangle_triggered()
{ QGraphicsPolygonItem *item = new QGraphicsPolygonItem;QPolygonF points;points.append(QPointF(0, -40));points.append(QPointF(60, 40));points.append(QPointF(-60, 40));item->setPolygon(points);item->setPos(-50 + (qrand() % 100), -50 + (qrand() % 100));item->setFlags(QGraphicsItem::ItemIsMovable| QGraphicsItem::ItemIsSelectable| QGraphicsItem::ItemIsFocusable);item->setBrush(QBrush(Qt::magenta));item->setZValue(++frontZ);item->setData(ItemId, ++seqNum);item->setData(ItemDesciption, "三角形");scene->addItem(item);scene->clearSelection();item->setSelected(true);
}
组合、打散组合
//组合
void sample8_5QGraphicsDraw::on_actGroup_triggered()
{ int cnt = scene->selectedItems().count();if (cnt > 1){QGraphicsItemGroup* group = new QGraphicsItemGroup; //创建组合scene->addItem(group); //组合添加到场景中for (int i = 0; i < cnt; i++){QGraphicsItem* item = scene->selectedItems().at(0);item->setSelected(false); //清除选择虚线框item->clearFocus();group->addToGroup(item); //添加到组合}group->setFlags(QGraphicsItem::ItemIsMovable| QGraphicsItem::ItemIsSelectable| QGraphicsItem::ItemIsFocusable);group->setZValue(++frontZ);//group->clearFocus();scene->clearSelection();group->setSelected(true);}
}//break group,打散组合
void sample8_5QGraphicsDraw::on_actGroupBreak_triggered()
{int cnt = scene->selectedItems().count();if (cnt == 1){QGraphicsItemGroup *group;group = (QGraphicsItemGroup*)scene->selectedItems().at(0);scene->destroyItemGroup(group);}
}
《Qt5/6 C++开发指南》