Qt绘图详解.docx

Qt绘图详解要在一张画布上画图形步骤： 1、 先要建立一个图片视图的主窗口 如工程名为BeautyView建好之后应该是这样的 包括工程文件，源文件，和界面文件。 2、 自己定义一个自己的画布类 如类名为Mycanvas它继承于QObject类，它的基类是QGraphicsScene(绘图场景)类。创建如下图： 填好之后下面就直接下一步就行了。创建好了应该是这样的 3、 改变中央窗口的类， 打开之后在这个位置改成这样，则centralWidget是QSplitter类的对象。 QSplitter控件经常做为布局管理器使用，给用户提供更多的界面控制。自己试试就知道它的好处了。 4、 现在有了自己的画布，下面在画布上添加视角按钮控件，直接点开界面文件可以看到： 在右边选择这个绘图视角按钮 拖3个放到放到窗口里面 成功是这样的： 分别点击每个视角更改名字，名字改为后 其中第一个为normalView 正常视角第二个为scaleView 放大视角 第三个为rotationView 倒置视角。设置完后保存就行了。 5、 在主窗口中加上自己定义的画布： 在私有数据成员中定义一个画布类的对象 private: Ui:MainWindow *ui; Mycanvas canvas; 这种就叫组合。 接着就要设置每个视角的属性： 在下面写上 /每个视图以 “独立的” 视角观察 "同一个" 画布 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: QGraphicsEllipseItem ellipseItem; /定义一个圆 非抽象的子类 然后在mycanvas.cpp 里面去实现 这以后基本上就是这种模式： / 通过绘图项的 setxxx设置绘图属性 ellipseItem.setRect(80, 50, 100, 80); /圆点坐标 后面两个不相等为椭圆 ellipseItem.setBrush(QBrush(Qt:green); addItem(&ellipseItem); /将椭圆添加到数据结构里面去 7、 上面对在画布上画一个椭圆的工作已经完成，下面就编译运行看一下效果： 这样一个椭圆就会出来了。 8、 下面实现在这个椭圆里面实现画一串字符： 方法一样： 现在在mycanvas.h添加定义椭圆的类，QGraphicsTextItem 然后定义自己的对象QGraphicsTextItem TextItem; 在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 <QGraphicsPixmapItem > 在成员中定义： protected: QGraphicsEllipseItem ellipseItem; /定义一个圆 非抽象的子类 QGraphicsTextItem TextItem; QGraphicsPixmapItem imageItem; QPixmap beauty0; /定义QPixmap类的对象去访问图片文件 ; 3、 根据上面所说的在.h文件定义的对象就要拿到.cpp里去实现 在 mycanvas.cpp里面： #include "mycanvas.h" Mycanvas:Mycanvas(QObject *parent) : QGraphicsScene(parent), beauty0(":/image/tu1.jpg") / 把路径写上 注意此处:千万不能少 新增加的 /通过会图项 set xxx 设置绘图属性 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; QPixmap beauty0; QPixmap beauty1; ; 在BeautyItem的构造函数里对QPixmap类的对象进行初始化： BeautyItem:BeautyItem: beauty0(":/image/tu1.jpg"), /初始化 beauty1(":/image/tu2.jpg") setPixmap(beauty0); /将对象添加进去 setPos(140,140); /设置坐标点 下一步 我们在中增加BeautyItem类的数据成员这种叫组合为了调用BeautyItem:BeautyItem；这个函数： #ifndef MYCANVAS_H #define MYCANVAS_H #include <QGraphicsScene> #include <QGraphicsEllipseItem> #include <QGraphicsTextItem> #include <QGraphicsPixmapItem> #include <beautyitem.h> /要增加BeautyItem类的数据成员当然要包含头文件 class Mycanvas : public QGraphicsScene Q_OBJECT public: explicit Mycanvas(QObject *parent = 0); signals: public slots: protected: QGraphicsEllipseItem ellipseItem; /定义一个圆 非抽象的子类 QGraphicsTextItem TextItem; / QGraphicsPixmapItem imageItem; BeautyItem imageItem; /定义BeautyItem的对象这种都是组合的运用 /* 当定义BeautyItem的对象的是时候默认会调用BeautyItem的构造函数 BeautyItem:BeautyItem: beauty0(":/image/tu1.jpg"), /初始化 beauty1(":/image/tu2.jpg") setPixmap(beauty0); /将图片文件添加进去 setPos(140,140); /设置坐标点 这样应该清楚了 用派生的方法来实现 */ QPixmap beauty0; /定义QPixmap类的对象去访问图片文件 ; #endif / MYCANVAS_H 在中： #include "mycanvas.h" Mycanvas:Mycanvas(QObject *parent) : QGraphicsScene(parent) / beauty0(":/image/tu1.jpg") /已注释 /通过会图项 set xxx 设置绘图属性 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进入： 就找到这个虚函数了，把它复制到中去： #ifndef BEAUTYITEM_H #define BEAUTYITEM_H #include <QGraphicsPixmapItem> class BeautyItem : public QGraphicsPixmapItem public: /*通过派生一个子类覆写它的虚函数来捕捉它的它的事件 */ /捕捉它的鼠标事件 virtual void mousePressEvent ( QGraphicsSceneMouseEvent * mouseEvent ); BeautyItem; QPixmap beauty0; QPixmap beauty1; bool duity; /用来切换图片的变量 ; #endif / BEAUTYITEM_H 然后在去实现： #include "beautyitem.h" BeautyItem:BeautyItem: beauty0(":/image/tu1.jpg"), /初始化 beauty1(":/image/tu2.jpg"), duity(false) /初始值为假 setPixmap(beauty0); /将对象添加进去 setPos(140,140); /设置坐标点 /点击鼠标切换图片 void BeautyItem:mousePressEvent ( QGraphicsSceneMouseEvent * mouseEvent ) duity = !duity; setPixmap(duity?beauty0:beauty1); setPos(140,140); /设置坐标点 只需改动一点点就行了，加了一个鼠标事件函数，和一个bool变量用来切换图片。 编译看运行结果： 点击鼠标，注意要点在图片内： 这样就实现了切换，看着是否很简单，真正能够理解才行。 持续更新。