认识一下 canvaskit.js

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.

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

Github 链接

相关推荐
大码猴11 分钟前
是时候该用自动化工具玩玩12306了
前端·javascript·后端
来碗盐焗星球31 分钟前
实时通信技术开发经历
前端·javascript
就是我42 分钟前
【React Hook】深入浅出:10分钟理解useContext
前端·javascript·react.js
十年砍柴---小火苗1 小时前
vue的created和mounted区别
javascript·vue.js·ecmascript
阿群的AI工作室1 小时前
新手必看喂饭级教程🔥原来这样用SSH推代码到GitHub才对!
github
rookiefishs1 小时前
javascript如何实现手势🤚🏻的检测与识别?🤨
javascript
lens941 小时前
Oxlint:干掉ESLint卡顿!前端火箭级代码检查器来了!
前端·javascript
RePeaT1 小时前
JavaScript切换元素显示隐藏的方法
前端·javascript
bitbitDown1 小时前
同事用了个@vue:mounted,我去官网找了半天没找到
前端·javascript·vue.js
EndingCoder2 小时前
React Native 基础语法与核心组件:深入指南
javascript·react native·react.js·跨端