认识一下 canvaskit.js

1,808 阅读1分钟

Skia 和 canvaskit.js 关系

根据现有的情报, Chrome 在实现 canvas 的绘制指令时,  底层使用的是 Skia 引擎绘制. 当然了, 还包括 Flutter, Chrome OS 也使用了 Skia. 下面是 Skia 管方的介绍:

CanvasKit 是基于 Skia 图形库的 js 版本,它使用 WebAssembly (WASM) 技术将 Skia 的图形 API 导出到 Web 平台.

API

既然 canvaskit 是 Skia 的 js 版本,  那么在使用上他们应该又很多相似性.  不过 canvaskit 本身似乎没有独立的 API 页面, 只有 Skia 有.  但是,  Skia 和 canvaskit 的 API 并不是一致的,  整体架构一样,但是大部分 API 命名是不一样的.

这是由于 canvaskit.js 是在 Emscripten 编译结果的另一层封装, 因此他们不一样. 
下面信息来自  github.com/google/skia…

可以看到 Emscripten 对 SkPath 在binding 时并没改名字.

但是在封装到 Canvaskit 对象的时候改了名字. 直接挂载到 Canvaskit.Path 下了. 

所以在使用 canvaskit 时, 目前看最好的办法是在 Google 的 Skia 仓库中搜索来判断是否存在相关 API .

一个 CanvasKit demo: 文字路径排版

本想通过 canvaskit 来获取文字字形,  也就是 glyph 的路径.  发现一个 API 叫做 MakeOnPath,  但是实际上是另一种效果,  这个 API 是将文字沿着确定的路径排版. 暂时还不知道如何得到 glyph path.

如果有一个路径是圆形, 那么文字就按照原型排版.   最终效果如下

另外绘制 Path 时注意时针顺序,  如果是顺时针, 文字将绘制在 shape 内部

Github 链接

突然间键盘的 N 按键坏了,  未完待续  To be continued >>>>>