QT简单绘图

来源：互联网发布：网上美工兼职编辑：程序博客网时间：2024/05/29 19:49

一、画线

画笔样式

Qt::PenStyle

enum PenStyle { // pen style        NoPen,        SolidLine,           DashLine,            DotLine,             DashDotLine,          DashDotDotLine,        CustomDashLine#ifndef Q_MOC_RUN        , MPenStyle = 0x0f#endif    };

线帽样式

Qt::PenCapStyle

enum PenCapStyle { // line endcap style        FlatCap = 0x00,        SquareCap = 0x10,        RoundCap = 0x20,        MPenCapStyle = 0x30    };

线连接样式

Qt::PenJoinStyle

enum PenJoinStyle { // line join style        MiterJoin = 0x00,        BevelJoin = 0x40,        RoundJoin = 0x80,        SvgMiterJoin = 0x100,        MPenJoinStyle = 0x1c0    };

练习1：线型

painter.setPen( Qt::SolidLine);painter.drawLine( 10,10, 400, 10);painter.setPen( Qt::DashLine);painter.drawLine( 10, 20, 400, 20);painter.setPen( Qt::DotLine );painter.drawLine(10, 30, 400, 30);painter.setPen(Qt::DashDotLine);painter.drawLine(10, 40, 400, 40);painter.setPen(Qt::DashDotDotLine);painter.drawLine(10, 50, 400, 50);QPen CustomPen;QVector<qreal> vect;vect.push_back( 10.0);//第一个划线的长度vect << 5.0;//第一个空的长度vect << 20.0;//第二个划线的长度vect << 10.0;//第二个空的长度//可以继续交替设置划线、空的长度CustomPen.setDashPattern( vect);painter.setPen( CustomPen );painter.drawLine(10, 60, 400, 60);

效果：

练习2：线帽类型

QPen pen1;pen1.setWidth(10);pen1.setCapStyle( Qt::FlatCap);painter.setPen( pen1 );painter.drawLine( 10, 80, 400, 80);pen1.setCapStyle( Qt::SquareCap );painter.setPen(pen1);painter.drawLine(10, 100, 400, 100);pen1.setCapStyle(Qt::RoundCap);painter.setPen(pen1);painter.drawLine(10, 120, 400, 120);pen1.setCapStyle(Qt::MPenCapStyle);painter.setPen(pen1);painter.drawLine(10, 140, 400, 140);

效果：

练习3：连接类型

QPen pen2;pen2.setWidth(10);pen2.setJoinStyle( Qt::RoundJoin);painter.setPen(pen2);QVector<QPoint> Pt_vec;Pt_vec << QPoint(10, 200) << QPoint(100, 50) << QPoint(200, 200);painter.drawPolyline( Pt_vec);pen2.setJoinStyle(Qt::MiterJoin);painter.setPen(pen2);Pt_vec.clear();Pt_vec << QPoint(10, 240) << QPoint(100, 90) << QPoint(200, 240);painter.drawPolyline(Pt_vec);pen2.setJoinStyle(Qt::BevelJoin);painter.setPen(pen2);Pt_vec.clear();Pt_vec << QPoint(10, 280) << QPoint(100, 130) << QPoint(200, 280);painter.drawPolyline(Pt_vec);pen2.setJoinStyle(Qt::SvgMiterJoin);painter.setPen(pen2);Pt_vec.clear();Pt_vec << QPoint(10, 320) << QPoint(100, 170) << QPoint(200, 320);painter.drawPolyline(Pt_vec);

效果：

练习4：画刷类型

QPen pen3;pen3.setWidth( 10 );pen3.setBrush( Qt::green);painter.setPen( pen3 );painter.drawLine( 10, 340, 400, 340);pen3.setBrush( QBrush( Qt::CrossPattern) );painter.setPen( pen3 );painter.drawLine(10, 360, 400, 360);pen3.setBrush(QBrush(Qt::Dense5Pattern));painter.setPen(pen3);painter.drawLine(10, 380, 400, 380);pen3.setBrush(QBrush(Qt::BDiagPattern));painter.setPen(pen3);painter.drawLine(10, 400, 400, 400);QLinearGradient linearGradient(10,0, 400, 0);linearGradient.setColorAt( 0, Qt::red);linearGradient.setColorAt( 1, Qt::green);pen3.setBrush(  linearGradient );painter.setPen(pen3);painter.drawLine(10, 420, 400, 420);QRadialGradient radialGradient(10,440, 400);radialGradient.setColorAt(0,Qt::red);radialGradient.setColorAt(0.2,Qt::blue);radialGradient.setColorAt(0.5,Qt::green);radialGradient.setColorAt(0.7,Qt::yellow);radialGradient.setColorAt(1.0,Qt::gray);pen3.setBrush( radialGradient );painter.setPen( pen3);painter.drawLine(10, 440, 400, 440);QImage image("winblender.ico");QBrush brush(image);pen3.setBrush( brush);painter.setPen(pen3);painter.drawLine(10, 460, 400, 460);

效果：

二、绘图路径

绘图路径(painter path)由基本图元(矩形，椭圆，直线，曲线)组成，绘图路径可以是闭合的路径，如矩形和圆，或者是非闭合的路径，如直线和曲线。

绘图路径在Qt中使用QPainterPth类表示，它提供了绘图操作的容器，可以使图形能够复用。绘图路径可以进行填充，显示轮廓和裁剪。要生成可填充的轮廓的绘图路径，可以使用QPainterPathStroker类.

使用QPainterPath的优点是复杂的图形只需创建一次，就可以多次使用,调用QPainter::drawPath（）可以多次绘制。QPainterPath对象可以时只有起点的空路径，或者从其他QPainterPath对象复制，创建了QPainterPath对象后，可以使用lineTo(),cubicTo(),quadTo() 函数将直线和曲线添加到路径中来，直线和曲线从currentPosition()开始绘制。currentPosition()总是返回最后的子路经绘制的终点。使用moveTo()函数可以在不增加路径的情况下移动currentPositon(),它关闭了一个子路经，开始一个新的子路经。closeSubPath()也可以关闭当前路径，并从currentPosition()连接一条直线到绘图路径的起点。

QPainter可以使用addEllipse(),addPath(),addRect(),addRegion(),addText()将Qt的一些基本图元加入绘图路径。一个已有的绘图路径可以通过connectPath()函数加入到另一个绘图路径中。

例子：

QPainterPath path;path.addRect(0, 0, 100, 100);path.addEllipse( 100, 100, 50,50);painter.setPen( Qt::yellow );painter.setBrush( Qt::green );painter.drawPath( path );path.translate( 200, 0);painter.drawPath( path );path.translate( 200, 0);painter.drawPath( path );

效果：

三、反走样

由于采样不充分重建后造成的信息失真，叫做走样；用于减少或消除这种效果的技术称为反走样。

通过 enum QPainter::RenderHint 来设置绘图引擎的标志，QPainter::Antialiasing :指定反走样， QPainter::TextAntialiasing:指定文本反走样，QPainter::SmoothPixmapTransform指定光滑图片转换。

调用 QPainter::setRenderHint( QPainter::Antialiasing, true);可以将Antialiasing属性(反走样)设置为true。

四、渐变

Qt提供了三种渐变：线性渐变（QLinearGradient）、辐射渐变（QRadialGradient）和角度渐变（QConicalGradient）。

例子：

painter.setRenderHint( QPainter::Antialiasing, true );QLinearGradient linearGradient( 60, 50, 200, 200);linearGradient.setColorAt( 0.2, Qt::white );linearGradient.setColorAt( 0.6, Qt::green );linearGradient.setColorAt( 1.0, Qt::black );painter.setBrush( QBrush(linearGradient ));painter.drawEllipse( 50, 50, 200, 200);

效果：

例子：

//1.角度渐变const int r = 150;QConicalGradient conicalGradient( 0, 0, 0);conicalGradient.setColorAt( 0.0, Qt::red );conicalGradient.setColorAt( 60.0/360.0, Qt::yellow );conicalGradient.setColorAt( 120.0/360.0, Qt::green );conicalGradient.setColorAt( 180.0/360.0, Qt::cyan );conicalGradient.setColorAt( 240.0/360.0, Qt::blue );conicalGradient.setColorAt( 300.0/360.0, Qt::magenta );conicalGradient.setColorAt( 1.0, Qt::red);painter.translate( r, r); //将坐标系的原点设置到（r, r）点处QBrush brush( conicalGradient );painter.setPen( Qt::NoPen );painter.setBrush( brush );painter.drawEllipse( QPoint(0, 0), r, r);painter.translate( -1*r, -1*r);//将坐标系的原点设置回窗口左上角//2.辐射渐变QRadialGradient radialGradient( QPoint(400, 400), 200, QPoint(200, 400) );radialGradient.setColorAt(0, Qt::red );radialGradient.setColorAt( 0.5, Qt::green );radialGradient.setColorAt(1.0, Qt::blue );QBrush brush1( radialGradient );painter.setBrush( brush1 );painter.drawEllipse( QPoint(400, 400), 200, 200);

效果：

五、QPainter状态的保存和恢复

QPainter提供了内置的函数：save()和restore()；save()就是保存当前状态，比如画笔颜色、粗细等，restore()则恢复上一次保存的结果，这连个函数必须成对出现。功能以及实现方法类似于OpenGL中的glPushAttrib()和glPopAttrib()函数。

六、Qt坐标系统

1、Qt坐标变换

Qt提供四种坐标变换：平移translate，旋转rotate，缩放scale 和扭曲shear,这些变换是针对坐标系的。

2、逻辑坐标、物理坐标

window代表窗口坐标、viewport代表物理坐标；

注意：

resize函数设置的是窗口的像素大小，比如resize(400, 400 );设置一个400px*400px的窗口，如果你的屏幕分辨率是1024*768,那么该窗口大小大概占你屏幕长的0.4 倍。

setWindow设置的是窗口坐标，比如对上述400px*400px的窗口，如果setWindow(0,0, 200, 200),那么逻辑坐标（200， 200）,对应窗口的右下角。即一个像素长度等于1/2个逻辑单位。

setViewport设置的是物理坐标，对于400px*400px的窗口，如果setViewport(0,0,200, 200),就是将物理的200px*200px映射到窗口的长宽400px*400px；注意这里是物理坐标和窗口的实际像素大小之间的对应关系，与窗口逻辑坐标无关，如果窗口逻辑坐标范围为（0,400）,那么世界坐标（逻辑坐标）到窗口坐标系统的转换比例为1:1，即逻辑点（400,400），对应窗口坐标系（400,400）;窗口坐标系统到物理坐标系统的比例为2:1，所以对应的物理坐标点为（200,200）,该点在窗口的中央。

逻辑坐标、窗口坐标与物理坐标之间的关系：

传给QPainter的是逻辑坐标（也称为世界坐标），逻辑坐标可以通过变换矩阵转换为窗口坐标，窗口坐标通过window-viewport转换为物理坐标（也就是设备坐标）。

七、绘制图像

绘图设备是继承QPainterDevice的类，使用QPainter可以在任何QPaintDevice的子类上进行绘制。QPixmap、QBitmap、QImage、QPicture都是绘图设备。

1、QPixmap

QPixmap继承了QPaintDevice，是针对屏幕进行特殊优化的，因此，它与实际的底层显示设备息息相关（不同的操作系统平台下，QPixmap的显示可能会有所差别）；在程序中打开图片文件可以使用QPixmap，使用QPainter::drawPixmap()函数可以把图片文件绘制到一个QLabel、QPushButton或其他设备上。

QPixmap提供“隐式数据共享”，可以直接传值，不需要传指针。

2、QBitmap继承自QPixmap,因此具有QPixmap的所有特性，不同之处是QBitmap的色深始终为1，只有黑白两色的图像数据（其他颜色使用点的疏密程度来体现）。

由于QBitmap色深小，因此只占用很少的存储空间，所以适合做光标文件和笔刷。

3、QImage

QImage使用独立于硬件的绘图系统，因此提供了像素级别的操作，并且能够在不同的系统之上提供一个一致的显示形式。QImage与QPixmap相比，最大的优势在于能够进行像素级别的操作。

4、QPicture

QPicture是平台无关的，因此它可以使用在多种设备之上，比如svg、pdf、ps、打印机或者屏幕。

如果要记录下QPainter的命令，可以使用QPainter::begin()函数，将QPicture实例作为参数传递进去，以便告诉系统开始记录，记录完毕后使用QPainter::end()命令终止。

例如：

QPicture picture;painter.begin( &picture );              //在picture进行绘制painter.drawEllipse( 10, 20, 80, 70 );  //绘制一个椭圆painter.end();                          //绘制完成picture.save("drawing.pic")             //保存picture

要重现命令，使用QPicture::load()函数进行装载：

picture.load("drawing.pic");              //加载picturepainter.begin( &myImage );                //在myImage进行绘制 painter.drawPicture( 0, 0, picture);      //在（0，0）点开始绘制picturepainter.end();                            //绘制完成picture.play( &painter );

、绘制文字

0 0