认识一下 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 链接

相关推荐
ℋᙚᵐⁱᒻᵉ鲸落1 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙2 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
এ慕ོ冬℘゜4 小时前
navigator 导航对象 BOM制作方法
javascript
峰向AI6 小时前
GenOffice:开源 Office 套件,字节级保留、本地转换、BYOK模式
github
kyriewen6 小时前
面试官让我用 AI 重构一个 8 年陈的 React 组件——他说他不看代码,只看我会不会拆
前端·javascript·面试
Jacky19997 小时前
Electron + Vue 3 桌面打字游戏实战:从 VSCode 扩展到独立应用的架构改造
javascript
其实防守也摸鱼8 小时前
权限提升与横向移动:从内网渗透到域控的完整技术图谱
运维·服务器·数据库·安全·github·copilot·渗透
m4Rk_8 小时前
【论文阅读】Agent 记忆机制(57):MemSearch-o1——从查询词元生长证据,重组 Deep Search 记忆路径
论文阅读·人工智能·学习·开源·github
其实防守也摸鱼8 小时前
免杀与持久化入门:从载荷免杀到隐蔽通道的完整指南
运维·服务器·数据库·安全·github·copilot·渗透
柚yuzumi9 小时前
别再猜 this:先看它属于谁,再看它指向谁
前端·javascript