\r \r

物理位图矢量化（Physics Animation Prep）\r

\r

概述\r

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

工作流程\r

\r

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

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

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

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

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

• 物品名称：水平地面、竖直墙面、小球、物块、细绳、轻杆、弹簧、斜面、圆弧轨道、电场 E、磁场 B、带电粒子 q 等\r
• 位置布局：各元素的相对位置\r
• 相互关系：接触、连接、束缚等关系\r \r 完成后向用户描述识别到的内容。\r \r

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

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

• 检查是否有遗漏的组件\r
• 检查位置布局是否正确\r
• 检查相互关系是否准确\r \r 此步不可跳过，必须与用户交互完成。\r \r

第 3 步：生成矢量图形\r

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

• 默认使用 HTML Canvas（方便后续生成动画）\r
• 检查：物品 ✓、位置 ✓、关系 ✓ 三者与原图一致\r
• 注意事项（务必遵守）：\r
  • Canvas y 轴向下，与数学/物理 y 轴相反\r
  • 圆弧角度：Canvas 中 0 = 3 点钟方向，顺时针为正\r
  • 对于复杂图形，先推导关键点坐标，再编码\r
• 如图像标注不清晰，可先描述识别到的结构，请用户确认后再绘制\r \r

第 4 步：校对矢量图\r

\r 与用户交互，逐项检查：\r \r

• 背景是否正确\r
• 物体形状、大小是否一致\r
• 颜色是否正确\r
• 中英文标注是否准确\r \r 此步必须与客户交互完成。\r \r

第 5 步：按需导出\r

\r 根据客户需求导出：\r \r

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

Canvas 绘图要点\r

\r

// 坐标转换：数学坐标 → Canvas坐标\r
// 数学坐标 (mx, my) → Canvas坐标 (cx, cy)\r
// cx = originX + mx * scale\r
// cy = originY - my * scale  // 注意y轴方向反转\r
\r
// 常用绘制方法\r
ctx.beginPath();\r
ctx.arc(cx, cy, radius, startAngle, endAngle);  // 圆弧\r
ctx.moveTo(x1, y1); ctx.lineTo(x2, y2);          // 直线\r
ctx.strokeStyle = '#333'; ctx.lineWidth = 2;\r
ctx.stroke();\r
\r
// 虚线\r
ctx.setLineDash([5, 5]);\r
ctx.stroke();\r
ctx.setLineDash([]);  // 恢复实线\r
\r
// 箭头\r
function drawArrow(ctx, fromX, fromY, toX, toY) {\r
    const headLen = 10;\r
    const angle = Math.atan2(toY - fromY, toX - fromX);\r
    ctx.beginPath();\r
    ctx.moveTo(fromX, fromY);\r
    ctx.lineTo(toX, toY);\r
    ctx.lineTo(toX - headLen * Math.cos(angle - Math.PI/6), toY - headLen * Math.sin(angle - Math.PI/6));\r
    ctx.moveTo(toX, toY);\r
    ctx.lineTo(toX - headLen * Math.cos(angle + Math.PI/6), toY - headLen * Math.sin(angle + Math.PI/6));\r
    ctx.stroke();\r
}\r
```\r
\r
## 常见物理图形处理\r
\r
### 圆弧槽（如半圆形轨道）\r
\r
```javascript\r
// 半圆弧，圆心在 (cx, cy)，半径 R\r
// 在Canvas中：从 π 到 0（顺时针方向）\r
ctx.arc(cx, cy, R, Math.PI, 0, false);  // 下半圆（Canvas中y向下）\r
```\r
\r
### 带箭头坐标轴\r
\r
```javascript\r
// x轴\r
drawArrow(ctx, 30, originY, width-20, originY);\r
ctx.fillText('x', width-15, originY+5);\r
// y轴（物理向上，Canvas向下绘制）\r
drawArrow(ctx, originX, height-20, originX, 20);\r
ctx.fillText('y', originX-15, 25);\r
```\r
\r
### 标注点和虚线辅助线\r
\r
```javascript\r
// 虚线从点到坐标轴\r
ctx.setLineDash([4, 4]);\r
ctx.beginPath();\r
ctx.moveTo(px, py);\r
ctx.lineTo(px, originY);  // 垂直虚线到x轴\r
ctx.stroke();\r
ctx.setLineDash([]);\r
\r
// 标注点（实心圆）\r
ctx.beginPath();\r
ctx.arc(px, py, 4, 0, 2 * Math.PI);\r
ctx.fillStyle = 'black';\r
ctx.fill();\r
```\r
\r
## references/\r
\r
- `physics_shapes.md`：常见物理图形的 Canvas/SVG 代码片段（圆弧、力箭头、弹簧等）\r
\r
## 注意事项（极其重要！）\r
\r
### 坐标系差异\r
\r
| 坐标系 | Y轴方向 | 角度正方向 |\r
|--------|---------|-----------|\r
| Canvas | Y轴向下（y增大=向下） | 顺时针 |\r
| 数学/物理 | Y轴向上（y增大=向上） | 逆时针 |\r
\r
### 圆弧绘制\r
\r
- Canvas 中 **0° = 右侧 3 点钟方向**\r
- Canvas **角度正方向 = 顺时针**（与数学物理相反）\r
- 因此：Canvas 中画上半圆是 `arc(cx, cy, R, 0, Math.PI, true)`，下半圆是 `arc(cx, cy, R, Math.PI, 0, false)`\r
\r
### 坐标转换公式\r
\r
```\r
数学坐标 (mx, my) → Canvas坐标 (cx, cy)\r
cx = originX + mx * scale\r
cy = originY - my * scale  // 注意y轴方向反转\r
```\r
\r
### 其他\r
\r
- 对于复杂图形，先在纸上推导关键点坐标，再编码\r
- 如图像标注不清晰，可先描述识别到的结构，请用户确认后再绘制\r
\r
---\r
\r
# Physics Animation Prep (English)\r
\r
## Overview\r
\r
Transform bitmap images of high school physics problems into precise vector graphics code. This skill prepares diagrams for physics animation production through a 6-step workflow.\r
\r
## 6-Step Workflow\r
\r
### Step 0: Establish Coordinate System & Scale\r
\r
- Determine canvas size (typically 800×500 or 600×400)\r
- Set origin position and scale (1 unit = X pixels)\r
- **Critical**: Canvas y-axis points DOWN (y increases = downward), opposite to math/physics\r
\r
### Step 1: Identify Components\r
\r
Recognize these elements from the image:\r
\r
- **Objects**: ground, wall, ball, block, rope, rod, spring, slope, arc track, electric field E, magnetic field B, charged particle q, etc.\r
- **Positions**: relative locations of all elements\r
- **Relationships**: contact, connection, constraint\r
\r
### Step 2: Verify with Problem Text\r
\r
Cross-check Step 1 with the physics problem description:\r
\r
- Any missing components?\r
- Are positions correct?\r
- Are relationships accurate?\r
\r
**This step is mandatory** - must complete with user interaction.\r
\r
### Step 3: Generate Vector Graphics\r
\r
Create Canvas code based on verified elements:\r
\r
- Default output: **HTML Canvas** (for easy animation)\r
- Verify: Objects ✓, Positions ✓, Relationships ✓\r
- **Critical Notes**:\r
  - Canvas y-axis is inverted\r
  - Arc angles: 0° = 3 o'clock, clockwise positive\r
  - Derive coordinates mathematically first, then convert to Canvas\r
\r
### Step 4: Verify Vector Diagram\r
\r
Interact with user to check:\r
\r
- Background correct?\r
- Object shapes and sizes match?\r
- Colors correct?\r
- Labels accurate?\r
\r
### Step 5: Export\r
\r
Export based on user needs:\r
\r
- **Default**: HTML Canvas\r
- **Optional**: SVG, PNG\r
\r
## Key Canvas Differences\r
\r
| System | Y-axis | Angle Direction |\r
|--------|--------|-----------------|\r
| Canvas | Downward | Clockwise |\r
| Math/Physics | Upward | Counter-clockwise |\r
\r
## Coordinate Conversion\r
\r
```\r
Math (mx, my) → Canvas (cx, cy)\r
cx = originX + mx * scale\r
cy = originY - my * scale  // Note: y-axis inverted\r
```\r