QT通过获得的数据绘制方波+坐标系（QT系列5）

文章包括如下内容：
1.用pen绘制一条直线
2.用push绘制一个实心矩形
3.绘制横版文字和竖版文字
4.绘制一个带坐标系的方波图像

PS：如果还想绘制更多种不同的图形，可以：
1.QPainter处按F1进入帮助界面看各个函数的具体使用方法
2.直接百度
（推荐真正用到的时候再查，否则容易忘。）

一、绘制直线
1.新建工程

基类类型选择QWidget
2.修改.h文件

引入头文件QPainter
继承一个虚函数 void paintEvent(QPaintEvent *);
具体代码如下：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPainter>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();


private:
    Ui::Widget *ui;
    
protected:
    void paintEvent(QPaintEvent *);
};

#endif // WIDGET_H

3.修改widget.cpp文件

给继承过来的虚函数 void paintEvent(QPaintEvent *);添加定义。
新建一个Qpainter变量，设置pen，并在（100，100）和（200，200）之间画一条红色的直线。
具体代码如下：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    
}

Widget::~Widget()
{
    delete ui;
}
//绘制函数
void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPen pen;
    pen.setColor(QColor(255,0,0));
    painter.setPen(pen);
    painter.drawLine(QPointF(100, 100), QPointF(200, 200));
}

效果如下：

pen不止可以设置颜色，还可以设置粗细等许多属性。

二、绘制实心矩形
1.修改widget.cpp文件

QColor的参数为RGBA，分别为红绿蓝和透明度，取值为0-255。
下面用brush画两个不同透明度的黄色矩形显示效果。
代码如下：

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QBrush brush(QColor(255,255,0,150));
    painter.setBrush(brush);
    painter.drawRect(50,50,200,100);
    
    brush.setColor(QColor(255,255,0,50));
    painter.setBrush(brush);
    painter.drawRect(200,100,200,100);

}

效果如下：

三、绘制文字

1.修改widget.cpp文件

修改绘制函数，通过对pen的设置可以改变字体的颜色。
通过对font的设置可以修改字体，字号，上下划线，字间距，斜体，粗体……
下面写一个宋体，20号，红色的 “啊？”在（30，30）处。
代码如下：

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPen pen;
    pen.setColor(QColor(255,0,0));
    QFont font("宋体",20);
    painter.setFont(font);
    painter.setPen(pen);
    painter.drawText(30,30,"啊？");

}

效果如下：

2.绘制竖版的文字
代码如下：

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPen pen;
    pen.setColor(QColor(255,0,0));
    QFont font("宋体",20);
    painter.setFont(font);
    painter.setPen(pen);
    painter.rotate(90);
    painter.drawText(30,-30,"啊？");

}

这里使用了painter.rotate(90);函数，其作用是顺时针旋转坐标系90度，这时如果还想再原坐标系的（30，30）绘制，现在就需要改为（30，-30）了。
（注意旋转的是坐标系，如果想回到原来坐标系，需要再转270）
效果如下：

四、绘制带坐标系的方波图像
1.修改widget.cpp文件
具体思路为绘制两条直线当作坐标轴，然后加上坐标轴的名和分度值，然后绘制一个方波图像。坐标轴名和分度值放置的具体位置可以自己多次换数最终得到一个合适的值。
具体代码如下：

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPen pen;
    QFont font;
    font.setPointSize(6);//字号
    painter.setFont(font);
    pen.setColor(QColor(0,0,0));//图像颜色
    //坐标轴
    painter.drawLine(QPointF(10,100),QPointF(200,100));
    painter.drawLine(QPointF(10,100),QPointF(10,10));
    //坐标轴名
    painter.drawText(25,15,tr("幅值"));painter.drawText(210,100,tr("时间"));
    //坐标轴分度值
    int y=0;
    while(y<100)
    {
        painter.drawText(12,110-y,tr("%1").arg(y));
        y+=10;
    }
    int x=20;
    while(x<200)
    {
        painter.drawText(x+12,110,tr("%1").arg(x));
        x+=20;
    }
    //方波图像
    int x1=20,y1=100,h1=50,w1=10,t1=20;
    pen.setColor(QColor(0,255,0));
    pen.setWidth(3);
    painter.setPen(pen);
    for(int i=0;i<8;i++)
    {
        painter.drawLine(QPointF(x1,y1),QPointF(x1,y1-h1));
        painter.drawLine(QPointF(x1,y1-h1),QPointF(x1+w1,y1-h1));
        painter.drawLine(QPointF(x1+w1,y1-h1),QPointF(x1+w1,y1));
        painter.drawLine(QPointF(x1+w1,y1),QPointF(x1+t1,y1));
        x1+=t1;
    }


}

效果如下：

本文到此结束，下一篇为如何在上一篇文章讲过的带有滑动条的界面上作画。