--- title: "画布基础" description: "了解 frame、图层、group、mask、path、shape、吸附和测量提示等核心画布对象。" locale: "zh" section: "Canvas" updated: "2026-06-22" source: "https://flare.design/zh/docs/canvas-basics" --- # 画布基础 了解 frame、图层、group、mask、path、shape、吸附和测量提示等核心画布对象。 > 分类: Canvas [HTML](https://flare.design/zh/docs/canvas-basics) | [Markdown](https://flare.design/zh/docs/canvas-basics/index.md) 画布是生成、排版、动效和导出的交汇点。把它当成工作台，而不是只能放一张固定 artboard 的区域。 ## 核心对象 | 对象 | 用途 | 注意点 | | ---------- | ------------------------------------------- | ---------------------------------- | | Frame | 可发布场景、导出区域或分镜节点 | 预览和导出都从选中的 frame 开始 | | 图层 | 文字、图片、视频、形状、path 或 shader 内容 | 加动效前先命名重要图层 | | Group | 一起移动或编辑相关图层 | 只在关系明确时分组 | | Mask group | 用 mask 对象裁切同级可见图层 | Mask 和被裁切内容要在同一个 parent | | 参考素材 | 临时放在旁边、但不导出的材料 | 放在最终 frame 外 | ## Frame Frame 定义可发布场景和导出区域。一个 frame 可以包含图片、视频、文字、形状、group 和动效 timing。需要预览或导出某个场景时，先选中对应 frame。 尺寸变体、分镜节点和不同创意方向都适合拆成独立 frame。这样可以直接比较，而不用覆盖掉前一个方向。 做多尺寸内容时，建议每个目标比例一个 frame。先复制最强的 frame，再调整裁切和文字位置，不要每个比例都从零重建。 ## 图层 图层是画布里的可编辑对象。文字、图片、视频、形状、path 和 shader 图层可以一起排版，并在 frame 内加入时间轴。 当对象堆叠很复杂时，用图层列表选择会更稳。重要图层建议命名，后续做 timeline 和导出时会更容易读。 图层顺序会影响画面，也会影响后续时间线判断。背景媒体放低，主体放中间，标题和遮罩类内容放在它们描述的内容上方。 ## 选择和编辑 简单场景直接点选最快。画布很密时，切到图层列表、放大画布，或临时隐藏盖在目标上方的图层。 建议按这个顺序小步编辑： 1. 先选 frame 或 parent group。 2. 再选目标图层。 3. 调整位置、尺寸、裁切或样式。 4. 如果图层有 timing，就预览目标 frame。 5. 如果图层要做动效或复用，给它命名。 如果一次编辑影响了太多内容，先检查是不是选中了 group 或 frame，而不是单个图层。 ## Group 和 mask 普通 group 用来把相关图层放在一起，同时保留子图层可编辑。Mask group 会用选定的 mask 对象裁切同级可见图层。 创建 mask 时，只选择同一个 parent 里的可见 sibling 图层。这样结果更可预测，也能避免跨 frame 或隐藏图层造成歧义。 需要一起移动的内容用普通 group，例如产品图和它的标签。只有在需要裁切、揭示、窗口或基于形状的构图时，才使用 mask group。 ## 绘制和排版 快速结构可以用预设形状，自定义矢量用 path 工具，重复行列适合用 auto-layout group 保持间距一致。 吸附和测量提示能帮助对齐。如果画布开始拥挤，把工作拆进多个 frame，或把参考素材移出最终导出区域。 ## 画布清理 - 最终 frame 内不要放未使用参考。 - 可复用素材放资产库，不要在每个 frame 里反复复制。 - Frame 名称描述输出，例如 `Story 9:16` 或 `Hero 16:9`。 - 团队做决定前，可以把不同方向保留在画布上方便比较。 - 导出前选中目标 frame，确认 notes 或参考素材没有落在里面。