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应用.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/190243.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java——》JSONObjet 数据顺序

Java——》JSONObjet 数据顺序

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…
阅读更多...
Java 普通类和抽象类有哪些区别？

Java 普通类和抽象类有哪些区别？

Java 普通类和抽象类有哪些区别&#xff1f; 在Java中&#xff0c;普通类&#xff08;Concrete Class&#xff09;和抽象类&#xff08;Abstract Class&#xff09;是两种不同类型的类&#xff0c;它们有一些关键区别。 普通类&#xff08;Concrete Class&#xff09;&#x…
阅读更多...
1_企业架构之LNMP

1_企业架构之LNMP

公司企业架构LNMP(单点服务器部署) 学习目标和内容 1、能够描述项目流程 2、能够了解PV、QPS、DAU等参数 3、能够实现服务器基本环境配置 4、能够部署配置MySQL生产环境 5、能够部署配置Nginx生产环境 6、能够部署配置PHP生产环境 7、能够理解PHP-FPM和Nginx关联关系 8、能够配…
阅读更多...
思维模型 逆向思维

思维模型 逆向思维

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。弱者道之用反者道之动。 1 逆向思维的应用 1.1 历史典故 1 曹冲称象 这个故事讲述的是曹操的儿子曹冲如何利用逆向思维解决了称大象重量的难题。曹冲没有直接去称大象的重量&#xff0c;…
阅读更多...
海云安谢朝海：开发安全领域大模型新实践 人工智能助力高效安全左移

海云安谢朝海：开发安全领域大模型新实践 人工智能助力高效安全左移

2023年11月29日&#xff0c;2023中国&#xff08;深圳&#xff09;金融科技大会成功举行&#xff0c;该会议是深圳连续举办的第七届金融科技主题年度会议&#xff0c;也是2023深圳国际金融科技节重要活动之一。做好金融工作&#xff0c;需要兼顾创新与安全&#xff0c;当智能体…
阅读更多...
在表格中显示字典的内容（根据后端返回的数据）vue3

在表格中显示字典的内容（根据后端返回的数据）vue3

进入页面&#xff0c;调接口&#xff0c;后端返回数据&#xff0c;indexType为0或者1&#xff0c;要用这个数据显示字典的内容 用插槽拿到数据 写一个函数&#xff0c;在模板中使用 const { proxy } getCurrentInstance(); // 字典-指标类型 const { index_type } proxy.u…
阅读更多...
谈谈Listener

谈谈Listener

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 Tomcat三大组件&#x…
阅读更多...
分享82个节日PPT，总有一款适合您

分享82个节日PPT，总有一款适合您

分享82个节日PPT&#xff0c;总有一款适合您 82个节日PPT下载链接&#xff1a;https://pan.baidu.com/s/1boDTl3PiHFXLJ890CoUfJA?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易。…
阅读更多...
windows配置go调用python的编译环境

windows配置go调用python的编译环境

go是支持调用python代码的&#xff0c;之前写了几篇linux的部署教程&#xff0c;因为觉得windows的不复杂就没有写&#xff0c;结果今天新部署一个Windows的环境&#xff0c;有些步骤想不起来了&#xff0c;好记性不如烂笔头&#xff0c;还是记录一下吧。 这些是之前写的linux…
阅读更多...
CTF-虚拟机-QEMU-前置知识-操作流程与源码阅读

CTF-虚拟机-QEMU-前置知识-操作流程与源码阅读

文章目录 总览内存PCI设备PCI配置空间前64个字节对应源码Memorry空间的BARIO空间的BAR MMIOPMIOIspci访问PCI设备配置空间中的Memory空间和IO空间MMIOPMIO QQM&#xff08;qemu object model&#xff09;简洁概要将 TypeInfo 注册 TypeImpl&#xff1a;ObjectClass的初始化&…
阅读更多...
本地下载预训练模型(涉及内容：Resnet等预训练模型地址，以resnet34为例下载预训练模型并移动到指定地址)

本地下载预训练模型(涉及内容：Resnet等预训练模型地址，以resnet34为例下载预训练模型并移动到指定地址)

运行如下命令&#xff1a; finetune_net.features torchvision.models.resnet34(pretrainedTrue)一直报错。 离线下载模型的预训练模型地址 复制需要下载的模型地址&#xff0c;粘贴到浏览器地址栏中下载&#xff0c;各种模型的下载地址如下&#xff1a; 1. Resnet:model_…
阅读更多...
SAS聚类分析介绍

SAS聚类分析介绍

1 聚类分析介绍 1.1基本概念 聚类就是一种寻找数据之间一种内在结构的技术。聚类把全体数据实例组织成一些相似组&#xff0c;而这些相似组被称作聚类。处于相同聚类中的数据实例彼此相同&#xff0c;处于不同聚类中的实例彼此不同。聚类技术通常又被称为无监督学习&#xff0…
阅读更多...
深入了解Vue.js：构建现代、响应式的前端应用

深入了解Vue.js：构建现代、响应式的前端应用

文章目录 1. Vue.js简介1.1 安装Vue.js 2. Vue的核心概念2.1 数据驱动2.2 组件化2.3 生命周期钩子 3. Vue的特性3.1 响应式数据3.2 模板语法3.3 组件通信 4. 示例项目结语 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1…
阅读更多...
Jmeter性能测试 —— 压力模式

Jmeter性能测试 —— 压力模式

压力模式 性能测试中的压力模式有两种。 第一种是并发用户模式&#xff08;虚拟用户模式&#xff09;并发用户是指虚拟并发用户数&#xff0c;从业务角度&#xff0c;也可以理解为同时在线的用户数。 从客户端的角度出发&#xff0c;摸底业务系统各节点能同时承载的在线用户数…
阅读更多...
pytorch中Conv1d、Conv2d与Conv3d详解

pytorch中Conv1d、Conv2d与Conv3d详解

1 卷积介绍 1.1 什么是卷积 卷积&#xff08;convolution&#xff09;&#xff0c;是一种运算&#xff0c;你可以类比于加&#xff0c;减&#xff0c;乘&#xff0c;除&#xff0c;矩阵的点乘与叉乘等等&#xff0c;它有自己的运算规则&#xff0c;卷积的符号是星号*。表达式…
阅读更多...
【影刀_客服场景培训知识点总结】

【影刀_客服场景培训知识点总结】

客服相关知识介绍&#xff1a; 1.批量发消息场景&#xff0c;影刀的优势有哪些&#xff08;&#xff09; 支持转接人工支持各类IM工具发消息支持发不同消息支持自动回复 2.相比晓多/乐言机器人&#xff0c;影刀的核心优势&#xff08;&#xff09; 更快发送的速度自动回复可…
阅读更多...
Linux Makefile的认识及CMake的使用

Linux Makefile的认识及CMake的使用

1 Makefile的作用 Makefile 指的是一个叫 Makefile 的文件，里面提前写了一些指令。每次要自动化的完成一个比较复杂项目的自动编译用的时候，就在命令行输入“make”命令Makefile使用。使用Makefile可以 “智能” 的知道： 1 哪些文件需要先进行编译。 2 当某一文件在某次mak…
阅读更多...
Blast中文手册(4)

Blast中文手册(4)

Extracting data from BLAST databases with blastdbcmd(用blastdbcmd从BLAST数据库中提取数据) Created: June 23, 2008; Updated: January 7, 2021. Extract lowercase masked FASTA from a BLAST database with masking information(从具有掩码信息的BLAST数据库中提取小写掩…
阅读更多...
知识管理平台Confluence：win10安装confluence

知识管理平台Confluence：win10安装confluence

文章目录 介绍主要功能 安装教程安装java运行平台JRE安装数据库Postgresql在Postgresql创建confluence使用的数据库创建数据库用户创建数据库 安装confluence注册confluence启动confluence 参考链接 介绍 Confluence 是由澳大利亚软件公司 Atlassian 开发的企业协作平台。它提…
阅读更多...
2023.11.27 关于 Mybatis 增删改操作

2023.11.27 关于 Mybatis 增删改操作

目录 引言 增加用户操作 删除用户操作 修改用户操作 阅读下述文章之间 建议点击下方链接先了解 MyBatis 的创建与使用 MyBatis 的创建与使用 建议点击下方链接先了解 单元测试 的创建与使用 Spring Boot 单元测试的创建与使用 引言 为了方便下文实现增、删、改操作我们先…
阅读更多...
最新文章

Copyright @ 2022~2023