📖 简介

图形平移与旋转交互演示是由孔苏未来教育研究院开发的在线教学辅助系统，采用原生JavaScript+SVG技术构建。它以等腰三角形为载体，通过可交互的控制点设计，让学生在拖拽操作中实时观察图形变换的数学规律。系统内置智能参数监控、几何性质计算、自动演示序列等功能，将传统静态几何教学升级为动态探究式学习体验。

🎯 主要功能

1. 双模式变换系统

• 平移模式：拖动任意顶点即可整体移动图形，实时计算并显示位移向量Δx、Δy
• 旋转模式：独立设置旋转中心，拖动顶点实现绕定点旋转，动态显示旋转角度θ

2. 多维度数据监控面板

• 实时坐标追踪：精确到0.1cm的三顶点坐标显示（A/B/C）
• 变换参数面板：平移向量、旋转角度、旋转中心坐标同步更新
• 几何性质验证：自动计算并显示边长AB/BC/CA和三角形面积，验证变换不变性

3. 交互式视觉元素

• 可拖动控制点：8px蓝色圆形控制点，支持鼠标悬停放大效果
• 旋转中心标记：红色十字准星标识，可独立拖动定位
• 智能网格系统：主网格(5cm)+次网格(1cm)双层设计，辅助精确测量
• 坐标轴标注：完整x/y轴、原点O、刻度标签（-14至+14）

4. 教学辅助工具

• 一键重置：快速恢复初始状态，便于对比教学
• 自动演示：预设8秒动画序列（平移→旋转→重置），适合课堂展示
• 响应式设计：自适应PC/平板/手机，支持触摸操作
• 视觉反馈：毛玻璃UI、渐变背景、按钮激活状态提示

🏫 适用场景

📋 使用说明

第一步：访问与启动

1. 用浏览器打开文件
2. 页面自动加载初始三角形（顶点A(3,4)、B(-3,4)、C(0,-2)）
3. 等待网格、坐标轴、控制点渲染完成

第二步：选择变换模式

• 平移教学：点击左上角"平移变换"按钮（默认激活）

  • 拖动任意蓝色控制点，三角形整体移动
  • 观察右侧Δx/Δy参数实时变化
• 旋转教学：点击"旋转变换"按钮

  • 先拖动红色旋转中心到目标位置
  • 再拖动蓝色顶点，图形绕中心旋转
  • 观察旋转角度θ和顶点坐标变化

第三步：数据观察与分析

1. 监控坐标变化：右侧信息面板实时显示三顶点精确坐标
2. 验证性质不变性：对比变换前后边长、面积数据是否一致
3. 读取变换参数：准确获取平移向量或旋转角度的数值解

第四步：使用辅助功能

• 重置图形：点击"重置图形"按钮，一键恢复初始状态
• 自动演示：点击"自动演示"按钮，观看预设的交互动画
• 触摸操作：在平板/手机上直接用手指拖动控制点

第五步：教学应用技巧

1. 对比教学：先演示平移，重置后再演示旋转，突出差异
2. 精确引导：利用网格让学生预测变换后的坐标并验证
3. 性质探究：提问"为什么面积不变？"引导学生观察数据
4. 分层教学：对学有余力的学生可讲解背后的矩阵变换原理