网站推广昔年下拉博客,建设工程师交易网站,自己做的网站出现乱码,广州企业开办一网通平台画矶包快速入门
CanvasKit是用比canvasAPI更高级功能集的Skia来绘画元素到canvas中的wasm模块.
最小应用
此例是个最小Canvaskit应用,它为一帧绘画一个圆角矩形.从unpkg.com中提取wasm二进制文件,但你也可自己构建和管理它.
canvas idfoo width300 height300/c…画矶包快速入门
CanvasKit是用比canvasAPI更高级功能集的Skia来绘画元素到canvas中的wasm模块.
最小应用
此例是个最小Canvaskit应用,它为一帧绘画一个圆角矩形.从unpkg.com中提取wasm二进制文件,但你也可自己构建和管理它.
canvas idfoo width300 height300/canvas
script typetext/Jssrchttps://unpkg.com/canvaskit-wasm0.19.0/bin/canvaskit.js/script
script typetext/Jsconst ckLoaded CanvasKitInit({locateFile: (file) https://unpkg.com/canvaskit-wasm0.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 idfoo width300 height300/canvas创建CanvasKit要绘画的画布.该元素控制绘图缓冲的宽度和高度,css风格控制绘画到这些像素后应用的缩放.
尽管使用了canvas元素,但CanvasKit并没有调用HTML的canvas自己的绘画方法.它使用此canvas元素,来取WebGL2环境,并用编译为WebAssembly的C代码来绘图,然后在每帧结束时向GPU发送命令.
script typetext/Jssrchttps://unpkg.com/canvaskit-wasm0.19.0/bin/canvaskit.js/script和
const ckLoaded CanvasKitInit({locateFile: (file) https://unpkg.com/canvaskit-wasm0.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 rrCanvasKit.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 || xw 300) {dirX * -1; //撞击侧壁时反转X方向}if (y 0 || yh 300) {dirY * -1; //撞击顶壁和底壁时反转Y方向}//移动x dirX;y dirY;canvas.clear(CanvasKit.WHITE);const rr CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, xw, yh), 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应用.
