lesson10-QT二维图形绘制

一、 画图
1、QPainter
Qt中定义了几种绘图设备，如QWidget、QPainter、QPixmap等等。他们都继承自QPaintDevice
QPainter提供了许多高度优化的函数去完成GUI画图工作，可以画简单的或者复杂的图形。QPainter使用QWIdget的painter事件来画图，事件处理函数是paintEvent(QPaintEvent *e)
画图时首先要有一个QPainter实例
QPainter p；
启动画图功能,参数指定画图的父控件
p.begin(this)；
开始画图
p.drawRect(QRect r);
关闭画图功能
p.end();
整个绘图过程都是在Qt事件中
QPainter提供一系列的函数可以让我们画出一些基本图形

2、QPen
在画图的时候，QPen用来画轮廓线。因此我们可以使用QPen来改变图形的轮廓，例如可以画实线、虚线、点线等等

改变QPainter的画笔：
QPainter p;
QPen pen;
p.setPen(pen);

改变画笔自身的属性
pen.setColor(Qt::white);   //颜色
pen.setStyle(Qt::SolidLine);//样式

3、QBrush
在画图的时候，QBrush可以填充图形，例如可以将图形填充为黄色、绿色等等

改变QPainter的画笔：
QPainter p;
QBrush brush;
p.setBrush(brush);

改变画笔自身的属性
brush.setColor(Qt::white); //颜色
brush.setStyle(Qt::CrossPattern);//样式

update()函数会产生一个画图事件
 

4、update
update()函数会产生一个画图事件，当串口被隐藏、部件失效的时候，这个函数会产生一个事件

点击(此处)折叠或打开

1. #include "MyDraw.h"
   
2. 
   
3. MyDraw::MyDraw()
   
4. {
   
5.     //控件初始化
   
6.     btn = new QPushButton("更改");
   
7.     colorBoxInit();
   
8.     styleBoxInit();
   
9.     drawWidgetInit();
   
10.     //水平布局
    
11.     QHBoxLayout *hLay = new QHBoxLayout();
    
12.     hLay->addWidget(colorBox);
    
13.     hLay->addWidget(styleBox);
    
14.     hLay->addWidget(btn);
    
15.     //垂直布局
    
16.     QVBoxLayout *vLay = new QVBoxLayout();
    
17.     vLay->addLayout(hLay);
    
18.     vLay->addWidget(drawWidget);
    
19.     //加载布局
    
20.     setLayout(vLay);
    
21.     //绑定信号和槽函数
    
22.     connect(btn, SIGNAL(clicked()), this, SLOT(changeSlot()));
    
23.     //重定义窗口大小
    
24.     resize(500,500);
    
25. //    drawWidget->setPalette(QPalette(Qt::white));
    
26. }
    
27. void MyDraw::colorBoxInit()
    
28. {
    
29.     colorBox = new QComboBox();
    
30.     QStringList color;
    
31.     color"红""黄""蓝""绿""黑";
    
32.     colorBox->addItems(color);
    
33. }
    
34. void MyDraw::styleBoxInit()
    
35. {
    
36.     styleBox = new QComboBox();
    
37.     QStringList style;
    
38.     style"实线""虚线""点划线";
    
39.     styleBox->addItems(style);
    
40. }
    
41. void MyDraw::drawWidgetInit()
    
42. {
    
43.     drawWidget = new QWidget;
    
44.     drawWidget->resize(400, 400);
    
45. }
    
46. 
    
47. void MyDraw::changeSlot()
    
48. {
    
49.     switch(colorBox->currentIndex())
    
50.     {
    
51.         case 0:
    
52.             pen.setColor(Qt::red);
    
53.             break;
    
54.         case 1:
    
55.             pen.setColor(Qt::yellow);
    
56.             break;
    
57.         case 2:
    
58.             pen.setColor(Qt::blue);
    
59.             break;
    
60.         case 3:
    
61.             pen.setColor(Qt::black);
    
62.             break;
    
63.         default:
    
64.             break;
    
65.     }
    
66.     switch(styleBox->currentIndex())
    
67.     {
    
68.         case 0:
    
69.             pen.setStyle(Qt::SolidLine);
    
70.             break;
    
71.         case 1:
    
72.             pen.setStyle(Qt::DashLine);
    
73.             break;
    
74.         case 2:
    
75.             pen.setStyle(Qt::DotLine);
    
76.             break;
    
77.         default:
    
78.             break;
    
79.     }
    
80.     //event
    
81.     update();
    
82. }
    
83. 
    
84. //绘图时间
    
85. void MyDraw::paintEvent(QPaintEvent *e)
    
86. {
    
87.     p.begin(this);
    
88.     p.setPen(pen);
    
89.     QBrush brush;
    
90.     brush.setStyle(Qt::CrossPattern);
    
91.     p.setBrush(brush);
    
92.     QRect rect(100, 100, 200, 400);
    
93.     p.drawEllipse(rect);
    
94.     p.end();
    
95. }

二、坐标系变换
Qt的坐标系由QPainter控制，同时也由QPaintDevice控制。
QPaintDevice是物理坐标，QPainter是逻辑坐标。逻辑坐标和物理坐标默认是一致的，但是也可以变换。Qt坐标原点在左上角，x轴向右增长，y轴上下增长

QPainter提供了一些变换函数，可以实现坐标的变换
1）tanslate（x，y） 平移
2）scale（m，n）缩放
3）shear（x，y）扭曲
4）rotate（m）旋转

点击(此处)折叠或打开

1. #include "MyDraw.h"
   
2. 
   
3. MyDraw::MyDraw()
   
4. {
   
5.     //控件初始化
   
6.     btn = new QPushButton("更改");
   
7.     colorBoxInit();
   
8.     styleBoxInit();
   
9.     drawWidgetInit();
   
10.     //水平布局
    
11.     QHBoxLayout *hLay = new QHBoxLayout();
    
12.     hLay->addWidget(colorBox);
    
13.     hLay->addWidget(styleBox);
    
14.     hLay->addWidget(btn);
    
15.     //垂直布局
    
16.     QVBoxLayout *vLay = new QVBoxLayout();
    
17.     vLay->addLayout(hLay);
    
18.     vLay->addWidget(drawWidget);
    
19.     //加载布局
    
20.     setLayout(vLay);
    
21.     //绑定信号和槽函数
    
22.     connect(btn, SIGNAL(clicked()), this, SLOT(changeSlot()));
    
23.     //重定义窗口大小
    
24.     resize(500,500);
    
25.     drawWidget->setPalette(QPalette(Qt::white));
    
26. }
    
27. void MyDraw::colorBoxInit()
    
28. {
    
29.     colorBox = new QComboBox();
    
30.     QStringList color;
    
31.     color"红""黄""蓝""绿""黑";
    
32.     colorBox->addItems(color);
    
33. }
    
34. void MyDraw::styleBoxInit()
    
35. {
    
36.     styleBox = new QComboBox();
    
37.     QStringList style;
    
38.     style"实线""虚线""点划线";
    
39.     styleBox->addItems(style);
    
40. }
    
41. void MyDraw::drawWidgetInit()
    
42. {
    
43.     drawWidget = new QWidget;
    
44.     drawWidget->resize(400, 400);
    
45. }
    
46. 
    
47. void MyDraw::changeSlot()
    
48. {
    
49.     switch(colorBox->currentIndex())
    
50.     {
    
51.         case 0:
    
52.             pen.setColor(Qt::red);
    
53.             break;
    
54.         case 1:
    
55.             pen.setColor(Qt::yellow);
    
56.             break;
    
57.         case 2:
    
58.             pen.setColor(Qt::blue);
    
59.             break;
    
60.         case 3:
    
61.             pen.setColor(Qt::black);
    
62.             break;
    
63.         default:
    
64.             break;
    
65.     }
    
66.     switch(styleBox->currentIndex())
    
67.     {
    
68.         case 0:
    
69.             pen.setStyle(Qt::SolidLine);
    
70.             break;
    
71.         case 1:
    
72.             pen.setStyle(Qt::DashLine);
    
73.             break;
    
74.         case 2:
    
75.             pen.setStyle(Qt::DotLine);
    
76.             break;
    
77.         default:
    
78.             break;
    
79.     }
    
80.     update();
    
81. }
    
82. 
    
83. //绘图时间
    
84. void MyDraw::paintEvent(QPaintEvent *e)
    
85. {
    
86.     //构造一个矩形
    
87.     QRect rect(100,100,300,400);
    
88.     //开始画图
    
89.     p.begin(this);
    
90.     //指定一个画刷
    
91.     QBrush brush;
    
92.     brush.setStyle(Qt::CrossPattern);
    
93.     //加载画笔和画刷
    
94.     p.setPen(pen);
    
95.     p.setBrush(brush);
    
96.     //画椭圆
    
97.     p.drawEllipse(rect);
    
98. 
    
99.     p.translate(100, 0);
    
100.     p.drawEllipse(rect);
     
101.     p.scale(0.5, 0.5);
     
102.     p.drawEllipse(rect);
     
103. 
     
104.     p.end();
     
105. }

三、QImage
Qt提供了4个处理图像的类：QImage、QPixmap、QBitmap、QPicture

QImage可以直接存储像素数据
QPixmap用来在屏幕上显示图片
QPicture可以记录和重放QPainter类
QBitmap用来处理位图，继承自QPixmap

QImage支持的图像可以是单位、8位、32位、alpha混合格式
加载图像可以使用load()函数、loadFromData()函数；save()可以保存图像
size() height() width()可以获取图像的大小等信息
format()可以取出图像的格式
convertToFormat()可以转换图片格式

使用QPainter的drawImage方法可以将QImage图案画到窗口

点击(此处)折叠或打开

1. #include "myImage.h"
   
2. 
   
3. myImage::myImage()
   
4. {
   
5.     //控件初始化
   
6.     openBtn = new QPushButton("打开");
   
7.     saveBtn = new QPushButton("保存");
   
8.     image.load("/cut.jpg");
   
9.     QHBoxLayout *hLay = new QHBoxLayout();
   
10.     hLay->addWidget(openBtn);
    
11.     hLay->addWidget(saveBtn);
    
12.     //布局
    
13.     QVBoxLayout *vLay = new QVBoxLayout();
    
14.     vLay->addLayout(hLay);
    
15.     QWidget *widget = new QWidget();
    
16.     widget->resize(500,500);
    
17.     vLay->addWidget(widget);
    
18.     //加载布局
    
19.     setLayout(vLay);
    
20.     resize(600,600);
    
21.     //绑定信号
    
22.     connect(openBtn, SIGNAL(clicked()), this, SLOT(openSlot()));
    
23.     connect(saveBtn, SIGNAL(clicked()), this, SLOT(saveSlot()));
    
24. }
    
25. //槽函数
    
26. void myImage::openSlot()
    
27. {
    
28.     //获取文件名字
    
29.     QString str = QFileDialog::getOpenFileName(this, "打开文件", "/", "All File(*.*)");
    
30.     //加载图片
    
31.     image.load(str);
    
32.     update();
    
33. }
    
34. //槽函数
    
35. void myImage::saveSlot()
    
36. {
    
37.     bool ok;
    
38.     //获取输入的信息
    
39.     QString str = QInputDialog::getText(this, "输入对话框", "请输入名字", QLineEdit::Normal, "wj", &ok);
    
40. 
    
41.     //保存图像
    
42.     image.save(str + ".png");
    
43. }
    
44. void myImage::paintEvent(QPaintEvent *e)
    
45. {
    
46.     QPainter p(this);
    
47.     p.drawImage(100,100,image);
    
48. }