第66课 - 基础图形绘制（上） --- 动态随机绘图

1、基础图形绘制

Qt图形系统中的关键角色

- QPainter

• Qt中的画家，能够绘制各种基础图形

• 拥有绘图所需的画笔(QPen) , 画刷(QBrush) , 字体(QFont)

- QPaintDevice

• Qt中的画布，画家(QPainter)的绘图板

• 所有的QWidget类都继承自QPaintDevice

★ 即可以在任意QWidget对象上绘制

Qt图形系统中的关键角色

小贴士：

1. QPainter中的所有绘制参数都可以自定义

2. 任意的QWidget对象都能够作为画布绘制图形

画家(QPainter)所使用的工具角色

- QPen

★ 用于绘制几何图形的边缘，由颜色，宽度，线风格等参数组成

- QBrush

★ 用于填充几何图形的调色板，由颜色和填充风格组成

- QFont

★ 用于文本绘制，由字体属性组成

QPainter的基本绘图能力

重要规则

－只能在QWidget::paintEvent中绘制图形

如何动态绘制需要的图形？

工程中的解决方案（模型视图思想）

1. 根据需要确定参数对象（绘图类型，点坐标，角度，等） - 数据

2. 将参数对象存入数据集合中（如：链表） - 模型

3. 在paintEvent函数中遍历数据集合 - 视图

4. 根据参数对象绘制图形 (update())

2、编程实验

动态随机绘图 66-1.pro

Widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QtGui/QWidget>
#include <QPushButton>
#include <QPoint>
#include <QList>

class Widget : public QWidget
{
    Q_OBJECT

    enum
    {
        LINE,
        RECT,
        ELLIPSE
    };

    struct DrawParam //保存绘制参数
    {
        int type; //图形类型
        Qt::PenStyle pen;  //画笔类型
        QPoint begin;
        QPoint end;
    };
    
    QPushButton m_testBtn;
    QList<DrawParam> m_list;//用链表保存绘图参数对象


protected slots:
    void onTestBtnClicked();
protected:
    void paintEvent(QPaintEvent *);
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

Widget.cpp

#include "Widget.h"
#include <QPainter>
#include <QPoint>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    m_testBtn.setParent(this);
    m_testBtn.move(400, 300);
    m_testBtn.resize(70, 30);
    m_testBtn.setText("Test");

    resize(500, 350);

    connect(&m_testBtn, SIGNAL(clicked()), this, SLOT(onTestBtnClicked()));
}

void Widget::onTestBtnClicked()
{
    DrawParam dp =  //定义绘图参数对象
    {
        qrand() % 3, //0，1，2
        static_cast<Qt::PenStyle>(qrand() % 5 + 1),//1-5
        QPoint(qrand() % 400, qrand() % 300),
        QPoint(qrand() % 400, qrand() % 300)
    };

    if( m_list.count() == 5 )//最多只能画5个图案
    {
        m_list.clear();
    }

    m_list.append(dp); //放到链表 (模型数据改变，需要通知视图更新数据)

    update(); //强制更新主窗口内容，于是paintEvent函数被调用
}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter; //定义QPainter对象

    painter.begin(this); //在当前Widget对象上开始绘图，可以手工指定开始结束绘图

    for(int i=0; i<m_list.count(); i++)
    {
        int x = (m_list[i].begin.x() < m_list[i].end.x()) ? m_list[i].begin.x() : m_list[i].end.x();
        int y = (m_list[i].begin.y() < m_list[i].end.y()) ? m_list[i].begin.y() : m_list[i].end.y();
        int w = qAbs(m_list[i].begin.x() - m_list[i].end.x()) + 1;
        int h = qAbs(m_list[i].begin.y() - m_list[i].end.y()) + 1;

        painter.setPen(m_list[i].pen);//设置画笔类型到QPainter对象

        switch(m_list[i].type)
        {
        case LINE:
            painter.drawLine(m_list[i].begin, m_list[i].end);
            break;
        case RECT:
            painter.drawRect(x, y, w, h);
            break;
        case ELLIPSE:
            painter.drawEllipse(x, y, w, h);
            break;
        default:
            break;
        }
    }

    painter.end();
}

Widget::~Widget()
{
    
}

3、小结

QPainter是Qt中的关键绘图类

QPainter只能在QPaintDevice上绘图

paintEvent()是Qt中的绘图上下文

工程中通过改变绘图参数进行动态绘图

第66课 - 基础图形绘制（上） --- 动态随机绘图

猜你喜欢