bea6de3767
- Docusaurus 3.7.0 with both English and Chinese (zh-CN) locales - Full API reference split into structured pages - Homepage with hero, feature cards, and quick start section - GitHub Actions workflow for auto-deployment to GitHub Pages Co-authored-by: Cursor <cursoragent@cursor.com>
73 lines
2.3 KiB
Markdown
73 lines
2.3 KiB
Markdown
---
|
||
id: callbacks
|
||
title: "Props：回调"
|
||
---
|
||
|
||
# 📞 Props：回调
|
||
|
||
| Prop | 签名 | 描述 |
|
||
| --- | --- | --- |
|
||
| `onWatch` | `(state, durationMs, detail?) => void` | 初始化阶段回调；`durationMs` 从本次 `init` 开始计时 |
|
||
| `onPaintCallback` | `(payload: PaintCallbackPayload) => void` | 成功上色时触发，或未选择画笔时点击区域触发 |
|
||
| `onError` | `(message, error?) => void` | 分割或加载失败 |
|
||
|
||
## PaintCallbackPayload
|
||
|
||
（可辨识联合类型，通过 `payload.kind` 区分）：
|
||
|
||
```ts
|
||
// 成功上色
|
||
{
|
||
kind: 'painted';
|
||
regionId: number;
|
||
regionName: string;
|
||
color: BgrColor;
|
||
configJson?: Record<string, unknown>; // 来自 setPaintColor / initialPaintConfigJson
|
||
}
|
||
|
||
// 点击了有效区域但未选择画笔（未执行上色）
|
||
{
|
||
kind: 'brush_required';
|
||
hint: string; // 如 "请先选择画笔颜色（底部颜色条或 ref.setPaintColor）"
|
||
regionId: number;
|
||
regionName: string;
|
||
}
|
||
```
|
||
|
||
示例：
|
||
|
||
```tsx
|
||
onPaintCallback={payload => {
|
||
if (payload.kind === 'brush_required') {
|
||
showToast(payload.hint);
|
||
return;
|
||
}
|
||
savePaintRecord(payload.regionId, payload.color, payload.configJson);
|
||
}}
|
||
```
|
||
|
||
## onWatch detail（MaskSegmentWatchDetail）
|
||
|
||
| 字段 | 类型 | 描述 |
|
||
| --- | --- | --- |
|
||
| `regionCount` | `number` | 当前有效区域数 |
|
||
| `maskPathsReady` | `boolean` | 轮廓 Skia 路径是否就绪 |
|
||
| `freqLayersReady` | `boolean` | 频域 Shader 纹理是否就绪 |
|
||
| `errorMessage` | `string` | `error` 状态下的失败描述 |
|
||
|
||
### onWatch 状态流转
|
||
|
||
```
|
||
init
|
||
→ images_loaded 原始图像和遮罩读取完成
|
||
→ mask_aligned 遮罩尺寸对齐
|
||
→ mask_sampled 遮罩像素采样完成
|
||
→ regions_ready 区域提取成功
|
||
→ layers_ready 上色纹理层就绪（detail.maskPathsReady 可能仍为 false）
|
||
→ interactive 可交互（可以点击区域、选择颜色、上色）
|
||
→ mask_paths_ready 轮廓路径就绪（轮播虚线轮廓可显示；detail.maskPathsReady 为 true）
|
||
→ error 失败（detail.errorMessage 包含描述）
|
||
```
|
||
|
||
`layers_ready` / `interactive` 可能在轮廓路径计算完成之前触发。如果宿主在 `interactive` 时关闭阻塞加载器，用户已可操作；轮播虚线轮廓在 `mask_paths_ready` 后自动显示。
|