v3 高级组件详细教程（画板 · 动作链）
针对两个最复杂的组件单独开讲：画板（纯展示绘图）、动作链（隐形动画编排）。 语法规范见《MD扩展语法规范v3.md》第六章 / 3.1.5 / 3.3.1（语法版本 v3.8）。 所有示例均可直接复制到聊天室测试。
目录
一、画板（纯展示）
1.1 是什么
画板 = 一个 20×20 坐标系 的绘图区，用坐标画直线/曲线/圆/矩形等图形。纯展示，不响应点击。
1.2 基础语法
[!画板|图形序列|bg=色|grid=0|text=中央文字]| 参数 | 说明 | 默认 |
|---|---|---|
| （第一段）尺寸 | 画板边长 1-20（数字） | 20 |
| 图形序列 | ; 分隔的图形，无需 shapes= 前缀 | — |
bg=#fff | 背景色 | 透明 |
grid=0 | 关闭网格辅助线 | 显示网格 |
text=文字 | 中央文本（tx/ty/ts/tc 覆盖位置/字号/颜色） | — |
最短写法（尺寸/背景/网格全省略）：
md
[!画板|l:3,12,3,4;c:0,10,5,2,10,10]1.3 图形类型全表
| 类型 | 语法 | 说明 |
|---|---|---|
| 线 | l:x1,y1,x2,y2 | 直线 |
| 折线 | p:x1,y1,x2,y2,... | 多点折线（只写转折点） |
| 曲线 | c:x1,y1,x2,y2,... | 平滑曲线（Catmull-Rom 过所有点） |
| 圆 | o:cx,cy,r | 实心圆 |
| 矩形 | r:x,y,w,h | 实心矩形 |
| 点 | d:x,y | 小圆点 |
| 三角 | t:x1,y1,x2,y2,x3,y3 | 实心三角形 |
| 心形 | h:cx,cy,s | 实心心形 |
| 多边形填充 | pt:x1,y1,x2,y2,...:色 | 自动闭合+填充 |
图形修饰（追加在图形末尾，| 分隔）：
| 修饰 | 语法 | 说明 |
|---|---|---|
| 闭合填充 | ` | f/ |
| 线宽 | ` | wN` |
1.4 基础示例
md
# 一条直线
[!画板|l:2,2,18,18]
# 圆 + 矩形 + 三角（无网格）
[!画板:10|o:5,5,2:f00;r:1,1,3,3;t:8,2,9,2,8.5,3|grid=0]
# 心形 + 折线 + 填充曲线
[!画板|h:10,10,3:f00;c:2,10,5,5,8,8|f;pt:14,4,16,6,15,8,13,7:f00]
# 带背景 + 中央文字
[!画板:10|r:0,0,10,10:#ffe;o:5,5,3:f00|bg=#fff|text=你好|ts=2|tc=#f00]1.5 简化三原则（省字数）
- 曲线代多线：1 条
c:表达任意平滑轮廓，替代 N 段直线 - 折线合并段：连续直线段合成 1 条
p:，只写转折点 - 闭合自动补：
|f自动闭合，终点不必重复首点
md
# ❌ 直线版（6 段弧 = 6 个 l:，71 字符）
[!画板|l:2,10,3,7;l:3,7,5,5;l:5,5,8,4;l:8,4,11,5;l:11,5,13,7;l:13,7,14,10]
# ✅ 曲线版（1 条 c:，39 字符，省 45%）
[!画板|c:2,10,3,7,5,5,8,4,11,5,13,7,14,10]1.6 动态画板（{名} 实时引用）
画板图形参数支持 {名} 引用，变量/开关/输入变化时自动重绘：
md
[!开关:#f00/#00f|id=颜色|颜色=1]
[!变量:圆x=5]
[!画板:10|o:{圆x},5,2:{颜色}|grid=0]
[!按钮:右移|变量:圆x={圆x}+1]
[!按钮:左移|变量:圆x={圆x}-1]点「右移/左移」→ 圆的位置实时变化；点「颜色开关」→ 圆变色（开关值直接当颜色）。
md
# 进度圆环（配合进度条）
[!进度:6/10|id=血]
[!画板:10|o:5,5,4;o:5,5,{血}/10*4:00f00|grid=0]
{血}/10*4是数学表达式：进度值 / 最大 × 半径，血条变圆环！
1.7 常见坑
| 坑 | 说明 |
|---|---|
| 坐标超界 | 坐标 0~尺寸（默认 0~20），超出被裁剪 |
| 颜色写法 | 图形颜色 :f00（不用 #）；` |
| ` | f` 位置 |
| 中文乱码 | 画板不画文字，用 text= 参数显示中央文字 |
| v2 兼容 | 画板是唯一 v2/v3 双兼容组件：`[!开图](board:20 |
二、动作链（隐形编排器）
2.1 是什么
动作链 = 隐形动画/操作编排器。前端不显示任何东西（类变量），按时间顺序自动操作其他组件：移动、变色、改文字、更新画板、执行任意动作，可循环、可被外部触发。
2.2 基础语法
[!动作链:步骤1/步骤2/步骤3|循环=N|id=名|绑定=1]
步骤 = 目标=组件id;操作;操作;...;延时=毫秒;条件=表达式;跳转=步骤号（步骤内用 `;` 分隔，与组件参数 `|` 区分）/分隔步骤|分隔步骤内参数延时=毫秒：该步执行后等待的毫秒数（1 秒 = 1000）- 步骤串写在第一个裸参数，链级参数（循环/id/绑定）放后面
2.3 双 ID 机制
[!动作链:目标=标题;闪烁=3;延时=200|id=开场|绑定=1]
└──── 目标组件 id ────┘ └─ 链 id ─┘| ID | 作用 | 写法 |
|---|---|---|
| 目标组件 id | 匹配要操作的组件 | 组件统一 id=（如 `[!文本:标题 |
| 链 id | 动作链对外接口 | id=链名 |
md
[!文本:👑 标题|id=标题] ← 目标组件挂 id
[!动作链:目标=标题;颜色=#f00;延时=300|id=变色] ← 链自身 id2.3.1 弹窗内组件定位（x/y 参数，v3.5 新增）
弹窗内所有组件支持 x=数字 / y=数字 参数，相对自身流位置偏移 px（不挤开其他组件），手机/电脑相对位置一致：
[!按钮:🌟|id=星|x=10|y=5] ← 按钮右移 10px、下移 5px
[!文本:提示|#f00|x=-8|y=2] ← 支持负值- 仅弹窗/消息内组件有效（渲染时注入
position:relative; left/top） - 与动作链
移动x/y（transform 动画）互不干扰：x/y 是静态定位，移动是动态动画
2.4 步骤操作集全表
| 操作 | 说明 | 示例 |
|---|---|---|
移动x=1 / 移动y=5 | 位移动画（px） | 目标=鼠;移动x=30;延时=400 |
缩放=1.2 | 缩放动画 | 目标=图;缩放=1.5;延时=200 |
旋转=45 | 旋转动画（累积增量，每次 +45°，持续旋转不跳回） | 目标=图;旋转=90;延时=300 |
透明=0.3 | 透明度 0~1（配合隐藏做淡入淡出） | 目标=弹;透明=0;延时=500 |
闪烁=2 | 闪烁 N 次 | 目标=标题;闪烁=3;延时=200 |
颜色=#f00 | 改颜色 | 目标=标题;颜色=#f00;延时=300 |
文字=新内容 | 改显示文字 | 目标=提示;文字=倒计时 3!;延时=1000 |
隐藏 / 显示 | 组件显隐 | 目标=面板;隐藏 |
状态=值 | 设置组件状态（开关/变量/进度） | 目标=血;状态=3 |
变量=名=值 | 设置任意变量 | 目标=x;变量=分数=100 |
音效=URL | 播放音效 | 目标=x;音效=https://.../ding.mp3 |
更新=图形序列 | 画板：替换图形重绘 | 目标=板;更新=o:1.5,1.5,0.4:f00 |
裸 更新 | 仅触发重绘（重新解析 {名}） | 目标=板;更新 |
| 任意 v3 动作 | 直接写动作 | 发送:行动！、随机:骰=1,6、`弹窗:标题 |
2.5 循环
| 写法 | 含义 |
|---|---|
| （省略） | 单次 |
循环 | 无限循环（所在消息可见才跑，划出视口暂停） |
循环=3 | 循环 3 次 |
md
# 无限左右跳（消息可见时一直跑）
[!动作链:目标=鼠;移动x=30;延时=400/目标=鼠;移动x=-30;延时=400|循环]
# 循环 3 次闪烁
[!动作链:目标=标题;闪烁=1;延时=300|循环=3]⏸ 消息滚出屏幕 → 链暂停；滚回来 → 继续。无限循环不会一直耗资源（不可见即停）。
2.6 触发与控制
| 触发方式 | 写法 |
|---|---|
| 自动触发 | 省略 绑定=（渲染后开始） |
| 绑定启动 | 绑定=1 + 按钮 动作链:名,开始 |
| 倒计时/定时触发 | end=动作链:名,开始 |
| 开关联动 | `[!开关:开/关 |
| 确认触发 | `[!确认:确定？ |
| 条件动作触发 | 动作链:名,开始?{金币}>100 |
| 链间联动 | 步骤里 执行=动作链:名2,开始 |
控制动作：
动作链:名,开始 动作链:名,暂停 动作链:名,继续 动作链:名,停止 动作链:名,重播md
[!动作链:目标=鼠;移动x=30;延时=400|循环|id=跳动]
[!按钮:⏸ 暂停|动作链:跳动,暂停]
[!按钮:▶️ 继续|动作链:跳动,继续]
[!按钮:⏹ 停止|动作链:跳动,停止]
[!按钮:🔁 重播|动作链:跳动,重播]2.7 步骤高级控制
条件步骤（不满足跳过）
md
# 血量 <30 才触发警报，否则跳过
[!动作链:目标=警报;条件={血量}<30;闪烁=3;延时=200/目标=警报;隐藏|循环]跳转（goto）
md
# 条件满足直接跳第 3 步（闪烁），跳过中间位移动画
[!动作链:目标=板;条件={跳过}=1;跳转=3/目标=板;移动x=10;延时=300/目标=板;移动y=10;延时=300/目标=板;闪烁=2;延时=200]2.8 动画节奏技巧
md
# 开场倒计时（文字逐秒变化）
[!文本:3|id=倒|大]
[!动作链:目标=倒;文字=2;延时=1000/目标=倒;文字=1;延时=1000/目标=倒;文字=GO!;颜色=#f00;延时=1000/目标=倒;隐藏|id=开场|绑定=1]
[!按钮:🚀 开始|动作链:开场,开始]
# 敌人受击抖动（连串快速位移）
[!动作链:目标=敌;移动x=5;延时=60/目标=敌;移动x=-10;延时=60/目标=敌;移动x=5;延时=60/目标=敌;移动x=-5;延时=60|id=受击|绑定=1]
[!按钮:⚔️ 攻击|动作链:受击,开始]
# 淡入淡出提示
[!文本:💡 提示|id=提示|透明=0]
[!动作链:目标=提示;透明=1;延时=500/目标=提示;透明=0;延时=500|循环|id=呼吸|绑定=1]
[!按钮:✨ 显示提示|动作链:呼吸,开始]2.9 常见坑
| 坑 | 说明 |
|---|---|
| 目标不存在 | 目标=xxx 但消息里没有 id=xxx 组件 → 该步静默跳过 |
| 目标 id 冲突 | 同一消息内 id 必须唯一（后渲染覆盖前者） |
| 延时单位 | 毫秒！延时=1 是 1ms 不是 1 秒 |
| 无限循环 | 只有 循环（无数字）才无限；消息划出视口自动暂停 |
| 链间防环 | 禁止 A 链触发 B 链再触发 A 链（防死循环） |
| 可见性 | 链在后台/切走时暂停，回来继续（和倒计时一致） |
| 文字/状态 | 文字= 改显示，状态= 改开关/变量/进度值，别混用 |
三、两组件联动实战
3.1 会动的打地鼠（画板 + 动作链 + 变量）
md
[!变量:地鼠x=5][!变量:地鼠y=5]
[!按钮:🎲 随机地鼠|变量:地鼠x={地鼠x}+0&变量:地鼠y={地鼠y}+0]
[!画板:10|o:{地鼠x},{地鼠y},2:f00|id=板1]
[!动作链:目标=板1;移动x=1;延时=200/目标=板1;移动y=-1;延时=200|循环|id=颤]
[!按钮:⏸ 停动画|动作链:颤,暂停]3.2 心跳血条（进度 + 动作链变色）
md
[!进度:8/10|id=血|颜色=#0f0]
[!动作链:目标=血;颜色=#f00;延时=500/目标=血;颜色=#0f0;延时=500|循环|id=心跳]
[!按钮:💔 受伤|变量:血={血}-1?{血}>0:发送:血量不足！]3.3 动态倒计时炸弹（画板 + 动作链 + 倒计时）
md
[!文本:💣|id=炸弹|大]
[!倒计时:10|id=引信|绑定=1|end=发送:💥 爆炸！&动作链:爆,开始]
[!动作链:目标=炸弹;闪烁=1;延时=200/目标=炸弹;文字=💥;延时=300|id=爆|绑定=1]
[!按钮:🔥 点燃引信|倒计时:引信]教程完 · 语法细节以《MD扩展语法规范v3.md》v3.8（含 v4 宏系统）为准