TEACHING TOOL / 数学 · 几何
位似图形
位似（homothety / 位似变换）交互演示 —— 在画布上绘制任意多边形，选取位似中心（自动吸附到顶点 / 边 / 中心），再沿射线选取位似比即可生成对应的位似图形。支持 2D / 3D 切换：3D 模式下原图与位似图被渲染为半透明面，对应边之间连出半透明蓝色面，可鼠标旋转、缩放。
使用步骤
- 画多边形 —— 模式
编辑，点击画布依次添加顶点（≥ 3 个）；按Enter或「完成多边形」结束 - 选位似中心 —— 鼠标移到画布上，自动吸附到原多边形的顶点 / 边 / 中心；点击确定
- 选位似比 —— 中心确定后会出现一条射线，沿射线拖动即可选取任意实数比
k（包括负值与分数） - 预览 —— 切到
预览模式，绿色折线自动连接原图与位似图的对应点，演示"对应点连线过位似中心" - 2D / 3D 切换 —— 工具栏右侧切换视图；3D 模式下原图与位似图为半透明面，对应边之间连出半透明蓝色面，鼠标拖动旋转、滚轮缩放、右键平移
功能特性
- 任意多边形 —— 不限顶点数，自动判定简单多边形（凸或凹均可）
- 自动吸附 —— 鼠标移到原多边形附近时自动吸附到顶点 / 边 / 形心，省得手动对准
- 任意实数比 —— 支持正比、负比（异侧位似）、分数（小数位似）
- 2D / 3D 双视图 —— 2D 演示平面位似关系；3D 演示立体几何意义
- 3D 交互 —— 鼠标拖动旋转、滚轮缩放、右键平移，半透明面展示对应关系
- 参数实时显示 —— 顶点数、位似比
k、|k|、k²（面积比）实时显示在右侧浮动面板 - 撤销 / 重置 ——
← 上一步回退单步操作；重置清空画布
参数说明
| 模式 | 显示值 | 含义 |
|---|---|---|
| 编辑 | 顶点数 | 已添加的多边形顶点数量 |
| 预览 | 位似比 k | 当前选取的位似比（含符号，反映方向与大小） |
| 预览 | ` | k |
| 预览 | k² | 位似比的平方 = 位似前后的面积比 |
数学原理
位似变换（homothety）以点 O 为中心，将任意点 P 映射到射线 OP 上的点 P'，使得
OP' = k · OP
其中 k 是任意非零实数：
k > 0—— 同侧位似（P 与 P' 在 O 同侧）k < 0—— 异侧位似（P 与 P' 在 O 异侧）|k| > 1—— 放大0 < |k| < 1—— 缩小
位似变换保持形状相似：原图形与位似图形相似比为 |k|，面积比为 k²，体积比为 |k|³。
教学场景
- 几何课堂演示 —— 直观展示位似中心、位似比、对应点连线必过位似中心
- 相似三角形铺垫 —— 通过调整
k值理解相似比、面积比的关系 - 分数与小数 —— 用
k = 0.5、k = 2/3等具体值帮学生理解非整数比 - 异侧位似 —— 用负
k演示平面镜像类操作（旋转 180° 的位似） - 3D 几何拓展 —— 切到 3D 模式演示正多边形位似成棱柱 / 棱锥的视觉效果
技术实现
- Canvas 2D —— 2D 视图基于原生
<canvas>，所有几何运算（吸附、位似、绘制）实时进行 - Three.js —— 3D 视图使用 Three.js 渲染半透明面与边线连接
- OrbitControls —— 鼠标旋转 / 缩放 / 平移的开箱即用控件
- 几何判定 ——
isConvexAndSimple校验多边形合法性，避免自交多边形 - 吸附算法 —— 顶点吸附（距离 ≤ 阈值）+ 边吸附（点到线段垂足）+ 形心吸附（多边形几何中心）
- 响应式 —— 浮动面板自适应窗口尺寸