网格(Meshes)
网格允许您通过移动顶点来变形光栅图像,而不是将图像作为平面矩形进行变换。它适用于自然运动效果,如皮肤弯曲、布料波动、头发飘动,或创建仿 3D 效果。
网格由轮廓构建,轮廓定义了网格的形状和顶点。Rive 使用该轮廓在图像上创建三角化表面。
为图像添加网格(Adding a Mesh to an image)
在舞台或层级中选中一个图像,按 Enter 键,或转到检查器中的 Deform 部分。
点击 + 按钮,然后选择 Mesh。

变形网格(Deforming a Mesh)
按 V 键或取消选中 Edit Contour 可进入网格编辑模式。
在网格编辑模式下,移动一个顶点会改变与该顶点相连的所有三角形的形状,并变形这些三角形内的像素。未与被移动顶点相连的三角形中的像素不受影响。
以下是一个简单的网格,由四个顶点分成两个三角形:
以下是一个稍复杂的网格,有一个中心顶点,将图像分成四个三角形:
这些顶点的位置可以在时间线上设置关键帧,也可以由骨骼控制。
轮廓(Contours)
轮廓定义了网格的可见形状和顶点结构。编辑轮廓会改变网格结构,但不会变形图像。
创建轮廓(Creating contours)
当您为图像添加网格时,Rive 会自动创建一个简单的轮廓,包含四个顶点,形成两个三角形。您可以将此轮廓作为起点,也可以自行创建。
手动创建新轮廓
点击 New Contour 按钮可以从头绘制一个新轮廓。
当默认轮廓与图像形状不匹配,或者您想要完全控制网格结构时,这很有用。
自动追踪新轮廓
使用 Auto-Trace 可以快速创建一个跟随图像可见形状的轮廓。
调整以下设置来控制生成的轮廓:
- Detail(细节) — 轮廓跟随图像中小细节的紧密程度。
- Concavity(凹度) — 轮廓跟随内曲线的深度。
- Uniform(均匀度) — 顶点沿轮廓分布的均匀程度。
- Alpha(透明度) — 用于检测图像边缘的透明度阈值。
- Padding(边距) — 在追踪轮廓周围添加的额外空间。
轮廓边界(Contour bounds)
只有轮廓内的区域会被渲染。轮廓外的任何内容都会被隐藏。
当您想从同一图像的不同部分创建多个网格时,这很有用。
编辑轮廓(Editing contours)
使用 Edit Contour 或按 P 键可以调整现有轮廓。网格钢笔工具允许您添加新顶点或移动现有顶点,而不会扭曲图像。
连续点击可以在顶点之间创建强制边。在点击之间按 Esc 键可以创建独立的顶点,让 Rive 自动生成它们之间的边。
强制边(Forced edges)
强制边是您在网格顶点之间手动添加的边。当您需要更多控制网格结构时使用强制边,例如定义重要的接缝、折痕、拐角,或网格三角形应遵循特定路径的区域。
使用网格钢笔工具时,连续点击可以创建带强制边的连接顶点。
强制边在网格中显示为较粗的线。

要移除强制边,选择 Edit Contour,然后在 macOS 上按住 Cmd 点击该边,或在 Windows 上按住 Ctrl 点击该边。
生成(Generate)
使用 Generate 可以为当前网格添加更多顶点。多次点击 Generate 可以增加网格复杂度。
更复杂的网格可以创建更平滑的变形,但也可能更难编辑。
重置轮廓(Resetting a contour)
使用 Reset 可以将网格恢复为默认轮廓。
管理网格(Managing meshes)
复制网格(Copying a Mesh)
您可以复制一个网格并将其应用到另一个图像上。
选中包含要复制网格的图像,在 macOS 上按 Cmd + C,或在 Windows 上按 Ctrl + C。
选中要应用网格的图像,在 macOS 上按 Cmd + P,或在 Windows 上按 Ctrl + P 粘贴网格。
替换图像(Swapping images)
更换图像后,网格可以继续工作。
当多个图像共享相同的基本结构时,这很有用。同一个网格可以变形每个面孔,而无需为每个图像创建单独的网格。
移除网格(Removing a Mesh)
图像添加网格后,Deform 部分会显示编辑或移除网格的选项。
在舞台或层级中选中一个图像,按 Enter 键,或转到检查器中的 Deform 部分。
点击 Edit Mesh 或 Remove Mesh 按钮。
移除网格会删除该图像的网格及其顶点编辑。