前言
缠绕规则
缠绕规则实际上包括两种不同的规则：非零缠绕规则（Non-zero winding rule）和奇偶缠绕规则（Even-odd winding rule）。奇偶缠绕规则计算直线与路径相交的总次数，而非零缠绕规则则进一步考虑了路径的方向。简而言之，非零缠绕规则会考虑路径的方向，而奇偶缠绕规则只关注相交次数。
迷惑与挑战
在设计工作中，设计师常常遇到绘制的矢量图形一致但填充结果不一致的情况。下图中展示了两个矢量图形，它们的结构和填充规则一致，但是明显可以看到右边矩形的内部区域没有被颜色填充。这是为什么呢？
示例图：结构、填充规则一致表现却不一致的矢量图形（Sketch中制作）
在非零缠绕规则下，路径的绘制顺序和方向决定了填充区域的识别。例如，我们考虑两个矩形图形：一个内部矩形和一个外部矩形。在第一个例子中，两个矩形都是以顺时针方向绘制的。这种一致的绘制方向使得非零缠绕规则能够正确识别内部和外部区域，从而填充整个图形。
然而，在第二个例子中，外部矩形保持顺时针绘制，而内部矩形改为逆时针绘制。这种绘制方向的不一致导致了填充结果的显著差异。根据非零缠绕规则，路径的方向性被用来计算填充区域。当外部顺时针路径与内部逆时针路径相遇时，它们的组合值在非零缠绕规则下相互抵消。这意味着，尽管内部矩形在视觉上是存在的，但由于其路径方向与外部矩形相反，填充算法将其视为“无效”，导致内部区域的组合值为零，因此这部分区域不会被填充。
示例图：路径的绘制顺序和方向（Sketch中制作）
通过这个例子我们可以看到，路径的绘制顺序和方向对填充结果起着至关重要的作用，尤其是在应用非零缠绕规则时，这一点尤为突出。非零缠绕规则虽然在处理复杂图形时提供了强大的功能，但同时也可能带来一些意料之外的填充效果。例如，图形内部的小自相交路径可能会因规则的复杂性而被错误地填充或遗漏。
设计工具通常不会直观地显示路径的方向，这增加了设计师在理解和控制填充效果时的难度。因此，设计师在创作过程中需要对路径的绘制细节保持高度警觉，以确保最终的设计作品能够呈现出预期的填充效果。
为了应对这些挑战，设计师需要深入理解非零缠绕规则的工作原理，并在设计时考虑到路径的方向性。通过精确控制路径的绘制顺序和方向，设计师可以更有效地利用这一规则，创造出既准确又一致的矢量图形填充效果。同时，这也要求设计师在使用设计工具时，要具备一定的技术敏感性和对细节的关注，以避免由于路径方向不当而导致的填充错误。
闭合路径填充
这种规则基于一个简单的前提：当路径完全闭合时，Figma 会自动填充该区域。这意味着设计师在画布上绘制矢量图形时，无需担心路径的环绕数值或是交叉点的数量。Figma 会根据路径的闭合情况自动填充，为设计师提供一个清晰的、可预测的填充结果。此外，Figma 还提供了灵活的控制选项，允许设计师根据需要打开或关闭特定区域的填充。这种设计不仅简化了填充过程，还赋予了设计师更大的创造性控制权。
局限性
闭合路径填充规则虽然简化了设计流程，但确实存在一些局限性。首先，它要求图形路径必须完全闭合才能进行填充，这限制了设计师在创作开放式图形或追求特殊视觉效果时的创意自由度。其次，面对包含自相交路径的复杂图形，这种规则可能难以准确判断哪些区域应该被填充，因为它不考量路径的环绕数值或方向，可能导致填充结果与设计师预期不符。此外，由于闭合路径填充规则的简化特性，设计师可能无法实现某些需要精确填充的设计意图，特别是在设计需要反映复杂层次或细节时。最后，如果设计师需要在不同的设计软件之间切换工作，闭合路径填充规则可能无法在所有软件中提供一致的填充效果，这可能导致在不同平台间的设计转换问题。
演示视频：Figma 闭合路径内的填充和取消填充
VGG：设计工具中的填充规则兼容性解决方案
然而，无论是缠绕规则还是闭合路径填充规则，它们各自都有优势和局限性。设计师在面对不同项目和不同需求时，往往需要在这两种规则之间做出选择。这种选择可能会受到项目需求、个人偏好、团队协作以及最终展示平台等因素的影响。
正是在这样的背景下，VGG 提供了对主流设计生态的兼容（Figma/Sketch/Adobe Illustrator）。VGG Specs 不仅支持传统的缠绕规则，以适应那些需要处理复杂图形和自相交路径的设计需求，同时也支持闭合路径填充规则，为追求直观和简化工作流程的设计师提供便利。
在 Figma 内绘制的复杂矢量图形，并填充了不同的颜色
VGG SaaS 服务准确还原的矢量图形及其填充
通过 VGG Runtime 的跨平台性，设计师可以保持设计的一致性和高质量。这种跨平台的兼容性，不仅提高了工作效率，还为设计师提供了更大的灵活性和创造性空间，使他们能够专注于创意本身，而不是技术细节。
关于 VGG
特性一：无代码完美还原设计稿
VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节，可直接将设计稿作为用户界面，省去前端与客户端开发者使用代码去复原设计稿的开发工作，降低他们与设计师之间的沟通摩擦成本。
特性二：原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式，支持在任意一种已有的 APP 基础上进行增量式开发，主持主流平台与框架。
特性三：脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块，在提供快速业务逻辑开发能力的同时支持高性能计算。
特性四：高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容（Figma/Sketch/Adobe Illustrator），并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具，打通从应用 UI 设计到应用研发的完整流程。
GitHub: https://github.com/verygoodgraphics
官网: https://verygoodgraphics.com
博客: https://blog.verygoodgraphics.com
Discord: https://discord.com/invite/89fFapjfgM
Twitter: https://twitter.com/VGG_Design
