QT5学习笔记（一）画图

       在QT的学习道路上一直苦于没有好的教程，其中有QT学习之路，还有qt实战一二三等，比较好的博客的但是也总是感觉不是很方便，QT学习之路讲的过于简单，但是其中的贪吃蛇的小程序倒是挺不错的一个练习。而qt实战的博客里面讲的比较翔实，但是特别不成体系，比较乱，不知道从哪开始学习。而我购买的金大的QT教程，里面讲的特别详细，但是没有可以直接运行的代码，全部都是各种控件，类等的用法感觉很枯燥，用作备查手册比较好。但是不适合入门的新手学习。最后，我在QT开源社区内找到一个QT4的教程，虽然是QT4但是对于5也是完全适用的，下面使我的学习的心得与记录。在代码中有详细的注释，用可以运行的代码来带领学习我觉得更加该高效。下面给出教程地址，可以将教程和我的代码结合起来看，最后自己敲出来。

代码如下

每一步都会有详细的注释，都可以f2转到定义来找到，可以先看代码敲一边然后再看教程

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include //包含绘图操作的头文件

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

MainWindow::~MainWindow()
{
    delete ui;
}
void MainWindow::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    //画直线 f2进入定义发现
    /* 画直线的函数一共有5个重载函数
     * inline void drawLine(const QLineF &line);
     * inline void drawLine(const QPointF &p1, const QPointF &p2);//点到点
     * inline void drawLine(const QPoint &p1, const QPoint &p2);//点到点
     * inline void drawLine(const QLine &line);
     * inline void drawLine(int x1, int y1, int x2, int y2);//点的xy值到点的xy值
     *
     *  */
    /*case 1
    painter.drawLine(QPointF(0,0),QPointF(100,100));
      case 1*/
    /*画矩形 同样f2到定义，一共有三个重载函数
     *
     * inline void drawRect(const QRectF &rect);
     * x y是矩形左上角的坐标 w 与h 分别是width宽度和high高度
     * inline void drawRect(int x1, int y1, int w, int h);
     * //直接给传给函数一个矩形对象
     * inline void drawRect(const QRect &rect);
     * */
    /* case 2
    QPen pen;//定义了一个QPen笔对象
    QBrush brush(QColor(0,255,0,125));//笔刷
    pen.setColor(QColor(255,0,0));//设置笔的颜色

    painter.setPen(pen);
    painter.setBrush(brush);

    painter.drawRect(50,50,200,100);//画一个矩形
      case 2*/
    /* 画圆弧
     * 发现有三个重载函数
     * 原理都是先画一个矩形，然后指定开始角度和跨越角度，不再详述
     *  */
    /* case 3
    QRectF rectangle(10.0, 20.0, 80.0, 60.0); //矩形

    //为了增加精度，QT将每一度分为30份，所以10度 是对应10×30 20度对应20×30
    int startAngle = 30 * 16;     //起始角度
    int spanAngle = 120 * 16;   //跨越度数
    painter.drawArc(rectangle, startAngle, spanAngle);
     case 3*/
 /*
  * 渐变填充
  * 线性渐变（linear gradient）在开始点和结束点之间插入颜色；
  * 辐射渐变（radial gradient）在焦点和环绕它的圆环间插入颜色；
  * 锥形渐变（Conical）在圆心周围插入颜色。
  *  */
//线性渐变
    /* case 4
   QLinearGradient linearGradient(QPointF(10, 20), QPointF(100, 60));
   //定义了一个线性渐变的对象，其中矩形右上角是渐变的开始点，矩形的右下角是渐变的终点
   //插入颜色
   //渐变变量从起点时为0 终点时为1 ，线性变换
   linearGradient.setColorAt(0, Qt::yellow);
   linearGradient.setColorAt(0.5, Qt::red);
   linearGradient.setColorAt(1, Qt::green);

   //指定渐变区域以外的区域的扩散方式
   linearGradient.setSpread(QGradient::ReflectSpread);
   //在渐变区域外是重复变化
   //可选择的对象有，按f2找到 可分别实验效果
   //PadSpread,
   //ReflectSpread,
   //RepeatSpread

   //使用渐变作为画刷

   painter.setBrush(linearGradient);
   //测试线性渐变
   //painter.drawRect(10, 20, 90, 40);
   //测试渐变区域外的扩散方式
   painter.drawRect(0, 0, 500, 500);
    case 4*/

//辐射渐变
   /*对于辐射渐变我们只需要理解构造函数的意思便可
    * 对于QradialGradient类 由多个重载构造函数，同样我们转到定义
    * 其中
    * QRadialGradient();
    * 第一个点是渐变区域的原点，然后是区域半径，最后一个点是渐变开始的起点
    *
    * QRadialGradient(const QPointF ¢er, qreal radius, const QPointF &focalPoint);
    * QRadialGradient(qreal cx, qreal cy, qreal radius, qreal fx, qreal fy);
    * 默认渐变开始的起点在圆心
    * QRadialGradient(const QPointF ¢er, qreal radius);
    * QRadialGradient(qreal cx, qreal cy, qreal radius);
    *
    * QRadialGradient(const QPointF ¢er, qreal centerRadius, const QPointF &focalPoint, qreal focalRadius);
    * QRadialGradient(qreal cx, qreal cy, qreal centerRadius, qreal fx, qreal fy, qreal focalRadius);
    *
    *  */

   //QRadialGradient radialGradient(QPointF(100, 190),50,QPointF(275,200));
   /* case 5
   QRadialGradient radialGradient(100, 190,100);
   //和线性渐变一样，变量从0到1变化
   radialGradient.setColorAt(0, QColor(255, 255, 100, 150));
   radialGradient.setColorAt(1, QColor(0, 0, 0, 50));

   painter.setBrush(radialGradient);
   painter.drawEllipse(QPointF(100, 190), 50, 50);
   case 5*/

//锥形渐变
    /*
     * 和前面的一样，构造函数第一个参数是原点
     * 后面一个是半径
     *
     *  */
   /*case 6
   QConicalGradient conicalGradient(QPointF(250, 190), 60);
   conicalGradient.setColorAt(0.2, Qt::cyan);
   conicalGradient.setColorAt(0.9, Qt::black);
   painter.setBrush(conicalGradient);
   painter.drawEllipse(QPointF(250, 190), 50, 50);
   case 6*/

//绘制文字
    /*绘制文字主要需要理解下面两个内容
     * 1 函数drawText
     * 2 字体格式类 QFont
     * ===========drawText=========
     * 点p与设置的字体的左下角对齐
     * void drawText(const QPointF &p, const QString &s);
     * inline void drawText(const QPoint &p, const QString &s);
     * inline void drawText(int x, int y, const QString &s);
     *
     * void drawText(const QPointF &p, const QString &str, int tf, int justificationPadding);
     * 第一个参数是字体放置区域的矩形
     * 第二个参数是放置的方式 具体位置看下面的例子
     * AlignLeft = 0x0001,
     * AlignLeading = AlignLeft,
       AlignRight = 0x0002,
       AlignTrailing = AlignRight,
       AlignHCenter = 0x0004,
       AlignJustify = 0x0008,
       AlignAbsolute = 0x0010,
       AlignTop = 0x0020,
       AlignBottom = 0x0040,
       AlignVCenter = 0x0080,
       AlignBaseline = 0x0100,
     *
     * 第三个参数是需要绘制的文字
     * 第四个缺省参数
     *
     * void drawText(const QRectF &r, int flags, const QString &text, QRectF *br = Q_NULLPTR);
     * void drawText(const QRect &r, int flags, const QString &text, QRect *br = Q_NULLPTR);
     * inline void drawText(int x, int y, int w, int h, int flags, const QString &text, QRect *br = Q_NULLPTR);
     *
     * void drawText(const QRectF &r, const QString &text, const QTextOption &o = QTextOption());
     *
     * ===========QFont============
     *
     * 设置下划线 上划线等
     * 设置字母大小写
     * 设置字符间的间距
     *
     *  */
    /*  case 7
    //设置一个矩形
    QRectF rect(20, 20, 300, 200);
    //为了更直观地看到字体的位置，我们绘制出这个矩形
    painter.drawRect(rect);
    painter.setPen(QColor(Qt::red));
    //我们这里先让字体水平居中
    //函数1 2
    //painter.drawText(QPoint(320,220),"第一，二个构造函数");//该点是矩形的右下角
    //函数 3
    //painter.drawText(100,100,"第三个构造函数");//也是矩形的右下角
    //函数4 5 6
    //AlignHCenter参数指在矩形中间
     painter.drawText(rect,Qt::AlignLeft,"AlignLeft");//第二个参数是在矩形的中间
     painter.drawText(rect,Qt::AlignRight,"AlignRight");//右上角
     painter.drawText(rect,Qt::AlignHCenter,"AlignHCenter");//中间
     painter.drawText(rect,Qt::AlignJustify,"AlignJustify");
     painter.drawText(rect,Qt::AlignAbsolute,"AlignAbsolute");
     painter.drawText(rect,Qt::AlignTop,"AlignTop");
     painter.drawText(rect,Qt::AlignBottom,"AlignBottom");//左下角
     painter.drawText(rect,Qt::AlignVCenter,"AlignVCenter");//左中间
     painter.drawText(rect,Qt::AlignBaseline,"AlignBaseline");
    //函数7
    //painter.drawText(rect,"第七个构造函数");//与矩形的左上角对齐

    QFont font("宋体", 15, QFont::Bold, true);
    //设置下划线
    font.setUnderline(true);
    //设置上划线
    font.setOverline(true);
    //设置字母大小写
    font.setCapitalization(QFont::SmallCaps);
    //设置字符间的间距
    font.setLetterSpacing(QFont::AbsoluteSpacing, 10);
    //使用字体
    painter.setFont(font);
    painter.setPen(Qt::green);
    painter.drawText(120, 80, tr("yafeilinux"));

    painter.translate(50, 50);//对字体的平移操作
    painter.rotate(90);//对字体的旋转操作

    painter.drawText(0, 0, tr("helloqt"));
    case 7*/



//绘制路径
    QPainterPath path;

    path.addRect(50, 50, 40, 40);//绘制完矩形后坐标落在矩形的左上角
    path.lineTo(100, 100);//从左上角画到（100,100）
    path.moveTo(200, 200);//将路径当前点移动到（200,200）
    path.lineTo(300,400);//画直线到（300,400）

    painter.drawPath(path);

//绘制图片
    /*drawPixmap函数
     *
     *
      void drawPixmap(const QRectF &targetRect, const QPixmap &pixmap, const QRectF &sourceRect);
      inline void drawPixmap(const QRect &targetRect, const QPixmap &pixmap, const QRect &sourceRect);
      inline void drawPixmap(int x, int y, int w, int h, const QPixmap &pm,
                           int sx, int sy, int sw, int sh);
      inline void drawPixmap(int x, int y, const QPixmap &pm,
                           int sx, int sy, int sw, int sh);
      inline void drawPixmap(const QPointF &p, const QPixmap &pm, const QRectF &sr);
      inline void drawPixmap(const QPoint &p, const QPixmap &pm, const QRect &sr);
      void drawPixmap(const QPointF &p, const QPixmap &pm);
      inline void drawPixmap(const QPoint &p, const QPixmap &pm);
      inline void drawPixmap(int x, int y, const QPixmap &pm);
      inline void drawPixmap(const QRect &r, const QPixmap &pm);
      inline void drawPixmap(int x, int y, int w, int h, const QPixmap &pm);
     *
     *
     *  */
    QPixmap pix;
    pix.load("../painter_2/logo.png");//中间是图片的地址，最好是绝对地址避免出错
    painter.drawPixmap(0, 0, 129, 66, pix);//常用的两个函数重载
    //前面两个参数是图片的位置，后面是图片的大小
    //drawPixmap(0,0,pix)按照图片原来的大小来绘制图片


}

基础图形

绘制直线

    /* 画直线的函数一共有5个重载函数
     * inline void drawLine(const QLineF &line);
     * inline void drawLine(const QPointF &p1, const QPointF &p2);//点到点
     * inline void drawLine(const QPoint &p1, const QPoint &p2);//点到点
     * inline void drawLine(const QLine &line);
     * inline void drawLine(int x1, int y1, int x2, int y2);//点的xy值到点的xy值
     *
     *  */

 绘制矩形

    /*画矩形 同样f2到定义，一共有三个重载函数
     *
     * inline void drawRect(const QRectF &rect);
     * x y是矩形左上角的坐标 w 与h 分别是width宽度和high高度
     * inline void drawRect(int x1, int y1, int w, int h);
     * //直接给传给函数一个矩形对象
     * inline void drawRect(const QRect &rect);
     * */

 绘制圆弧

    /* 画圆弧
     * 发现有三个重载函数
     * 原理都是先画一个矩形，然后指定开始角度和跨越角度，不再详述
     *  */

渐变填充

 /*
  * 渐变填充
  * 线性渐变（linear gradient）在开始点和结束点之间插入颜色；
  * 辐射渐变（radial gradient）在焦点和环绕它的圆环间插入颜色；
  * 锥形渐变（Conical）在圆心周围插入颜色。

  *  */

线性渐变

辐射渐变

   /*对于辐射渐变我们只需要理解构造函数的意思便可
    * 对于QradialGradient类 由多个重载构造函数，同样我们转到定义
    * 其中
    * QRadialGradient();
    * 第一个点是渐变区域的原点，然后是区域半径，最后一个点是渐变开始的起点
    *
    * QRadialGradient(const QPointF ¢er, qreal radius, const QPointF &focalPoint);
    * QRadialGradient(qreal cx, qreal cy, qreal radius, qreal fx, qreal fy);
    * 默认渐变开始的起点在圆心
    * QRadialGradient(const QPointF ¢er, qreal radius);
    * QRadialGradient(qreal cx, qreal cy, qreal radius);
    *
    * QRadialGradient(const QPointF ¢er, qreal centerRadius, const QPointF &focalPoint, qreal focalRadius);
    * QRadialGradient(qreal cx, qreal cy, qreal centerRadius, qreal fx, qreal fy, qreal focalRadius);
    *
    *  */

锥形渐变

    /*
     * 和前面的一样，构造函数第一个参数是原点
     * 后面一个是半径
     *  */

绘制文字

     /*绘制文字主要需要理解下面两个内容
     * 1 函数drawText
     * 2 字体格式类 QFont
     * ===========drawText=========
     * 点p与设置的字体的左下角对齐
     * void drawText(const QPointF &p, const QString &s);
     * inline void drawText(const QPoint &p, const QString &s);
     * inline void drawText(int x, int y, const QString &s);
     *
     * void drawText(const QPointF &p, const QString &str, int tf, int justificationPadding);
     * 第一个参数是字体放置区域的矩形
     * 第二个参数是放置的方式 具体位置看下面的例子
     * AlignLeft = 0x0001,
     * AlignLeading = AlignLeft,
       AlignRight = 0x0002,
       AlignTrailing = AlignRight,
       AlignHCenter = 0x0004,
       AlignJustify = 0x0008,
       AlignAbsolute = 0x0010,
       AlignTop = 0x0020,
       AlignBottom = 0x0040,
       AlignVCenter = 0x0080,
       AlignBaseline = 0x0100,
     *
     * 第三个参数是需要绘制的文字
     * 第四个缺省参数
     *
     * void drawText(const QRectF &r, int flags, const QString &text, QRectF *br = Q_NULLPTR);
     * void drawText(const QRect &r, int flags, const QString &text, QRect *br = Q_NULLPTR);
     * inline void drawText(int x, int y, int w, int h, int flags, const QString &text, QRect *br = Q_NULLPTR);
     *
     * void drawText(const QRectF &r, const QString &text, const QTextOption &o = QTextOption());
     *
     * ===========QFont============
     *
     * 设置下划线 上划线等
     * 设置字母大小写
     * 设置字符间的间距
     *
     *  */

绘制路径

 绘制图片

    /*drawPixmap函数
     *
     *
      void drawPixmap(const QRectF &targetRect, const QPixmap &pixmap, const QRectF &sourceRect);
      inline void drawPixmap(const QRect &targetRect, const QPixmap &pixmap, const QRect &sourceRect);
      inline void drawPixmap(int x, int y, int w, int h, const QPixmap &pm,
                           int sx, int sy, int sw, int sh);
      inline void drawPixmap(int x, int y, const QPixmap &pm,
                           int sx, int sy, int sw, int sh);
      inline void drawPixmap(const QPointF &p, const QPixmap &pm, const QRectF &sr);
      inline void drawPixmap(const QPoint &p, const QPixmap &pm, const QRect &sr);
      void drawPixmap(const QPointF &p, const QPixmap &pm);
      inline void drawPixmap(const QPoint &p, const QPixmap &pm);
      inline void drawPixmap(int x, int y, const QPixmap &pm);
      inline void drawPixmap(const QRect &r, const QPixmap &pm);
      inline void drawPixmap(int x, int y, int w, int h, const QPixmap &pm);
     *
     *
     *  */