Qt5 学习之路及嵌入式开发教程20：Qt5绘图---QPainter

 

Qt5 学习之路及嵌入式开发教程20：Qt5绘图---QPainter

这次任务要完成Qt5 QPainter 2D-绘图界面设计及功能实现

一、项目文件的建立

1、新建文件或项目

2、选择后，输入名称和路径，下一步：

3、输入类名：这边输入Draw，选择基类：QWidget，下一步：

4、下一步，直到点击中“完成”，完成文件设置。

扫描二维码关注公众号，回复： 11195641 查看本文章

二、基本绘图

1、重新定义paintEvent()事件：

打开draw.h文件，定义paintEvent函数，并重载

在类定义中添加代码

protected:
    //Q_DECL_OVERRIDE宏表示这个函数是对父类虚函数的重载
    void    paintEvent(QPaintEvent *event)  Q_DECL_OVERRIDE;

打开draw.cpp文件，添加如下代码

void Draw::paintEvent(QPaintEvent *event)
{

}

运行程序：是一个无任何组件的窗口

2、在paintEvent函数内定义一个QPainter对象，并画一条直线：添加如下代码

QPainter    painter(this);
painter.drawLine(50,50,300,50);
//前面的50，50表示第一个点的坐标，后面的300，50表示后一个点的坐标

运行程序：

接下来，对painter对像进行修饰：线宽及颜色及平滑

在同函数内增加如下代码：（注：在头文件加入同样的类）

    //防图像、文本走样
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);

    QPen        pen;
    //线宽，颜色
    pen.setWidth(3);
    pen.setColor(Qt::red);
    painter.setPen(pen);

运行程序：

3、画一个矩形，并填充颜色

添加画刷对象：

   QBrush      brush;
    //画刷颜色
    brush.setColor(Qt::yellow);
    //画刷填充样式
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);

添加矩形对象：

QRect       rect1(50,80,100,80);
painter.drawRect(rect1);

运行程序：

4、画一个圆角矩形，椭圆与圆

圆角矩形：

QRect       rect2(200,80,100,80);
painter.drawRoundedRect(rect2,20,20);

运行程序：

椭圆：

QRect       rect3(50,200,140,80);
painter.drawEllipse(rect3);

运行程序：

圆：

 QRect       rect4(250,200,140,140);
 painter.drawEllipse(rect4);

运行程序：

5、在图形内添加图片：例在圆形内添加Qt图像

QImage      image("D:/image/qt1.jpg");
painter.drawImage(rect4,image);

运行程序：

三、渐变文字

添加代码：

    QFont font;
    font.setFamily("Microsoft YaHei");
    font.setPointSize(30);

    QLinearGradient linear;
    linear.setStart(100,350);
    linear.setFinalStop(100,430);
    linear.setColorAt(0,Qt::red);
    linear.setColorAt(0.5,Qt::green);
    linear.setColorAt(0.8,Qt::black);
    linear.setColorAt(1.0,Qt::yellow);
    painter.setFont(font);
    painter.setPen(QPen(QBrush(linear),5));
    painter.drawText(100,350,300,80,Qt::AlignLeft, QString("ABCDEFGHIJK") );

运行程序：

四、画弧线、扇形、多边形

    //画弧线
    painter.drawArc(450,20,80,80,0,16*90);//90度

    //画扇形
    painter.drawPie ( 450, 50, 80, 80, 0, 16*180 );//180度

    //画多边形
    static const QPointF points[4] = {QPointF(450, 190), QPointF(480, 300), QPointF(570, 310), QPointF(630, 250)};
    painter.drawPolygon(points, 4);

运行效果：