00. 目錄

文章目錄

• • 00. 目錄
  • 01. 概述
  • 02. 開發環境
  • 03. Qt坐標系統
  • 04. 坐標系統變換
  • 05. 平移變換
  • 06. 縮放變換
  • 07. 扭曲變換
  • 08. 旋轉變換
  • 09. 附錄

01. 概述

Qt中每一個窗口都有一個坐標系統，默認的，窗口左上角為坐標原點，水平向右依次增大，水平向左依次減小，垂直向下依次增大，垂直向上依次減小。原點即為（0，0）點，以像素為單位增減。

02. 開發環境

Windows系統：Windows10

Qt版本：Qt5.15或者Qt6

03. Qt坐標系統

程序示例

void Widget::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setBrush(Qt::red);painter.drawRect(0, 0, 100, 100);painter.setBrush(Qt::yellow);painter.drawRect(-50, -50, 100, 100); }

執行結果

04. 坐標系統變換

默認的，QPainter在指定設備的坐標系統上進行繪制，在進行繪圖時，可以使用QPainter::scale()函數縮放坐標系統；使用QPainter::rotate()函數順時針旋轉坐標系統；使用QPainter::translate()函數平移坐標系統；還可以使用QPainter::shear()圍繞原點來扭曲坐標系統。如下圖所示。

坐標系統的2D變換由QTransform類實現，我們可以使用前面提到的那些便捷函數進行坐標系統變換，當然也可以通過QTransform類實現。

05. 平移變換

程序示例

//平移變換 void Widget::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setBrush(Qt::yellow);painter.drawRect(0, 0, 50, 50);//相當于將(100,100)設為原點painter.translate(100, 100);painter.setBrush(Qt::red);painter.drawRect(0, 0, 50, 50);//相當于在原來原點的基礎之上減去(100, 100)當做新的原點painter.translate(-100, -100);painter.drawLine(0, 0, 20, 20); }

執行結果

這里先在原點(0, 0)繪制了一個寬、高均為50的正方形，然后使用translate()函數將坐標系統進行了平移，使(100, 100)點成為了新原點，所以我們再次進行繪制的時候，雖然drawRect()中的邏輯坐標還是(0, 0)點，但實際顯示出來的卻是在(100, 100)點的紅色正方形。可以再次使用translate()函數進行反向平移，使原點重新回到窗口左上角。

06. 縮放變換

程序示例

//縮放變換 void Widget::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setBrush(Qt::yellow);painter.drawRect(0, 0, 100, 100);//放大兩倍painter.scale(2, 2);painter.setBrush(Qt::red);painter.drawRect(50, 50, 50, 50);}

執行結果

可以看到，當我們使用scale()函數將坐標系統的橫、縱坐標都放大兩倍以后，邏輯上的（50， 50）點變成了窗口上的（100, 100）點，而邏輯上的長度50，繪制到窗口上的長度卻是100。

07. 扭曲變換

程序示例

//扭曲變換 void Widget::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setBrush(Qt::yellow);painter.drawRect(0, 0, 50, 50);//縱向扭曲變換painter.shear(0, 1);painter.setBrush(Qt::blue);painter.drawRect(50, 0, 50, 50); }

執行結果

shear()有兩個參數，第一個是對橫向進行扭曲，第二個是對縱向進行扭曲，而取值就是扭曲的程度。比如程序中對縱向扭曲值為1，那么就是紅色正方形左邊的邊下移一個單位，右邊的邊下移兩個單位，值為1就表明右邊的邊比左邊的邊多下移一個單位。大家可以更改取值，測試效果。

08. 旋轉變換

程序示例

//旋轉變換 void Widget::paintEvent(QPaintEvent *) {QPainter painter(this);painter.drawLine(0, 0, 100, 0);//以原點為中心 順時針旋轉30°painter.rotate(30);painter.drawLine(0, 0, 100, 0);painter.translate(100, 100);painter.rotate(30);painter.drawLine(0, 0, 100, 0); }

執行結果

程序示例二：

//旋轉變換 void Widget::paintEvent(QPaintEvent *) {QPainter painter(this);painter.drawLine(0, 0, 100, 0);//以原點為中心 順時針旋轉30°painter.rotate(30);painter.drawLine(0, 0, 100, 0);//反向旋轉painter.rotate(-30);painter.translate(100, 100);painter.drawLine(0, 0, 100, 0);painter.rotate(30);painter.drawLine(0, 0, 100, 0); }

執行結果：

這次我們在移動原點以前先將坐標系統反向旋轉，可以看到，第二次旋轉也是從水平方向開始的。

其實，前面講到的這幾個變換函數都是如此，他們改變了坐標系統以后，如果不進行逆向操作，坐標系統是無法自動復原

09. 附錄

源碼下載：【Qt】2D繪圖之坐標系統.rar

總結

以上是生活随笔為你收集整理的【Qt】2D绘图之坐标系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。