Canvaskit快速入门教程
发布日期:2025-01-02 11:49 点击次数:93
CanvasKit快速开始
CanvasKit 是一个 wasm 模块,它使用 Skia 去绘制画布元素,是一个比canvas API更高级的功能集。
一、最小应用
这个例子是一个最小的 Canvaskit 应用程序,它为一帧绘制一个圆角矩形。它从 unpkg.com 中提取 wasm 二进制文件,但您也可以自己构建和托管它。
二、代码解释
创建 CanvasKit 将绘制到的画布。这个元素是我们控制绘图缓冲区的宽度和高度的地方,而它的 css 样式将控制在绘制到这些像素后应用的任何缩放。尽管使用了画布元素,CanvasKit 并没有调用 HTML 画布自己的绘制方法。它使用此画布元素获取 WebGL2 上下文并使用编译为 WebAssembly 的 C++ 代码执行大部分绘图工作,然后在每帧结束时向 GPU 发送命令。
加载canvaskit和wasm相关的二进制文件
CanvasKitInit接受一个函数参数,允许您更改它将尝试查找canvaskit.wasm的路径,该函数的返回值是一个promise,解析为加载的模块,通常将其命名为 CanvasKit。
创建一个与上面的 HTML canvas 元素关联的 Surface。但可以通过调用 MakeSWCanvasSurface 来覆盖。 MakeCanvasSurface 也是可以指定替代颜色空间或 gl 属性的地方。这个Surface会硬件加速
创建绘画,描述如何在 canvaskit 中填充或描边矩形、路径、文本和其他几何图形。 rr 是一个圆角矩形,其角在 x 轴上的半径为 25像素,在 y 轴上的半径为 15 个像素。
定义一个函数来绘制。函数参数需要提供一个 Canvas 对象,我们可以在该对象上进行绘制调用。先清除画布再绘制圆角矩形。
我们还删除了 paint 对象。必须删除使用 new 创建的 CanvasKit 对象或以 make 为前缀的方法才能释放 wasm 内存。 Javascript 的 GC 不会自动处理它。 rr 只是一个数组,不是用 new 创建的,也没有指向任何 WASM 内存,所以我们不必对其调用 delete。
将绘图函数交给 surface.drawOnce 进行调用并刷新表面。刷新后,Skia 将批处理并发送 WebGL 命令,使可见的变化出现在屏幕上。此示例绘制一次并处理表面,这就是一个一个canvaskit的最小应用程序。
codesandbox.io/s/suspiciou…
三、基本绘制循环
如果我们需要每一帧都重绘到画布上怎么办?此示例像 90 年代的屏幕保护程序一样弹跳圆角矩形。
codesandbox.io/s/zen-bush-…
这里的主要区别是我们定义了一个在绘制每一帧之前要调用的函数,并将其传递给 surface.requestAnimationFrame(drawFrame);该回调被交给画布并处理冲洗。
创建一个函数作为我们的主要绘图循环。每次要渲染一帧(浏览器通常以 60fps 为目标)时,都会调用我们的函数,我们用白色清除画布,重新绘制圆形矩形,然后调用 surface.requestAnimationFrame(drawFrame) 注册要再次调用的函数在下一帧之前。
surface.requestAnimationFrame(drawFrame) 结合了 window.requestAnimationFrame 和 surface.flush() 并且应该以相同的方式使用。如果您的应用程序只会因鼠标事件而做出可见更改,请不要在 drawFrame 函数末尾调用 surface.requestAnimationFrame。仅在处理鼠标输入后调用它。
四、变形文本
CanvasKit 通过 HTML Canvas API 提供的最大功能之一是段落整形。要在您的应用程序中使用文本,请提供字体文件并在 CanvasKit 和字体文件准备就绪后使用 Promise.all 运行您的代码。
codesandbox.io/s/serene-ch…
创建一个对象,该对象按名称为 CanvasKit 中的各种文本工具提供字体。如果需要,您可以在此语句中加载多种字体。
指定文本的样式。字体名称 Roboto 将用于从字体管理器中获取它。您可以指定 (color) 或 (foregroundColor and backgroundColor) 以突出显示。有关 API 的完整文档,请查看 npm 包的类型/子文件夹或 Skia 存储库中的 Typescript 定义。
接下来,我们创建一个带有样式的 ParagraphBuilder,添加一些文本,并使用 build() 完成它。并且,我们可以在一个段落中使用多个 TextStyles
最后,我们对段落进行布局,将文本包装到特定宽度,然后将其绘制到画布上
以上就是Canvaskit快速入门教程的详细内容,更多关于Canvaskit入门教程的资料请关注脚本之家其它相关文章!
您可能感兴趣的文章:Canvas实现二娃翠花回家之路小游戏demo解析一文详解Canvas实现打飞字游戏过程示例Canvas如何判断点在形状内及内置API性能详解JS技巧Canvas性能优化脏矩形渲染实例详解JavaScript Canvas实现兼容IE的兔子发射爆破动图特效ECharts Canvas渲染在SVG合理运用canvas 2d 环形统计图手写实现示例