2312skia,13画布包入门

画矶包快速入门

CanvasKit是用比canvasAPI更高级功能集的Skia来绘画元素到canvas中的wasm模块.

最小应用

此例是个最小Canvaskit应用,它为一帧绘画一个圆角矩形.从unpkg.com中提取wasm二进制文件,但你也可自己构建和管理它.

<canvas id=foo width=300 height=300></canvas>
<script type="text/Js"src="https://unpkg.com/canvaskit-wasm@0.19.0/bin/canvaskit.js"></script>
<script type="text/Js">const ckLoaded = CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.19.0/bin/'+file});ckLoaded.then((CanvasKit) => {const surface = CanvasKit.MakeCanvasSurface('foo');const paint = new CanvasKit.Paint();paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));paint.setStyle(CanvasKit.PaintStyle.Stroke);paint.setAntiAlias(true);const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);function draw(canvas) {canvas.clear(CanvasKit.WHITE);canvas.drawRRect(rr, paint);}surface.drawOnce(draw);});
</script>

分解为几个部分来解释:

<canvas id=foo width=300 height=300></canvas>

创建CanvasKit要绘画的画布.该元素控制绘图缓冲的宽度和高度,css风格控制绘画到这些像素后应用的缩放.

尽管使用了canvas元素,但CanvasKit并没有调用HTML的canvas自己的绘画方法.它使用此canvas元素,来取WebGL2环境,并用编译为WebAssembly的C++代码来绘图,然后在每帧结束时向GPU发送命令.

<script type="text/Js"src="https://unpkg.com/canvaskit-wasm@0.19.0/bin/canvaskit.js"></script>

和

const ckLoaded = CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.19.0/bin/'+file});
ckLoaded.then((CanvasKit) => {

分别加载canvaskit助手js和wasm二进制文件.CanvasKitInit接受一个一般叫CanvasKit的a函数函数,a允许你更改它试查找canvaskit.wasm的路径,并返回一个用加载模块解析的promise.

const surface = CanvasKit.MakeCanvasSurface('foo');

创建与上述HTMLcanvas元素关联的Surface.默认硬件加速,但可调用MakeSWCanvasSurface来覆盖.MakeCanvasSurface也可指定替代颜色空间或gl属性.

const paint = new CanvasKit.Paint();
paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
paint.setStyle(CanvasKit.PaintStyle.Stroke);
paint.setAntiAlias(true);
const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);

创建绘画,描述如何在canvaskit中填充或描边,矩形,路径,文本和其他几何图形.rr是一个在X轴上圆角半径为25,在y轴上圆角半径为15个像素的圆角矩形.

function draw(canvas) {canvas.clear(CanvasKit.WHITE);canvas.drawRRect(rr, paint);
}

定义绘画帧的函数.它提供了一个在上面绘画的Canvas对象.一个用来清理整个画布,另一个用上面的画笔绘画圆形矩形.

还删除了画笔对象.必须删除使用new或以make为前缀的方法创建的CanvasKit对象,才能释放wasm内存.Js的GC不会自动处理它.
rr只是一个不是用new创建的数组,也不指向WASM内存,因此不必对它调用delete.

surface.drawOnce(draw);
paint.delete()

给绘图函数提交调用并刷新表面的surface.drawOnce.刷新后,Skia处理并批发送WebGL命令,这样,在屏幕上出现可见更改.

基本绘画循环

如果要在画布上每一帧,都重画该怎么办?此例像90年代的屏幕保护程序一样,反弹一个圆角矩形.

ckLoaded.then((CanvasKit) => {const surface = CanvasKit.MakeCanvasSurface('foo2');const paint = new CanvasKit.Paint();paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));paint.setStyle(CanvasKit.PaintStyle.Stroke);paint.setAntiAlias(true);//`const rr=CanvasKit.RRectXY(CanvasKit.LTRBRect(10,60,210,260),25,15);`const w = 100; //矩形的大小const h = 60;let x = 10; //左上角的初始位置.let y = 60;let dirX = 1; //盒子总是在`四个对角线方向`之一上,按`恒定`速度移动let dirY = 1;function drawFrame(canvas) {//检查边界if (x < 0 || x+w > 300) {dirX *= -1; //撞击侧壁时反转X方向}if (y < 0 || y+h > 300) {dirY *= -1; //撞击顶壁和底壁时反转Y方向}//移动x += dirX;y += dirY;canvas.clear(CanvasKit.WHITE);const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, x+w, y+h), 25, 15);canvas.drawRRect(rr, paint);surface.requestAnimationFrame(drawFrame);}surface.requestAnimationFrame(drawFrame);
});

主要区别在,在绘画每一帧前,定义了一个要调用的函数,并把它传递给surface.requestAnimationFrame(drawFrame);,传递该回调给画布,并刷新.

function drawFrame(canvas) {canvas.clear(CanvasKit.WHITE);//在此更新和绘画框架的代码surface.requestAnimationFrame(drawFrame);
}
surface.requestAnimationFrame(drawFrame);

创建函数作为主绘图循环.每次渲染一帧(浏览器一般以60fps为目标)时,都会调用该函数,用白色清理画布,重画圆角矩形,然后调用surface.requestAnimationFrame(drawFrame)来注册要在下一帧前再次调用的函数.

surface.requestAnimationFrame(drawFrame)把window.requestAnimationFrame与surface.flush()``组合在一起,并同样方法使用.

如果应用仅因鼠标事件而有可见更改,请不要在drawFrame函数末尾调用surface.requestAnimationFrame.而仅在处理鼠标输入后调用它.

变形文本

CanvasKit在HTMLCanvasAPI上提供的最大功能之一是变形段落.要用它,提供字体文件,并在CanvasKit和字体文件都准备就绪时,使用Promise.all运行代码.

const loadFont = fetch('https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf').then((response) => response.arrayBuffer());
Promise.all([ckLoaded, loadFont]).then(([CanvasKit, robotoData]) => {const surface = CanvasKit.MakeCanvasSurface('foo3');const canvas = surface.getCanvas();canvas.clear(CanvasKit.Color4f(0.9, 0.9, 0.9, 1.0));const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);const paraStyle = new CanvasKit.ParagraphStyle({textStyle: {color: CanvasKit.BLACK,fontFamilies: ['Roboto'],fontSize: 28,},textAlign: CanvasKit.TextAlign.Left,});const text = 'Any sufficiently entrenched technology is indistinguishable from Js';const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);builder.addText(text);const paragraph = builder.build();paragraph.layout(290); //换行文本时使用的宽度(以像素为单位)canvas.drawParagraph(paragraph, 10, 10);surface.flush();
});
const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);

在CanvasKit中,创建一个按名提供的包含字体的各种文本工具.如果需要,可在此语句中加载多个字体.

const paraStyle = new CanvasKit.ParagraphStyle({textStyle: {color: CanvasKit.BLACK,fontFamilies: ['Roboto'],fontSize: 28,},textAlign: CanvasKit.TextAlign.Left,
});

指定文本风格及字体名,机器从字体管理器中取它.可指定(color)或(foregroundColor和backgroundColor)以获得高亮.
有关API的完整文档,请查看npm包的types/子目录或Skia仓库中的ts定义.

const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
builder.addText(text);
const paragraph = builder.build();

接着,用风格创建ParagraphBuilder,添加一些文本,并使用build()完成它.或,可在段落中使用多个TextStyles.

const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
builder.addText(text1);
const boldTextStyle = CanvasKit.TextStyle({color: CanvasKit.BLACK,fontFamilies: ['Roboto'],fontSize: 28,fontStyle: {'weight': CanvasKit.FontWeight.Bold},
})
builder.pushStyle(boldTextStyle);
builder.addText(text2);
builder.pop();
builder.addText(text3);
const paragraph = builder.build();

最后,布局段落,即换行文本到指定宽度,然后用

paragraph.layout(290); //换行文本时使用的宽度(以像素为单位)
canvas.drawParagraph(paragraph, 10, 10); //段落左上角的(x,y)位置.

动画

Skia现在为从AfterEffects继承的Bodymovin插件的JSON动画提供了一个高性能,安全的本地播放器.可在包括安卓和iOS的Skia平台上使用.

该播放器旨在在创建当今广泛用来动画的Lottie播放器的基础上,为客户提高性能,功能集和平台凝聚力.是Bodymovin格式的忠实粉丝,并在可能时为Bodymovin/Lottie贡献.

示例JSON动画

Skia的动画代码入口可在Googlesource和GitHub上找到.该代码是Skia库的一部分,但也可作为单独的包提供这里及这里.

嵌入示例

1,可在此处找到用Skottie原生播放器的示例C代码.
2,可在此处找到取灵感的安卓应用代码.
3,在此嵌入Skottie到Viewer应用中的示例代码.
4,可按后面说明构建Viewer或SkottieAndroid应用.