2. 程式人生 > >QT5學習筆記（一）畫圖

QT5學習筆記（一）畫圖

阿新 • • 發佈：2019-02-19

       在QT的學習道路上一直苦於沒有好的教程，其中有QT學習之路，還有qt實戰一二三等，比較好的部落格的但是也總是感覺不是很方便，QT學習之路講的過於簡單，但是其中的貪吃蛇的小程式倒是挺不錯的一個練習。而qt實戰的部落格裡面講的比較翔實，但是特別不成體系，比較亂，不知道從哪開始學習。而我購買的金大的QT教程，裡面講的特別詳細，但是沒有可以直接執行的程式碼，全部都是各種控制元件，類等的用法感覺很枯燥，用作備查手冊比較好。但是不適合入門的新手學習。最後，我在QT開源社群內找到一個QT4的教程，雖然是QT4但是對於5也是完全適用的，下面使我的學習的心得與記錄。在程式碼中有詳細的註釋，用可以執行的程式碼來帶領學習我覺得更加該高效。下面給出

教程地址，可以將教程和我的程式碼結合起來看，最後自己敲出來。

程式碼如下

每一步都會有詳細的註釋，都可以f2轉到定義來找到，可以先看程式碼敲一邊然後再看教程

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QPainter>//包含繪圖操作的標頭檔案

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 &center, qreal radius, const QPointF &focalPoint);
    * QRadialGradient(qreal cx, qreal cy, qreal radius, qreal fx, qreal fy);
    * 預設漸變開始的起點在圓心
    * QRadialGradient(const QPointF &center, qreal radius);
    * QRadialGradient(qreal cx, qreal cy, qreal radius);
    *
    * QRadialGradient(const QPointF &center, 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);
     *
     *
     *  */


相關推薦

QT5學習筆記（一）畫圖

       在QT的學習道路上一直苦於沒有好的教程，其中有QT學習之路，還有qt實戰一二三等，比較好的部落格的但是也總是感覺不是很方便，QT學習之路講的過於簡單，但是其中的貪吃蛇的小程式倒是挺不錯的一個練習。而qt實戰的部落格裡面講的比較翔實，但是特別不成體系，比較亂，不知

Qt學習筆記（一） VS2013編譯Qt5.4靜態庫(轉)

一、環境配置 我目前用的系統是Windows 8.1，請注意安裝好以下軟體，以及配置好環境變數： Visual Studio 2013 python perl 安裝好以上軟體 請用cmd測試下 python 和perl,如果提示不是內部或外部命令，也不是可執行的程式或批處理

python框架之 Tornado 學習筆記（一）

tornado pythontornado 一個簡單的服務器的例子：首先，我們需要安裝 tornado ，安裝比較簡單： pip install tornado 測試安裝是否成功，可以打開python 終端，輸入： import tornado.https

Scala學習筆記（一）編程基礎

大數據 上一個 extends 移除 condition api arr 調用方法 tab 強烈推薦參考該課程：http://www.runoob.com/scala/scala-tutorial.html 1. Scala概述 1.1. 什麽是Scala Scala

3D Game Programming withDX11 學習筆記（一） 數學知識總結

表示 圖形 http 根據 轉置 元素 material -s com 　　在圖形學中，數學是不可或缺的一部分，所以本書最開始的部分就是數學知識的復習。在圖形學中，最常用的是矢量和矩陣，所以我根據前面三個章節的數學知識，總結一下數學知識。 一、矢量 　 數學中的矢量，擁有

系統分析與設計學習筆記（一）

學習 掌握 應該 溝通 基本 最終 表示 對象 毫無 為什麽要學習這門課程？ 　　“擁有一把錘子未必能成為建築師”。 這門課程學習的是面向對象分析和設計的核心技能的重要工具。對於使用面向對象技術和語言來，創建設計良好、健壯且可維護的軟件來說，這門課程所

最大熵學習筆記（一）預備知識

color wrap targe dsm entropy plus 文件 eight 相關鏈接 生活中我們常常聽到人們說“不要把雞蛋放到一個籃子裏”。這樣能夠減少風險。深究一下，這是為什麽呢？事實上，這裏邊包括了所謂的最大熵原理（The Maxim

Nginx模塊之Nginx-Ts-Module學習筆記（一）搶險體驗

學習筆記 體驗 nginx模塊 int images clas tps gin issues 1、通過HTTP接收MPEG-TS2、生產和管理Live HLS 3、按照官方的編譯和配置，當然了我是第一次編譯沒有通過，在作者重新調整下，編譯成功，感謝：@arut https:

jq學習筆記（一）

簡單 ren 當前 一個 text 互斥 元素 如果 property 1 .attr() 與 .removeAttr()方法 - atr()方法用來獲取和設置元素屬性 attr()有4個表達式： attr(傳入屬性名)：獲取屬性的值 attr(屬性名, 屬性

Redis學習筆記（一）關於在windows64位環境下的安裝學習使用

客戶端 mas key-value 錯誤 services 再次 基準 alt 類型 前言 由於工作需要，目前我正在學習使用Redis。我當時學習Redis就從網上下載了點資料就開始學習了。入門看的是《REDIS入門指南》，這本書個人覺得很適合新手用來學習接觸。根據書上的引

Memcache 學習筆記（一）----Memcache — Linux部署

工作 apach sch trick 解壓 font ash 一個 鍵值 　　Memcache 一、Memcache簡介（內容摘自 --百度百科） 　　memcache是一套分布式的高速緩存系統，由LiveJournal的Brad Fitzpatrick開發，但目前被許多網

HtmlParser學習筆記（一）-- 創建Parser對象

nco 修改 英文 text aid 意思 charset 網頁 第一個 首先 ，介紹下HTMLParser的核心類，org.htmlparser.Parser類，這個類實際完成了對於HTML頁面的分析工作。主要的構造函數如下： public Parser ();

Python 學習筆記（一）

pytho oat 變量 情況 class 弱類型 定義 寫代碼 基本上 為什麽學習Python?因為Python 的用處太多了。 本想學會一們語言就好好的維持下去，但是最近Python太火啦，什麽人工智能、網絡爬蟲的，耳濡目染的，心想多學習一些東西總是好的，於是就抽空學習

thphp5.0學習筆記（一）

mic tel 序號 app clas world char p s 庫類 1.目錄結構： 其中thinkphp子目錄是框架核心目錄 thinkphp結構： 2.入口文件 默認自帶的入口文件位於public/index.php 應用目錄為application，其結構

Unity Shader學習筆記（一）坐標變換

directx 渲染 系列 約束 shade ace cnblogs 相機 它的 基本問題 　　試想我們的美術做了一個3D模型，然後渲染引擎把模型渲染到屏幕上。我們還可以選定不同的視角，模擬不同的光照條件去觀察模型。現在來分析一下這個過程。如果說我們把這個過程看成一個函數，

Django學習筆記（一）——安裝，創建項目,配置

lvs csv oot url root import 方式 配置文件 函數 瘋狂的暑假學習之 Django學習筆記（一） 教材 書《The Django Book》 視頻：csvt Django視頻 1.創建項目

ELK學習筆記（一）安裝Elasticsearch、Kibana、Logstash和X-Pack

成功 前端 功能 靈活 日誌分析 傳統 開發人員 收集 還在 最近在學習ELK的時候踩了不少的坑，特此寫個筆記記錄下學習過程。 日誌主要包括系統日誌、應用程序日誌和安全日誌。系統運維和開發人員可以通過日誌了解服務器軟硬件信息、檢查配置過程中的錯誤及錯誤發生的原因。經常分析日

移動端學習筆記（一）

標簽設置 裏的 none trait 關於 http width 面具 屏幕 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-s

mongoDB學習筆記（一）

介紹 tle 狀態 負載 tutorial dir 基於 管理 集合 說明： MongoDB由databases組成，database由collections組成，collection由documents組成，document由fileds組成。MongoDB是異步寫數據

c 語言學習筆記（一）基礎

lac alert https 內容 con 標記 prime c++ prime c基礎 近期工作上有對C語言算法上的需求，所以要學C，上學的時候沒學過，只學過半年的Java（我是專升本，本科學的材料），2015年工作後也學過C，那時候的需求是能看懂就可以，也就沒深入研究