嵌入式图形界面开发_3
- 格式：pdf
- 大小：1.18 MB
- 文档页数：58
嵌入式图形界面开发_3----Qt 2D 绘图廖卫东l i ao we id on gn 1.新建Qt4 Gui Application 工程，我这里使用的工程名为painter01，选用QDialog 作为Base classn 2.在dialog.h 文件中声明重绘事件函数void paintEvent(QPaintEvent *);n 3.在dialog.cpp 中添加绘图类QPainter 的头文件包含#include <QPainter>l i ao we id on gn 4.在下面进行该函数的重定义。
void Dialog::paintEvent(QPaintEvent *){QPainter painter(this);painter.drawLine(0,0,100,100);}n 其中创建了QPainter 类对象，它是用来进行绘制图形的，我们这里画了一条线Line ，其中的参数为线的起点（0，0），和终点（100，100）。
这里的数值指的是像素，详细的坐标设置我们以后再讲，这里知道（0，0）点指的是窗口的左上角即可。
运行效果如下：l i ao we id on ggnodiewoailn 5.在qt 的帮助里可以查看所有的绘制函数，而且下面还给出了相关的例子。
l i ao we id on gn 将函数改为如下：void Dialog::paintEvent(QPaintEvent *){QPainter painter(this);QPen pen; //画笔pen.setColor(QColor(255,0,0));QBrush brush(QColor(0,255,0,125)); //画刷painter.setPen(pen); //添加画笔painter.setBrush(brush); //添加画刷painter.drawRect(100,100,200,200); //绘制矩形}n 这里的pen 用来绘制边框，brush 用来进行封闭区域的填充，QColor 类用来提供颜色，我们这里使用了rgb 方法来生成颜色，即（red ，green ，blue ），它们取值分别是0-255，例如（255，0，0）表示红色，而全0表示黑色，全255表示白色。
后面的（0，255，0，125），其中的125是透明度（alpha ）设置，其值也是从0到255，0表示全透明。
最后将画笔和画刷添加到painter 绘制设备中，画出图形。
这里的Rect 是长方形，其中的参数为（100，100）表示起始坐标，200，200表示长和宽。
效果如下：l i ao we id on ggnodiewoailn 7.其实画笔和画刷也有很多设置，大家可以查看帮助。
QPainter painter(this);QPen pen(Qt::DotLine);QBrush brush(Qt::blue);brush.setStyle(Qt::HorPattern);painter.setPen(pen);painter.setBrush(brush);painter.drawRect(100,100,200,200);n 这里我们设置了画笔的风格为点线，画刷的风格为并行横线，效果如下：l i ao we id on ggnodiewoailgnodiewoailQRectF rectangle(10.0, 20.0, 80.0, 60.0); //矩形int startAngle = 30 * 16; //起始角度int spanAngle = 120 * 16; //跨越度数QPainter painter(this);painter.drawArc(rectangle, startAngle, panAngle);n 这里要说明的是，画弧线时，角度被分成了十六分之一，就是说，要想为30度，就得是30*16。
它有起始角度和跨度，还有位置矩形，要想画出自己想要的弧线，就要有一定的几何知识了。
l i ao we id on gn 在qt 中提供了三种渐变方式，分别是线性渐变，圆形渐变和圆锥渐变。
如果能熟练应用它们，就能设计出炫目的填充效果。
l i ao we id on gn 1.更改函数如下：void Dialog::paintEvent(QPaintEvent *){QPainter painter(this);QLinearGradient linearGradient(100,150,300,150);//从点（100，150）开始到点（300，150）结束，确定一条直线linearGradient.setColorAt(0,Qt::red);linearGradient.setColorAt(0.2,Qt::black);linearGradient.setColorAt(0.4,Qt::yellow);linearGradient.setColorAt(0.6,Qt::white);linearGradient.setColorAt(0.8,Qt::green);linearGradient.setColorAt(1,Qt::blue);//将直线开始点设为0，终点设为1，然后分段设置颜色painter.setBrush(linearGradient);painter.drawRect(100,100,200,100);//绘制矩形，线性渐变线正好在矩形的水平中心线上}l i ao we id on ggnodiewoailn 1.更改函数内容如下：QRadialGradient radialGradient(200,100,100,200,100);//其中参数分别为圆形渐变的圆心（200，100），半径100，和焦点（200，100）//这里让焦点和圆心重合，从而形成从圆心向外渐变的效果radialGradient.setColorAt(0,Qt::black);radialGradient.setColorAt(1,Qt::yellow);//渐变从焦点向整个圆进行，焦点为起始点0，圆的边界为1QPainter painter(this);painter.setBrush(radialGradient);painter.drawEllipse(100,0,200,200); //绘制圆，让它正好和上面的圆形渐变的圆重合l i ao we id on ggnodiewoailn 2.要想改变填充的效果，只需要改变焦点的位置和渐变的颜色位置即可。
改变焦点位置：QRadialGradientradialGradient(200,100,100,100,100);l i ao we id on gn 1.更改函数内容如下：//圆锥渐变QConicalGradient conicalGradient(50,50,0);//圆心为（50，50），开始角度为0conicalGradient.setColorAt(0,Qt::green);conicalGradient.setColorAt(1,Qt::white);//从圆心的0度角开始逆时针填充QPainter painter(this);painter.setBrush(conicalGradient);painter.drawEllipse(0,0,100,100);l i ao we id on gn 2.可以更改开始角度，来改变填充效果QConicalGradient conicalGradient(50,50,30);开始角度设置为30度，效果如下：其实三种渐变的设置都在于焦点和渐变颜色的位置，如果想设计出漂亮的渐变效果，还要有美术功底l i ao we id on g1.绘制最简单的文字。
我们更改重绘函数如下：void Dialog::paintEvent(QPaintEvent *){QPainter painter(this);painter.drawText(100,100,"yafeilinux");}我们在（100，100）的位置显示了一行文字，效果如下。
l i ao we id on gn 2.为了更好的控制字体的位置。
我们使用另一个构造函数。
在帮助里查看drawText ，如下。
l i ao we id on ggnodiewoailn 更改函数内容如下。
void Dialog::paintEvent(QPaintEvent *){QPainter painter(this);QRectF ff(100,100,300,200);//设置一个矩形painter.drawRect(ff);//为了更直观地看到字体的位置，我们绘制出这个矩形painter.setPen(QColor(Qt::red));//设置画笔颜色为红色painter.drawText(ff,Qt::AlignHCenter,"yafeilinux");//我们这里先让字体水平居中}l i ao we id on g可以看到字符串是在最上面水平居中的。
如果想让其在矩形正中间，我们可以使用Qt::AlignCenter 。
这里我们也可以使用两个枚举变量进行按位与操作，例如可以使用Qt::AlignBottom|Qt::AlignHCenter 实现让文字显示在矩形下面的正中间。
效果如下。
l i ao we id on ggnodiewoail对于较长的字符串，我们也可以利用“\n”进行换行，例如"yafei\nlinux"。
n 3.如果要使文字更美观，我们就需要使用QFont 类来改变字体。
l i ao we id on gvoid Dialog::paintEvent(QPaintEvent *){QFont font("Arial",20,QFont::Bold,true);//设置字体的类型，大小，加粗，斜体font.setUnderline(true);//设置下划线font.setOverline(true);//设置上划线font.setCapitalization(QFont::SmallCaps);//设置大小写font.setLetterSpacing(QFont::AbsoluteSpacing,5);//设置间距QPainter painter(this);painter.setFont(font);//添加字体QRectF ff(100,100,300,200);painter.drawRect(ff);painter.setPen(QColor(Qt::red));painter.drawText(ff,Qt::AlignCenter,"yafeilinux");}l i ao we id on ggnodiewoailn 在窗体上绘制路径要使用QPainterPath 这个类。
