【Qt6 QML Book基础】05：图形变换（附完整可运行代码）

引言

在 QML 界面开发中，图形变换（平移、旋转、缩放）是实现交互效果的核心技术。本文基于 Qt 官方教程，通过封装可复用的 ClickableImage 组件，结合实战案例演示图像的动态变换效果，详细解析 QML 变换属性的应用场景与最佳实践。代码包含完整中文注释，控件名称全面汉化，适配 Qt Creator 开发环境，可直接编译运行。

一、运行效果图

本文示例程序运行后呈现以下效果：

1. 初始状态

背景为风景图，上方排列三个可交互图形：蓝色圆形、绿色盒子、红色三角形
图形下方标注中文功能说明，界面布局整洁，色彩对比鲜明

2. 交互效果

点击圆形：每次点击向右平移 20 像素（累计移动效果）
点击盒子：每次点击顺时针旋转 15°（支持 360° 循环旋转）
点击三角形：每次点击同时旋转 15° 并放大 5%（最大缩放至 1.5 倍）
点击背景：一键重置所有图形至初始状态

二、核心组件：可点击图像组件 `ClickableImage.qml`

1. 组件设计目标

功能封装：将图像点击交互逻辑抽象为独立组件，实现代码复用
接口规范：通过信号暴露点击事件，支持外部自定义交互逻辑
视觉优化：内置抗锯齿处理，确保图像变换时边缘平滑

2. 完整代码

// 可点击图像组件（支持点击事件传递）
import QtQuick

Image {
    id: root                // 根元素ID，便于信号触发
    signal clicked          // 定义点击信号，供父组件处理

    // 鼠标交互区域（覆盖整个图像）
    MouseArea {
        anchors.fill: parent  // 自适应父元素尺寸
        onClicked: root.clicked()  // 触发根元素信号，实现事件冒泡
    }

    antialiasing: tr