Canvas 编辑器
Canvas 是 Armox 的核心创作空间：一个可视化、基于节点（node）的编辑器。你可以把不同组件连接起来，构建强大的内容生成工作流。
Canvas 是什么？
一个完整工作流示例：多个节点连接在一起形成内容生成管线。
Canvas 是 Armox 的可视化工作流编辑器。你不需要写代码或操作复杂界面，而是：
- 🎨 拖拽 节点到画布
- 🔗 用连线 连接 节点
- ▶️ 一键 运行 工作流
- 👀 在画布里直接 查看结果
你可以把它理解成“能真正跑起来的流程图”：每个框（node）做一件事，连线代表数据如何在节点之间流动。
Canvas 界面概览
打开一个 Canvas，你会看到：
| Area | Purpose |
|---|---|
| Main Canvas | 带网格背景的工作区 |
| Left Sidebar | 可添加的节点类型 |
| Top Toolbar | Canvas 名称、保存、Run All、设置 |
| Minimap | 整个画布的缩略图（右下角） |
| Right Panel | 选中节点时显示其 settings |
导航（Navigation）
缩放（Zooming）
- 滚轮 — 放大/缩小
- 触控板捏合 — Trackpad 手势
- 缩放按钮 — 工具栏里的 controls
平移（Panning）
- 空白处点击并拖拽
- 鼠标中键 点击并拖拽
- 空格 + 拖拽 — 另一种方式
Minimap
右下角 minimap 显示整个画布：
- Click minimap 跳转到对应区域
- Drag 视口框进行导航
- 在 settings 里可 Toggle 显示/隐藏
创建新的 Canvas
- 在侧边栏点击 Canvas
- 点击 + New Canvas
- 输入 Canvas 名称
- 开始添加节点！
一个全新的空白画布，等待你搭建工作流。
Canvas 会在你操作时自动保存（auto-save）。
添加节点（Adding Nodes）
从侧边栏添加
- 打开 left sidebar（若隐藏可点击菜单图标）
- 浏览节点分类：
- Text — prompts 与文本生成
- Image — AI 图像生成
- Video — AI 视频生成
- Audio — 音乐与语音
- Upload — 你的文件
- Tools — 处理与增强
- Drag 节点到画布，或 click 直接添加
Add Node 面板：按类别展示所有可用节点类型。
快速添加（Quick Add）
- 在画布上 Right-click 打开右键菜单
- 选择 node 类型，会在当前位置添加
选择节点（Selecting Nodes）
单选（Single Selection）
- Click 一个节点即可选中
- 选中节点会显示高亮边框
- 右侧面板会显示节点 settings
多选（Multiple Selection）
- Shift + Click — 增加到选择
- 拖拽框选 — 一次选择多个节点
- Ctrl/Cmd + A — 全选
移动节点（Moving Nodes）
- Drag 已选节点移动位置
- 方向键 微调位置
- 多选时会一起移动
连接节点（Connecting Nodes）
创建连接（Creating Connections）
- 找到源节点右侧的 output handle（小圆点）
- 从 output handle Click and drag
- 拖到目标节点左侧的 input handle
- 松开即可创建连接
连接颜色（Connection Colors）
连接按数据类型做颜色区分：
| Color | Type | Example |
|---|---|---|
| Yellow | Text | Prompts, descriptions |
| Blue | Image | Photos, graphics |
| Green | Video | Clips, animations |
| Orange | Audio | Music, speech |
删除连接（Deleting Connections）
- Click 连线选中
- 按 Delete 或 Backspace
- 或 right-click 选择 “Delete”
节点设置（Node Settings）
选中节点后，右侧面板会显示 settings：
常见设置（Common Settings）
| Setting | Description |
|---|---|
| Model | 使用哪个 AI 模型 |
| Prompt | 文本输入（AI 节点常见） |
| Aspect Ratio | 输出尺寸 |
| Quality | 输出质量 |
可折叠分区（Collapsible Sections）
settings 通常按分区组织：
- Basic — 关键设置
- Advanced — 精细调整
- Output — 预览与下载
运行工作流（Running Workflows）
运行单个节点（Run a Single Node）
- Select 要运行的节点
- 点击节点上的 ▶ Play
- 观察进度指示
- 在节点预览中查看结果
运行整条工作流（Run Entire Workflow）
- 点击工具栏的 Run All
- 节点会按连接关系顺序运行
- 每个节点会显示进度
- 结果会随着节点完成逐步出现
执行顺序（Execution Order）
节点按依赖顺序执行：
- 没有输入依赖的节点先跑
- 再跑依赖它们输出的节点
- 直到所有节点完成
查看结果（Viewing Results）
节点内预览（In-Node Preview）
生成内容会直接显示在节点里：
- Images — 缩略图预览
- Videos — 视频播放器
- Audio — 音频播放器
- Text — 文本展示
全屏预览（Full Preview）
- Click 预览可放大查看
- 点击 Download 保存到电脑
- 内容也会保存到 Gallery
保存与组织（Saving and Organizing）
自动保存（Auto-Save）
Canvas 会自动保存。工具栏会显示 “Saved” 指示。
手动保存（Manual Save）
- 按 Ctrl/Cmd + S 强制保存
- 或点击工具栏 Save
重命名（Renaming）
- 点击工具栏里的 canvas 名称
- 输入新名称
- 按 Enter
组织 Canvas（Organizing Canvases）
- 用描述性命名
- 使用命名规范（如 “Client - Project - Version”）
- 删除不再需要的旧 canvases
键盘快捷键（Keyboard Shortcuts）
| Action | Shortcut |
|---|---|
| Save | Ctrl/Cmd + S |
| Undo | Ctrl/Cmd + Z |
| Redo | Ctrl/Cmd + Shift + Z |
| Select All | Ctrl/Cmd + A |
| Delete Selected | Delete / Backspace |
| Zoom In | Ctrl/Cmd + Plus |
| Zoom Out | Ctrl/Cmd + Minus |
| Fit View | Ctrl/Cmd + 0 |
| Pan | Spacebar + Drag |
Canvas 最佳实践
布局建议（Layout Tips）
- 从左到右流动 — 左边输入，右边输出
- 留出空隙 — 节点别挤太紧
- 分组 — 相关节点放近一点
- 用 minimap — 大画布更好导航
工作流建议（Workflow Tips）
- 从简单开始 — 先 2-3 个节点，再扩展
- 增量测试 — 逐个节点运行验证
- 经常保存 — auto-save 有用，但手动保存也安心
- 命名清晰 — 方便回找与复用
性能建议（Performance Tips）
- 别过载 — 超大 Canvas 可能变慢
- 按需运行 — 只跑你需要的节点
- 清理 — 删除不用的节点与连接
Troubleshooting
Canvas 无法加载（Canvas Won't Load）
- 刷新页面
- 检查网络连接
- 换浏览器
节点无法连接（Nodes Won't Connect）
- 检查类型是否兼容（颜色匹配或 text 到多数输入）
- 确认是从 output 拖到 input
- 尝试删除并重新连接
结果没有出现（Results Not Appearing）
- 确认节点已完成（不再转圈）
- 查看节点是否有错误信息
- 检查 credits 余额
下一步
熟悉 Canvas 后，继续深入：
- Connecting Nodes — 构建复杂工作流
- Running Workflows — 执行并管理输出
- Creating Apps — 把工作流变成 Apps