图层
ProtoPie 允许你使用图层来创建矩形、椭圆、星形和多边形等形状，也支持图片、视频和 Lottie 动画等媒体。
图层属性
图片图层
你可以使用图片图层将图片无缝集成到原型中并进行优化。ProtoPie 支持以下图片格式：PNG、JPG、JPEG、BMP、GIF、SVG 和 WebP。
如何添加图片图层？
向项目中添加图片图层有两种方式。第一种是将图片拖放到场景中。第二种是先创建图片图层，再通过设置填充属性来选择图片。若要保持图片原始尺寸，请在属性面板中点击“应用原始比例”选项。
根据你的套餐，你可以从本地文件导入图片；企业版用户还可以通过自托管 URL导入。
你可以直接在属性面板中微调不透明度、圆角、填充等多种参数，以实现所需的视觉效果。
SVG 图层
在 ProtoPie 中，你可以导入可缩放矢量图形（SVG），并通过“设为可编辑（Make Editable）”选项将其转换为形状后编辑其属性，同时不损失画质。
处理 ProtoPie 尚未完全支持的 SVG 文件时，“设为可编辑（Make Editable）”按钮可能会改变图层外观。
当前不支持颜色渐变和多色填充。
你可以从 Sketch、Figma、Adobe XD 或 Zeplin 复制 SVG 代码并直接粘贴到 ProtoPie 中。
使用ProtoPie 的 Figma 插件将矢量图层以 SVG 形式导入。
视频图层
你可以通过将视频拖放到场景中来添加视频，也可以创建视频图层并选择你想要的视频。若要保持视频原始尺寸，可在属性面板中点击“应用原始比例”选项。
根据你的套餐，你可以从本地文件导入视频；企业版用户还可以通过自托管 URL导入。
ProtoPie 支持最大 100 MB 的 MP4（H.264）、WebM 和 MOV 视频文件。不过，在将视频导入 ProtoPie Studio 之前，务必确保视频满足以下条件，以便在移动设备上的 ProtoPie Player 中顺畅测试：
针对 iOS：
支持的格式包括 MP4（H.264）和 MOV。
使用 H.265/H.264 编码的 M4V、MP4、MOV 文件，最高支持 4K/60 fps，High Profile level 4.2，音频为 AAC-LC（最高 160 Kbps、48kHz、立体声）。
使用 MPEG-4 编码的 M4V、MP4、MOV 文件，最高支持 2.5 Mbps、480p/30 fps，Simple Profile，音频为 AAC-LC（最高 160 Kbps、48kHz、立体声）。
使用 Motion JPEG（M-JPEG）编码的 AVI 文件，最高 35 Mbps，1280×720 像素，30 帧/秒，音频为 ulaw、PCM 立体声。
参考：
针对 Android：
支持的格式包括 MP4（H.264）和 WebM。
参考：
透明背景视频
通过支持透明背景视频，ProtoPie 在迈向 3D 方面迈出了开创性一步，同时提升了原型性能。
在将视频导入 ProtoPie Studio 场景之前，请确认视频编码和格式满足以下条件，以确保其在对应平台（无论是预览窗口、ProtoPie Player 还是 ProtoPie Cloud）中获得最佳表现。
透明背景视频在以下条件下表现最佳：
Web 端：Chrome 支持带 alpha 通道的 VP9（.webm），Safari 支持带 alpha 通道的 HEVC（.mov、*.mp4）。
iOS：建议使用带 alpha 通道的 HEVC。iOS 上若编码/格式不正确，可能导致内容无法在指定区域内正确显示。
Android：Android 原生不支持带 alpha 通道的视频文件。
Lottie 图层
Lottie 媒体图层会加载一个 JSON 文件，其中包含由 Bodymovin 导出的、已解析的 Adobe After Effects 动画。 了解更多 LottieFiles 信息。
你可以通过将 Lottie 文件拖放到场景中来添加，也可以创建 Lottie 图层并选择所需的 Lottie 文件。若要保持 Lottie 文件原始尺寸，可在属性面板中点击“应用原始比例”选项。
根据你的套餐，你可以从本地文件导入 Lottie 文件；企业版用户还可以通过自托管 URL导入。
音频图层
ProtoPie 支持 WAV、MP3 和 M4A 音频文件。
相机图层
你可以将智能设备原生相机的输出作为原型中的一个图层，甚至可以扫描二维码和条形码。此功能仅在使用 ProtoPie Player 测试原型时可用。在预览窗口或网页浏览器中运行原型时，将显示占位内容。
文本图层
文本图层是用于显示文本的图层。
缺失字体
如果字体缺失，会显示缺失字体警告。请选择替代字体以替换缺失字体。
将自定义字体应用到文本图层
仅企业版套餐可用。
编辑者可按照以下简单步骤，在 ProtoPie Studio 中轻松将自定义字体应用到文本图层：
选择一个可编辑的文本图层。
在文本图层的属性面板中打开“字体”菜单。
浏览字体列表，并在“自定义（Custom）”类别中选择一个可用的自定义字体。该列表仅显示你的企业团队和/或组织中可访问的自定义字体。
所选文本图层将以所选自定义字体显示。
注意：只有团队所有者、团队管理员和服务管理员可以上传自定义字体。
将自定义字体应用到所有使用同一字体的文本图层
仅企业版套餐可用。
编辑者可按照以下步骤，将自定义字体轻松应用到原型中所有场景里使用同一字体的文本图层：
点击顶部导航菜单中的“Edit”。
从选项中选择“Replace Fonts”。
在 Replace Fonts 弹窗中，选择要替换为自定义字体的字体。
点击“Replace”按钮。
所选字体将被替换为所选自定义字体，并应用到整个原型中。
输入图层
输入图层用于通过智能设备原生键盘或物理键盘输入单行或多行文本。
背景模糊图层
支持以下模糊效果：Android 和 iOS 的三种默认效果（Dark、Light 和 Extra Light），以及 Web 和 iOS 13 及以上版本支持的另外十种模糊效果。
约束
你可以为图层设置约束。当父图层被手动调整大小或通过Response调整大小时，子图层的尺寸和位置会根据其约束自动调整。
固定到右上角
通过设置 Right 和 Top 约束，灰色图层将保持相对于其父图层右侧和顶部的位置。此外，当父图层调整大小时，灰色图层会保持其尺寸不变。
缩放间距
当宽度和高度都设置为 Scale 选项时，灰色图层的尺寸和位置会按比例随父图层尺寸变化而调整，并保持与父图层相同的缩放比例。
固定间距
在宽度中设置 L+R、在高度中设置 T+B 后，当父图层宽度变化时，灰色图层会在保持左右间距不变的同时调整大小。
常见问题
does-protopie-support-alpha-masks
ProtoPie 支持 Alpha 蒙版吗？
尽管 ProtoPie 尚未完全支持 Alpha 蒙版功能，但仍然可以在你的设计中应用它。你可以将渐变图层导出为 PNG，并将其导入 ProtoPie Studio。为了更好地理解，请查看以下示例：
supported-media-file-format
支持哪些媒体文件格式？
根据您的套餐，您可以从本地文件导入图像；企业版用户还可以通过自托管 URL 导入。
ProtoPie 支持以下媒体格式：
图像：PNG、JPG、JPEG、BMP、GIF、SVG 和 WebP。
视频：MP4（H.264）、WebM 和不超过 100 MB 的 MOV 文件。
Lottie：ProtoPie 不支持使用 expressions（表达式）的 Lottie 文件。
如果您尝试使用不受支持的媒体文件格式，将显示错误消息。请参阅下方错误代码说明，以了解受支持的媒体文件格式。
E001：请确保您输入的媒体文件 URL 具有正确的内容类型。
E002：您尝试使用的媒体类型不兼容；请选择受支持的类型。
E100：请确保您输入的媒体文件 URL 正确且可在线访问。
E101：不支持 '.lottie'（Dot Lottie）文件格式。请选择其他 Lottie 文件格式。
E102：如果在加载 Lottie 动画时遇到超时错误，请稍后重试。
E103：请确保您的 Lottie JSON 文件包含必需属性：layer、ip、op、fr、w 和 h。
E104：如果遇到 Lottie 加载错误，请检查 Lottie 文件是否有效且未损坏。
E105：Lottie 资源应使用 URL 或在线资源，而不是本地路径。
E106：请检查您的 Lottie JSON 文件，确保其不为空，并符合 Lottie 的正确 JSON 格式。
E200：请确保您输入的 HLS URL 准确且可访问。
E201：请验证您的视频源 URL 可访问且正确。
E202：请使用 MP4（H.264）、WebM 和不超过 100 MB 的 MOV 文件。
E203：所使用的视频编解码器不受支持。
E300：ProtoPie 仅支持 WAV、MP3 和 M4A 等音频文件格式。
E301：如果您遇到音频加载错误，请确保音频文件未损坏且为受支持的格式。
E400：图像加载失败。请检查后重试。
E500：不支持此文件格式；请选择受支持的格式。
E501：文件可能存在问题。请检查后重试。
E600：请确保您的音频源 URL 有效且可访问。
supported-self-hosted-url-format
支持哪些自托管 URL 格式？
我们不会对 URL 格式施加任何特定限制。如果该 URL 在您的网站上可用，并且由您自行服务器托管，那么它应该可以正常工作，不会出现任何问题。
但是，如果媒体加载失败，可能是由于 CORS（跨源资源共享） 限制。请确保您的托管服务器通过设置适当的 CORS 标头来允许来自外部域的请求。