引言

本文通過一個Qt Quick項目實例，演示如何使用QML實現常見的圖像變換效果。項目包含縮放、旋轉和平移三種基礎變換操作。

相關閱讀

• Transform文檔：https://doc.qt.io/qt-6/qml-qtquick-transform.html

基礎知識

Qt Quick的Transform類型提供多種圖形變換能力：

1. Rotation：實現旋轉變換，通過angle屬性控制旋轉角度
2. Scale：控制縮放比例，支持x/y軸獨立縮放
3. Translate：實現平面位移變換，通過x/y屬性設置偏移量

---

工程結構

qml_image_transform/
├── CMakeLists.txt        # 項目構建文件
├── Main.qml             # 主界面
├── ImageScale.qml       # 縮放示例
├── ImageRotation.qml    # 旋轉示例
├── ImageTransform.qml   # 平移示例
├── images.qrc           # 資源文件
└── images/              # 圖片資源目錄

---

核心代碼解析

示例1：圖像縮放（ImageScale.qml）

import QtQuick
import QtQuick.ControlsItem {width: 400height: 400Image {id: imagesource: "qrc:/images/deepseek-logo.png"width: 200height: 200anchors.centerIn: parent// 縮放控制property real imageScale: 1.0scale: imageScale// 縮放動畫Behavior on imageScale {NumberAnimation { duration: 200 }}}// 添加縮放控制滑塊Slider {anchors.bottom: parent.bottomwidth: parent.widthfrom: 0.1to: 3.0value: 1.0onValueChanged: image.imageScale = value}
}

這段代碼整體實現了一個簡單的圖片查看器界面，用戶可以通過拖動滑塊來動態調整圖片的縮放比例，并且縮放過程會有平滑的動畫效果。

代碼說明

縮放控制：

• 定義了 imageScale 屬性控制縮放比例，默認值為 1.0。
• 將圖片的 scale 屬性綁定到 imageScale，使其隨 imageScale 變化而縮放。
• 使用 Behavior 和 NumberAnimation 實現縮放動畫效果。

縮放控制滑塊

• Slider 控件用于調整縮放比例，設置了取值范圍和初始值。
• 通過 onValueChanged 將滑塊的值賦給 imageScale，實現動態縮放控制。

運行效果

---

示例2：圖像平移（ImageTransform.qml）

import QtQuick
import QtQuick.ControlsItem {width: 400height: 400Image {id: imagesource: "qrc:/images/deepseek-logo.png"width: 200height: 200anchors.centerIn: parenttransform: Translate {id: translateTransformx: 0y: 0}}// 使用鼠標拖拽實現平移MouseArea {anchors.fill: parentproperty point lastPosonPressed: lastPos = Qt.point(mouse.x, mouse.y)onPositionChanged: {translateTransform.x += mouse.x - lastPos.xtranslateTransform.y += mouse.y - lastPos.ylastPos = Qt.point(mouse.x, mouse.y)}}
}

代碼說明

圖片元素：

• Image 用于顯示圖片，設置了圖片源、寬高，并通過錨點居中顯示在 Item 中。
• 通過 transform 屬性添加了一個 Translate 變換（translateTransform），用于控制圖片的位移，初始時 x 和 y 方向的位移均為 0。

鼠標拖拽平移：

• 在 Item 中添加了一個 MouseArea，覆蓋整個 Item 的區域。
• MouseArea 有一個 lastPos 屬性，用于存儲鼠標按下的位置。
• 在 onPressed 信號處理程序中，將鼠標按下的位置賦給 lastPos。
• 在 onPositionChanged 信號處理程序中，計算鼠標位置的變化量，然后更新 translateTransform 的 x 和 y 值，從而實現圖片的平移。

運行效果

---

示例3：圖像旋轉（ImageRotation.qml）

import QtQuick
import QtQuick.ControlsItem {width: 400height: 400Image {id: imagesource: "qrc:/images/deepseek-logo.png"width: 200height: 200anchors.centerIn: parent// 旋轉控制property real imageRotation: 0rotation: imageRotation// 旋轉動畫Behavior on rotation {NumberAnimation { duration: 200 }}}// 添加旋轉控制滑塊Slider {anchors.bottom: parent.bottomwidth: parent.widthfrom: 0to: 360value: 0onValueChanged: image.imageRotation = value}
}

代碼說明

圖片元素：

• Image 用于顯示圖片，設置了圖片源、寬高，并通過錨點居中顯示在 Item 中。
• 定義了 imageRotation 屬性控制圖片的旋轉角度，默認值為 0。
• 將圖片的 rotation 屬性綁定到 imageRotation，使其隨 imageRotation 變化而旋轉。
• 使用 Behavior 和 NumberAnimation 實現旋轉動畫效果。

旋轉控制滑塊：

• 在 Item 中添加了一個 Slider，用于控制圖片的旋轉角度。
• Slider 的取值范圍設置為 0 到 360，初始值為 0。
• 通過 onValueChanged 將滑塊的值賦給圖片的 imageRotation 屬性，實現動態旋轉控制。

運行效果

---

總結

本文實現了3個示例，分別是：

• 示例1：圖片縮放（通過定義 imageScale 屬性控制圖片縮放比例，利用 Behavior 和 NumberAnimation 實現縮放動畫效果。滑塊的值變化時，動態調整圖片的縮放比例。）
• 示例2：圖片平移（在圖片上添加 Translate 變換，通過鼠標按下的位置和移動的位置差，動態更新圖片的平移量，實現拖拽平移效果。）
• 示例3：圖片旋轉（定義 imageRotation 屬性控制圖片旋轉角度，利用 Behavior 和 NumberAnimation 實現旋轉動畫效果。滑塊的值變化時，動態調整圖片的旋轉角度。）

下載鏈接

工程下載地址：GitCode -> QML Image Transform