物理位图矢量化（物理动画准备）

概述

将高中物理题的示意图（位图）转换为精确的矢量图形代码，全程分 6 步完成任务。本技能为物理动画制作提供前期准备工作。

工作流程

第 0 步：建立坐标系和比例尺（关键！）

根据图像内容建立坐标系，并记录关键参数：

• - 确定画布尺寸（宽×高），通常选择 800×500 或 600×400
• 确定原点位置和比例尺（1 个单位 = 多少像素）
• 重要：Canvas 坐标系 y 轴向下（y 增大 = 向下），与数学坐标系相反
• 对于物理图形，先用数学坐标系推导，再转换到 Canvas 坐标系

第 1 步：识别原图中的元素组件

读取并分析用户提供的图像，识别以下元素：

• - 物品名称：水平地面、竖直墙面、小球、物块、细绳、轻杆、弹簧、斜面、圆弧轨道、电场 E、磁场 B、带电粒子 q 等
• 位置布局：各元素的相对位置
• 相互关系：接触、连接、束缚等关系

完成后向用户描述识别到的内容。

第 2 步：用题目文字校对第 1 步

获取用户提供的物理题目文字，逐项核对：

• - 检查是否有遗漏的组件
• 检查位置布局是否正确
• 检查相互关系是否准确

此步不可跳过，必须与用户交互完成。

第 3 步：生成矢量图形

根据校对后的元素列表，生成矢量图形代码：

• - 默认使用 HTML Canvas（方便后续生成动画）
• 检查：物品 ✓、位置 ✓、关系 ✓ 三者与原图一致
• 注意事项（务必遵守）：

• - 如图像标注不清晰，可先描述识别到的结构，请用户确认后再绘制

第 4 步：校对矢量图

与用户交互，逐项检查：

• - 背景是否正确
• 物体形状、大小是否一致
• 颜色是否正确
• 中英文标注是否准确

此步必须与客户交互完成。

第 5 步：按需导出

根据客户需求导出：

• - 默认：HTML Canvas（方便后续动画制作）
• 可选：SVG 文件、PNG 图片

Canvas 绘图要点

javascript
// 坐标转换：数学坐标 → Canvas坐标
// 数学坐标 (mx, my) → Canvas坐标 (cx, cy)
// cx = originX + mx * scale
// cy = originY - my * scale // 注意y轴方向反转

// 常用绘制方法
ctx.beginPath();
ctx.arc(cx, cy, radius, startAngle, endAngle); // 圆弧
ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); // 直线
ctx.strokeStyle = #333; ctx.lineWidth = 2;
ctx.stroke();

// 虚线
ctx.setLineDash([5, 5]);
ctx.stroke();
ctx.setLineDash([]); // 恢复实线

// 箭头
function drawArrow(ctx, fromX, fromY, toX, toY) {
const headLen = 10;
const angle = Math.atan2(toY - fromY, toX - fromX);
ctx.beginPath();
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
ctx.lineTo(toX - headLen Math.cos(angle - Math.PI/6), toY - headLen Math.sin(angle - Math.PI/6));
ctx.moveTo(toX, toY);
ctx.lineTo(toX - headLen Math.cos(angle + Math.PI/6), toY - headLen Math.sin(angle + Math.PI/6));
ctx.stroke();
}

常见物理图形处理

圆弧槽（如半圆形轨道）

javascript
// 半圆弧，圆心在 (cx, cy)，半径 R
// 在Canvas中：从 π 到 0（顺时针方向）
ctx.arc(cx, cy, R, Math.PI, 0, false); // 下半圆（Canvas中y向下）

带箭头坐标轴

javascript
// x轴
drawArrow(ctx, 30, originY, width-20, originY);
ctx.fillText(x, width-15, originY+5);
// y轴（物理向上，Canvas向下绘制）
drawArrow(ctx, originX, height-20, originX, 20);
ctx.fillText(y, originX-15, 25);

标注点和虚线辅助线

javascript
// 虚线从点到坐标轴
ctx.setLineDash([4, 4]);
ctx.beginPath();
ctx.moveTo(px, py);
ctx.lineTo(px, originY); // 垂直虚线到x轴
ctx.stroke();
ctx.setLineDash([]);

// 标注点（实心圆）
ctx.beginPath();
ctx.arc(px, py, 4, 0, 2 * Math.PI);
ctx.fillStyle = black;
ctx.fill();

references/

• - physics_shapes.md：常见物理图形的 Canvas/SVG 代码片段（圆弧、力箭头、弹簧等）

注意事项（极其重要！）

坐标系差异

圆弧绘制

• - Canvas 中 0° = 右侧 3 点钟方向
• Canvas 角度正方向 = 顺时针（与数学物理相反）
• 因此：Canvas 中画上半圆是 arc(cx, cy, R, 0, Math.PI, true)，下半圆是 arc(cx, cy, R, Math.PI, 0, false)

坐标转换公式

数学坐标 (mx, my) → Canvas坐标 (cx, cy)
cx = originX + mx * scale
cy = originY - my * scale // 注意y轴方向反转

其他

• - 对于复杂图形，先在纸上推导关键点坐标，再编码
• 如图像标注不清晰，可先描述识别到的结构，请用户确认后再绘制

物理动画准备（英文版）

概述

将高中物理问题的位图图像转换为精确的矢量图形代码。本技能通过 6 步工作流程为物理动画制作准备示意图。

6 步工作流程

第 0 步：建立坐标系和比例尺

• - 确定画布尺寸（通常为 800×500 或 600×400）
• 设置原点位置和比例尺（1 个单位 = X 像素）
• 关键：Canvas y 轴指向下方（y 增大 = 向下），与数学/物理坐标系相反

第 1 步：识别组件

从图像中识别以下元素：

• - 物体：地面、墙壁、球、物块、绳子、杆、弹簧、斜面、圆弧轨道、电场 E、磁场 B、带电粒子 q 等
• 位置：所有元素的相对位置
• 关系：接触、连接、约束

第 2 步：用题目文字校对

与物理题目描述进行交叉核对：

• - 是否有遗漏的组件？
• 位置是否正确？
• 关系是否准确？

此步不可跳过 - 必须与用户交互完成。

第 3 步：生成矢量图形

根据验证后的元素创建 Canvas 代码：

• - 默认输出：HTML Canvas（便于制作动画）
• 验证：物体 ✓、位置 ✓、关系 ✓
• 关键说明：

第 4 步：验证矢量图

与用户交互检查：

• - 背景是否正确？
• 物体形状和大小是否匹配？
• 颜色是否正确？
• 标注是否准确？

第 5 步：导出

根据用户需求导出：

• - 默认：HTML Canvas
• 可选：SVG、PNG

Canvas 关键差异

坐标转换

数学坐标 (mx, my) → Canvas坐标 (cx, cy)
cx = originX + mx * scale
cy = originY - my * scale // 注意：y轴反转