对 CanvasKit 布尔运算做简单测试

368 阅读3分钟

大家好,我是前端西瓜哥。

布尔运算是相当复杂的算法,需要考虑各种各样的图形,并匹配不同的布尔模式,有相当多的边缘场景。

通常我们需要找一些算法库或图形库,用里面的布尔算法进行业务开发。

为此,我写了一个 Canvaskit / Skia 的布尔算法结果准确性测试的可视化小工具,感兴趣的朋友欢迎 star。

github 项目地址为:

github.com/F-star/bool…

直接体验:

f-star.github.io/boolean-tes…

其实也就是 将图形两个一组,将它们所有的布尔运算的结果绘制在画布上,然后肉眼确认有没有问题

效果如下。

图片

图片

支持通过鼠标拖拽画布,以及滚轮缩放画布。

图片

目前测试用例还比较少,也比较简单,之后会逐步加上更多的测试用例。

但需要注意的是,进行布尔运算的图形都会用 svg 的 path 表示,且 只支持直线和三阶贝塞尔曲线,其他的曲线类型都会拟合成三阶贝塞尔曲线

当然欢迎大家给我提 issue,提供一些极端的场景,提供两段 svg path 字符串即可。

也可以自行 clone,然后在 data.ts 里加上新的测试用例。

另外,还有其他布尔运算的库,比如 paper.js,之后我会慢慢一个个加上。

之后还会提供路径的控制点显示等功能。

结尾

我是前端西瓜哥,关注我,学习更多前端图形知识。


相关阅读,

Canvaskit 入门,绘制基本图形

canvaskit 高级功能:布尔运算

Canvaskit 中矩阵的使用

如何用三阶贝塞尔曲线拟合圆形、椭圆、任意圆弧?

Web 端图形渲染方案这么多,到底该选哪一种?

本文使用 文章同步助手 同步