QML 图像变换（缩放、平移、旋转）

引言

本文通过一个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