canvaskit-wasm —— 在浏览器中直接使用 skia 的能力渲染 sketch 文件

Skia 是一个广泛应用于 Flutter、Chromium 和 Android 的 2D 图形库。为了使 Flutter 可以在浏览器中运行，Google 工程师将 Skia 编译成了 WebAssembly 版本。这一创新使得在浏览器中直接设计并生成代码成为可能。虽然 Figma 是一个强大的浏览器内的 UI 设计工具，使用 C++ 和 WebGL，实现类似功能可能具有挑战性，但有了 Canvaskit，这个目标就变得更有希望。Canvaskit 提供了与 Canvas 2D 类似的接口，同时避免了 WebGL 的复杂性，非常适合复杂的 2D 图形渲染。

在浏览器中渲染 Sketch 设计稿文件的项目中，性能和功能是关键因素。使用 Canvaskit 的优势在于，它可以缓存绘制中间对象，减少重复绘制时的资源开销，并且避免了 GPU 内存与 CPU 内存之间的交换。这使得在多次绘制场景中，Canvaskit 的性能优于 Canvas 2D。

Canvaskit 在实现性能优化的同时，还提供了额外的突出能力。例如，它支持布尔运算，这在图形编辑器中非常常见，设计师可以使用它来快速构建复杂的图形。此外，Canvaskit 还支持文本排版功能，提供了一个简单的接口来实现多行文本，尽管加载字体文件时可能会遇到中文字体文件大小较大的问题。

在使用 Canvaskit 的过程中，有几个需要注意的点。首先，获取 Canvas 时，主要的绘制指令在 SkCanvas 上，通过 SkSurface 实现。在实际使用中，建议使用 MakeOnScreenGLSurface 方法来创建 Surface，因为它的创建成本较低，每次绘制时都可重新创建。其次，坐标系统与 Canvas 2D 类似，但在绘制复杂的 Path 图层时，需要处理 fill、border、shadow、innerShadow 和 blur 等属性。对于 Text 图层的绘制，主要复杂点在于将 Sketch 的 TextStyle 对应到 Skia 的 TextStyle 上，同时需要关注字体加载问题，确保高质量的文本渲染。

优化缩放体验是提高 Sketch 文件绘制性能的关键。使用 Canvaskit，可以实现优化的缓存策略，如采用 Tile 方式将视口内容分割，每个 Tile 大小为 256 * 256，以减轻大量内容绘制的压力。此外，管理好垃圾，确保释放不再使用的对象，也是在使用 Canvaskit 时需要关注的事项。

在学习 Canvaskit 的过程中，可以参考其相关文档和代码示例，以更好地理解其接口和功能。通过实践和深入理解，可以更有效地利用 Canvaskit 在浏览器中实现复杂的 2D 图形渲染。

您可能感兴趣问答

Collapsible

热门标签

热点问答