设计模式
在 KinoViz 设计模式中构建并设置布局样式——添加元素、编辑属性，使用布尔运算、图片滤镜以及图层/背景模糊，为动画做好准备。
概览
设计模式是 KinoViz 的静态编辑环境，用于构建布局、设置元素样式并在画布上调整位置，完成后切换到动画模式添加运动效果。
通过顶部栏的 设计 / 动画 切换按钮在两种模式间切换。
画布工作区
画布是核心编辑区域，代表最终输出帧。
- 平移——按住 Space 拖动，或鼠标中键拖动。
- 缩放——滚动鼠标滚轮，或使用 Ctrl/Cmd + + / Ctrl/Cmd + -。
- 适合屏幕——按 Ctrl/Cmd + 0 将画布适配到窗口大小。
- 实际大小——按 Ctrl/Cmd + 1 以 100% 比例查看。
画布周围的灰色区域为粘贴板——放置在此处的元素不会被导出。
元素类型
KinoViz 提供 8 种主要元素类型，可从左侧工具栏或 添加 菜单中添加。
| 元素 | 说明 |
|---|---|
| 形状 | 矩形、椭圆、多边形、星形、线条等。支持填充、描边、渐变、圆角。 |
| 文字 | 可编辑文字，支持字体、字号、字重、颜色、间距控制。支持文字绑定路径。 |
| 气泡 | 预置对话气泡和思考气泡，可调整尾部方向。 |
| 图片 | PNG、JPG、SVG、WebP。支持图片滤镜和图层特效。 |
| 路径 | 使用钢笔工具绘制的自由矢量路径，也是布尔运算的输出类型。 |
| 3D 模型 | GLB/GLTF 文件，完整 3D 场景含光照、相机和材质控制。 |
| 视频 | MP4、WebM、WebP、GIF。支持单次/循环/乒乓播放模式。 |
| 文字特效 | 内置动画预设的文字元素（40+ 预设）。 |
此外，群组和组件是从选区创建的组织类型，GLSL 特效是特殊的着色器特效图层。
属性面板
选中任意元素后，右侧面板将显示其属性，按可折叠分区组织。
通用属性（所有元素）
| 属性 | 说明 |
|---|---|
| X / Y | 画布百分比坐标（0–100） |
| 宽 / 高 | 像素尺寸 |
| 旋转 | 角度（−180 到 180 度） |
| 不透明度 | 0–100%，影响整个元素 |
| 混合模式 | 正常、正片叠底、滤色、叠加等 |
| 锁定 | 防止意外编辑 |
| 可见性 | 在画布和导出中显示或隐藏 |
文字属性
- 字体族、字号、字重、字形（斜体、下划线）
- 行高、字间距、段落间距
- 对齐（左对齐、居中、右对齐、两端对齐）
- 填充颜色、描边颜色和宽度
- 文字路径（将文字附加到曲线上）
形状属性
- 填充类型：纯色、线性渐变、径向渐变、无
- 描边颜色、宽度、虚线样式、端点、连接
- 圆角半径（仅矩形）
图片属性
- 适配模式：填充、适合、拉伸、裁切
- 图片滤镜：亮度、对比度、饱和度、色相、模糊、灰度、噪点（参见图片滤镜）
视频属性
- 播放模式：单次、循环、乒乓
- 文件大小：遵循套餐的单次导入限制（Free 10 MB / Pro 100 MB / Studio 1 GB）
- 播放控制（播放、暂停、停止）——在设计模式中隐藏，在动画模式中显示
- 边框控制（圆角、颜色、宽度）
图层面板
图层面板（编辑器左侧）以层级列表形式展示画布上的所有元素。
图层操作
| 操作 | 方式 |
|---|---|
| 选择 | 点击图层名称 |
| 多选 | Ctrl/Cmd+点击 或 Shift+点击图层名称 |
| 重新排序 | 上下拖动图层 |
| 重命名 | 双击图层名称 |
| 删除 | 选中后按 Delete 键 |
| 打组 | 选中多个 + Ctrl/Cmd+G |
| 解组 | 选中群组 + Ctrl/Cmd+Shift+G |
面板顶部的图层在画布上显示在最前面（z 轴顺序最高）。
注意：单个元素图层支持可见性（眼睛）和锁定图标。群组标题上的可见性切换暂不支持。
网格、吸附与对齐
网格
通过 视图 → 显示网格 或 Ctrl/Cmd+' 切换网格显示。在 视图 → 网格设置 中调整网格大小。
吸附
元素会自动吸附到：
- 其他元素的边缘和中心
- 画布边缘和中心
- 网格线（网格显示时）
通过 视图 → 吸附到对象 或工具栏中的磁铁图标切换吸附功能。
对齐工具
选中两个或多个元素后，使用属性面板中的对齐控件：
- 左对齐、水平居中、右对齐、顶对齐、垂直居中、底对齐
- 水平等间距分布或垂直等间距分布
布尔运算
布尔运算将两个或多个路径或形状元素合并为新的复合形状。
使用方法
- 在画布上选中两个或多个形状或路径（减去和排除操作时顺序有影响）。
- 右键 → 布尔运算 → 选择操作，或使用工具栏中的布尔运算按钮。
运算类型
| 运算 | 结果 |
|---|---|
| 合并 | 将所有形状合并为一个外轮廓 |
| 减去 | 从底部形状中减去顶部形状的区域 |
| 交集 | 仅保留重叠区域 |
| 排除 | 保留非重叠区域（与交集相反） |
结果为一个带虚线边框的布尔群组。如需将其转换为单个可编辑路径，右键 → 展开布尔群组。
双击展开后的路径可进入锚点编辑模式，调整各个贝塞尔控制手柄。
图片滤镜
选中图片或视频元素，在属性面板中打开滤镜分区。所有滤镜值均可在动画模式中制作动画。
标准滤镜
| 滤镜 | 范围 | 效果 |
|---|---|---|
| 亮度 | −100 到 +100 | 提亮或压暗 |
| 对比度 | −100 到 +100 | 增强或降低色调范围 |
| 饱和度 | −100 到 +100 | 提高或降低色彩饱和度 |
| 色相 | −180 到 +180 | 旋转色轮 |
| 模糊 | 0 到 100 | 高斯模糊 |
| 灰度 | 0 到 100 | 转换为灰度 |
| 噪点 | 0 到 100 | 添加胶片颗粒 |
高级滤镜
像素化、自然饱和度、锐化、反相。
色彩预设
一键色彩风格：怀旧棕色、复古、柯达、宝丽来、棕色调。
点击重置可将所有滤镜值恢复为默认值。
图层模糊与背景模糊
这两种模糊特效适用于所有元素类型，位于属性面板的特效分区。
- 图层模糊——模糊元素本身（等效于 CSS 的
filter: blur()）。 - 背景模糊——模糊元素后方的所有内容；仅在元素具有一定透明度时可见（等效于 CSS 的
backdrop-filter: blur()）。