Penpot 的三笔画难题：设计系统的混沌

The Three-Stroke Problem

在 Penpot 从 SVG 迁移到 WebGL 渲染的过程中，我们遇到了一个类似物理学中三体问题的挑战，我将其命名为“三笔画难题”。当内描边、中心描边和外描边这三种类型在 CSS、SVG 和 Skia 等不同技术栈中交织时，默认行为的不一致导致了系统的混乱。CSS 默认内描边，SVG 默认中心描边，而 WebGL 渲染器需要利用 Skia 库通过复杂的几何偏移和图层操作来统一这些表现。此外，处理虚线、点状线以及多重描边时，变量进一步增加，使得渲染逻辑变得异常复杂。通过深入剖析这些差异，我们展示了如何利用 WebGL 的灵活性来驾驭这种混沌，为设计系统提供更强大的视觉控制能力。