Qt绘图详解.docx
- 文档编号:18467209
- 上传时间:2023-08-18
- 格式:DOCX
- 页数:21
- 大小:2.26MB
Qt绘图详解.docx
《Qt绘图详解.docx》由会员分享,可在线阅读,更多相关《Qt绘图详解.docx(21页珍藏版)》请在冰点文库上搜索。
Qt绘图详解
要在一张画布上画图形步骤:
1、先要建立一个图片视图的主窗口如工程名为BeautyView建好之后应该是这样的
包括工程文件,源文件,和界面文件。
2、自己定义一个自己的画布类如类名为Mycanvas它继承于QObject类,它的基类是QGraphicsScene(绘图场景)类。
创建如下图:
填好之后下面就直接下一步就行了。
创建好了应该是这样的
3、改变中央窗口的类,
打开之后在这个位置改成这样,则centralWidget是QSplitter类的对象。
QSplitter控件经常做为布局管理器使用,给用户提供更多的界面控制。
自己试试就知道它的好处了。
4、现在有了自己的画布,下面在画布上添加视角按钮控件,直接点开界面文件可以看到:
在右边选择这个绘图视角按钮拖3个放到放到窗口里面
成功是这样的:
分别点击每个视角更改名字,
名字改为后其中第一个为normalView正常视角第二个为scaleView放大视角
第三个为rotationView倒置视角。
设置完后保存就行了。
5、在主窗口中加上自己定义的画布:
在私有数据成员中定义一个画布类的对象
private:
Ui:
:
MainWindow*ui;
Mycanvascanvas;
这种就叫组合。
接着就要设置每个视角的属性:
在
下面写上
//每个视图以“独立的”视角观察"同一个"画布
ui->normalView->setScene(&canvas);//正常视图
ui->scaleView->setScene(&canvas);//放大视图
ui->scaleView->scale(1.5,1.5);//放大1.5倍可以改
ui->rotationView->setScene(&canvas);//旋转视图
ui->rotationView->rotate(90.0);//旋转90度可以改
6、先画一个椭圆
现在在mycanvas.h添加定义椭圆的类,QGraphicsEllipseItem。
在
protected:
QGraphicsEllipseItemellipseItem;//定义一个圆非抽象的子类
然后在mycanvas.cpp里面去实现这以后基本上就是这种模式:
//通过绘图项的setxxx()设置绘图属性
ellipseItem.setRect(80,50,100,80);//圆点坐标后面两个不相等为椭圆
ellipseItem.setBrush(QBrush(Qt:
:
green));
addItem(&ellipseItem);//将椭圆添加到数据结构里面去
7、上面对在画布上画一个椭圆的工作已经完成,下面就编译运行看一下效果:
这样一个椭圆就会出来了。
8、下面实现在这个椭圆里面实现画一串字符:
方法一样:
现在在mycanvas.h添加定义椭圆的类,QGraphicsTextItem
然后定义自己的对象QGraphicsTextItemTextItem;
在mycanvas.cpp里面在加上:
TextItem.setPlainText(
QString:
:
fromLocal8Bit("捣蛋猪"));
TextItem.setX(ellipseItem.x()+90);//显示的位置
TextItem.setY(ellipseItem.y()+90);
addItem(&ellipseItem);//将椭圆添加到数据结构里面去
addItem(&TextItem);//将字符串添加到数据结构里面去
9、然后编译看运行结果:
这样一串字符也画上去了。
下面可以做一个美女图片查看器:
要在画布上显示一张图片不能像上面显示简单图形那么简单了,本身图片是存放在文件夹中的,不是调用几个成员函数就能画出来的。
Qt提供了一种放法,就是将图片作为一种资源办法添加到模块中去(Beautyviewer)模块独立存在,这个资源里其实存的是图片文件的路径。
下面具体看程序怎么操作:
1、添加资源:
点选择进入下一步:
下一步:
完成后就出现:
2、找两张图片放到工程文件夹中:
打开资源文件点添加文件将这两个图片添加进去:
先要添加前缀,可以改的,如我将
改为
然后再添加图片:
2、下面开始写程序:
首先还要知道的一个东西,这个模块是没法直接去访问图片的,必须通过QPixmap类的对象去访问,QPixmap它是个位图文件(bmp)能够将不同格式的图片文件转换成统一像素的映射。
首先在mycanvas.h文件中添加图片类#include > 在成员中定义: protected: QGraphicsEllipseItemellipseItem;//定义一个圆非抽象的子类 QGraphicsTextItemTextItem; QGraphicsPixmapItemimageItem; QPixmapbeauty0;//定义QPixmap类的对象去访问图片文件 }; 3、根据上面所说的在.h文件定义的对象就要拿到.cpp里去实现 在 mycanvas.cpp里面: #include"mycanvas.h" Mycanvas: : Mycanvas(QObject*parent): QGraphicsScene(parent), beauty0(": /image/tu1.jpg")//把路径写上注意此处‘: ’千万不能少新增加的 { //通过会图项setxxx()设置绘图属性 ellipseItem.setRect(50,80,100,80);//圆点坐标后面两个不相等为椭圆 ellipseItem.setBrush(QBrush(Qt: : green)); TextItem.setPlainText( QString: : fromLocal8Bit("捣蛋猪")); TextItem.setX(ellipseItem.x()+90);//显示的位置 TextItem.setY(ellipseItem.y()+90); imageItem.setPixmap(beauty0);//将图片文件添加进去新增加的 imageItem.setPos(120,120);//设置坐标点新增加的 addItem(&ellipseItem);//将椭圆添加到数据结构里面去 addItem(&TextItem);//将字符串添加到数据结构里面去 addItem(&imageItem);//将图片添加到数据结构里面去新增加的 } 4、编译看效果: 此时美丽的兽兽展现我们面前。 在画布上先也就这么简单。 接下来要在这个的基础上继续完成一些功能。 一、实现点下鼠标完成换图片的功能 1、先将程序改装一下,把处理图片对象单独放在一个类中,因为后面要对图片进行很多操作。 如定义类名为BeautyItem它继承自QGraphicsPixmapItem类。 示意图为: 有了它就好办了, 添加类: 这里要说明一下这些绘图项的类都不继承Qobject. 记着就点下一步完成就行了。 2、创建好了开始写程序: 在beautyItem.h先定义Qpixmap的两个对象分别用来去访问2张图片的。 public: BeautyItem(); QPixmapbeauty0; QPixmapbeauty1; }; 在BeautyItem的构造函数里对QPixmap类的对象进行初始化: BeautyItem: : BeautyItem(): beauty0(": /image/tu1.jpg"),//初始化 beauty1(": /image/tu2.jpg") { setPixmap(beauty0);//将对象添加进去 setPos(140,140);//设置坐标点 } 下一步我们在 中增加BeautyItem类的数据成员这种叫组合为了调用BeautyItem: : BeautyItem();这个函数: #ifndefMYCANVAS_H #defineMYCANVAS_H #include #include #include #include #include classMycanvas: publicQGraphicsScene { Q_OBJECT public: explicitMycanvas(QObject*parent=0); signals: publicslots: protected: QGraphicsEllipseItemellipseItem;//定义一个圆非抽象的子类 QGraphicsTextItemTextItem; //QGraphicsPixmapItemimageItem; BeautyItemimageItem;//定义BeautyItem的对象这种都是组合的运用 /* 当定义BeautyItem的对象的是时候默认会调用BeautyItem的构造函数 BeautyItem: : BeautyItem(): beauty0(": /image/tu1.jpg"),//初始化 beauty1(": /image/tu2.jpg") { setPixmap(beauty0);//将图片文件添加进去 setPos(140,140);//设置坐标点 } 这样应该清楚了用派生的方法来实现 */ QPixmapbeauty0;//定义QPixmap类的对象去访问图片文件 }; #endif//MYCANVAS_H 在 中: #include"mycanvas.h" Mycanvas: : Mycanvas(QObject*parent): QGraphicsScene(parent) //beauty0(": /image/tu1.jpg")//已注释 { //通过会图项setxxx()设置绘图属性 ellipseItem.setRect(50,80,100,80);//圆点坐标后面两个不相等为椭圆 ellipseItem.setBrush(QBrush(Qt: : green)); TextItem.setPlainText( QString: : fromLocal8Bit("捣蛋猪")); TextItem.setX(ellipseItem.x()+90);//显示的位置 TextItem.setY(ellipseItem.y()+90); //imageItem.setPixmap(beauty0);//将图片文件添加进去已注释 //imageItem.setPos(140,140);//设置坐标点已注释 addItem(&ellipseItem);//将椭圆添加到数据结构里面去 addItem(&TextItem);//将字符串添加到数据结构里面去 addItem(&imageItem);//将图片添加到数据结构里面去 } 做了这么多工作下面看运行结果: 一样的可以打印出美丽的图片,这样改的目的是为了后面要多这个图片进行很多的操作,这样只需在处理图片BeautyItem类中改动就行了。 下面开始写点击鼠标切换图片的功能: 首先要知道这个鼠标事件我们怎么样来捕捉到它,Qt里面一般的是通过派生一个子类然后去覆写它的虚函数来实现。 下面具体看这种方法: 先要找到这个画布场景类QGraphicsScene的鼠标事件,因为我们现在是点击的是画布,所以是找它的鼠标事件: 先选中 然后按F1进入: 点击Event事件: 再点mousePressEvent()进入: 就找到这个虚函数了,把它复制到 中去: #ifndefBEAUTYITEM_H #defineBEAUTYITEM_H #include classBeautyItem: publicQGraphicsPixmapItem { public: /*通过派生一个子类覆写它的虚函数来捕捉它的它的事件 */ //捕捉它的鼠标事件 virtualvoidmousePressEvent(QGraphicsSceneMouseEvent*mouseEvent); BeautyItem(); QPixmapbeauty0; QPixmapbeauty1; boolduity;//用来切换图片的变量 }; #endif//BEAUTYITEM_H 然后在 去实现: #include"beautyitem.h" BeautyItem: : BeautyItem(): beauty0(": /image/tu1.jpg"),//初始化 beauty1(": /image/tu2.jpg"), duity(false)//初始值为假 { setPixmap(beauty0);//将对象添加进去 setPos(140,140);//设置坐标点 } //点击鼠标切换图片 voidBeautyItem: : mousePressEvent(QGraphicsSceneMouseEvent*mouseEvent) { duity=! duity; setPixmap((duity? beauty0: beauty1)); setPos(140,140);//设置坐标点 } 只需改动一点点就行了,加了一个鼠标事件函数,和一个bool变量用来切换图片。 编译看运行结果: 点击鼠标,注意要点在图片内: 这样就实现了切换,看着是否很简单,真正能够理解才行。 持续更新。 。 。 。 。 。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Qt 绘图 详解