Qt QPainter绘图

旧城等待， 2022-11-04 08:03 110阅读 0赞

## 1.QPainter绘图系统 ##

*  QPainter用来进行绘图操作的类。
 *  QPaintDevice是一个可以使用QPainter进行绘图的抽象二维界面。
 *  QPaintEngine给QPainter提供在不同设备上绘图的接口，QPaintEngine类由QPainter和QPaintDevice内部使用，应用程序一般无需使用QPaintEngine。
 *  绘图设备包括QWidget、QPixmap、QImage等。

## 2.paintEvent世界和绘图区 ##

QWidget类及其子类是最常用的绘图设备，从QWidget类继承的类都有paintEvent()事件，只需要重定义此事件就行。

## 3.QWidget内部坐标系统 ##

[坐标系统][Link 1]

## 4.QPainter绘图主要属性 ##

*  QPen：画笔，用于控制线条的颜色、宽度等。
 *  QBrush：画刷，用于填充颜色、渐变特性等。
 *  QFont：字体属性，用于绘制文字时，设置文字的样式、大小等。

**QPen**

1.设置线条样式setStyle(Qt::PenStyle style)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70][]

2.设置线条端点样式setCapStyle(Qt::PenCapStyle style)

![20210301213438375.PNG][]

3..设置线条连接样式setJoinStyle(Qt::PenJoinStyle style)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 1][]

**QBrush**

设置画刷样式setStyle(Qt::BrushStyle style)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 2][]

渐变填充需要使用专门的类。

![20210301213857625.PNG][]

## **5.示例** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 3][]

void Widget::paintEvent(QPaintEvent *event)
    {
        //创建QPainter对象，指明父对象，否则不能看见
        QPainter painter(this);
    
        //先画一条线
        QPen pen;
    
        //设置线宽
        pen.setWidth(2);
    
        //设置颜色
        pen.setColor(Qt::red);
    
        //设置线的样式 实线、虚线
        pen.setStyle(Qt::DashDotLine);
    
        //设置线端点样式
        pen.setCapStyle(Qt::RoundCap);
    
        //设置画笔
        painter.setPen(pen);
    
        //画线
        painter.drawLine(10,10,100,100);
    
        //设置画刷
        QBrush brush;
    
        //画刷设置颜色
        brush.setColor(Qt::yellow);
    
        //设置填充样式
        brush.setStyle(Qt::SolidPattern);
    
        //设置画刷
        painter.setBrush(brush);
    
        //画四边形
        painter.drawRect(QRect(300,300,50,50));
    
        //画多边形，三角形
        QPoint points[] = {
            QPoint(200,200),
            QPoint(200,260),
            QPoint(260,260),
        };
        painter.drawPolygon(points,3);
    
        //设置字体
        QFont font;
    
        //字体大小
        font.setPointSize(30);
    
        //粗体
        font.setBold(true);
    
        //设置字体
        painter.setFont(font);
    
        //画字
        painter.drawText(400,400,QString("Qt"));
    }

## 6.渐变填充 ##

*  QLinearGradient：线性渐变。指定一个起点及其颜色，终点及其颜色，还可以指定中间的某个点的颜色，起点至终点之间的颜色会线性插值计算，得到线性渐变的填充颜色
 *  QRadialGradient：有简单辐射渐变和扩展辐射渐变两种。简单辐射渐变是在一个圆内的一个焦点和一个端点之间生成的渐变颜色；扩展辐射渐变是在一个焦点圆和一个中心圆之间生成渐变色。
 *  QConicalGradient：圆锥形渐变，围绕一个中心点逆时针生成渐变颜色。

设置延展方式void setSpread(Spread method)

*  QGradient::PadSpread：用结束点的颜色填充外部区域，这是缺省的方式。
 *  QGradient::RepeatSpread：重复使用渐变方式填充外部区域。
 *  QGradient::ReflectSpread：反射式重复使用渐变方式填充外部区域。

**实例：辐射渐变**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 4][]

//设置辐射填充中心点:width()/2,height()/2，
        //半径：width()/8
        //焦点坐标：width()/2,height()/2
        QRadialGradient radial(width()/2,height()/2,
                               width()/8,width()/2,height()/2);
        
        //设置起始点颜色，0表示起始
        radial.setColorAt(0,Qt::green);
        
        //设置终点颜色 1表示终点
        radial.setColorAt(1,Qt::blue);
        
        //设置延展方式
        radial.setSpread(QGradient::ReflectSpread);
        
        //设置画刷
        painter.setBrush(radial);
    
        //画矩形
        painter.drawRect(this->rect());

**实例：线性渐变**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 5][]

QLinearGradient radial(this->rect().left(),this->rect().top(),
                              this->rect().right(),this->rect().top());
    
        //设置起始点颜色，0表示起始
        radial.setColorAt(0,Qt::blue);
    
        //设置中间点颜色
        radial.setColorAt(0.5,Qt::green);
    
        //设置终点颜色 1表示终点
        radial.setColorAt(1,Qt::red);
    
        //设置延展方式
        radial.setSpread(QGradient::ReflectSpread);
    
        //设置画刷
        painter.setBrush(radial);
    
        //画矩形
        painter.drawRect(this->rect());

**实例：圆锥形****渐变**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 6][]

QConicalGradient radial(width()/2,height()/2,45);
    
        //设置起始点颜色，0表示起始
        radial.setColorAt(0,Qt::yellow);
    
        //设置中间点颜色
        radial.setColorAt(0.5,Qt::blue);
    
        //设置终点颜色 1表示终点
        radial.setColorAt(1,Qt::green);
    
        //设置画刷
        painter.setBrush(radial);
    
        //画矩形
        painter.drawRect(this->rect());

# 7.自定义绘图界面 #

[麦克风音量变化][Link 2]

[圆形进度条实现][Link 3]

[Link 1]: https://blog.csdn.net/wzz953200463/article/details/103809452
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70]: /images/20221023/d62788992b4e45229026a7e9f672a469.png
[20210301213438375.PNG]: /images/20221023/d58fcbdac4c1449abcfb358b24d44bf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 1]: /images/20221023/3acf2b1d89f648b990aec1553d31a555.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 2]: /images/20221023/b534666ad9a8400c872be093023ee05d.png
[20210301213857625.PNG]: /images/20221023/4b5b1ddc934549ea93bb5dfc53201592.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 3]: /images/20221023/1c9bef341b9f480c959b9352e0140613.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 4]: /images/20221023/ede8e9e2809a4a8ea809688d95b39dd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 5]: /images/20221023/4339e1b3577f4138bf66df5e188d9631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6ejk1MzIwMDQ2Mw_size_16_color_FFFFFF_t_70 6]: /images/20221023/9e3748fad85e4e558b4f0da9d795f986.png
[Link 2]: https://blog.csdn.net/wzz953200463/article/details/100538553
[Link 3]: https://blog.csdn.net/wzz953200463/article/details/102612403