[威廉希尔官方网站讨论]

【RISC-V 生态软件系列】 HaaS UI进阶教学二：Canvas之显示二维码

2022-3-9 07:22:25 2545

0 名词解释 AliOS Things：阿里云智能IoT自研的物联网操作系统 HaaS：全称是硬件即服务，阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务 Haa：全称是 H 即服务用户界面，是语言硬件开发应用和 iOS 物联网操作系统上的一套图形解决方案二维码（本文主要二维码）上应用广泛的一种编码方式，是当前在特定方位上的特定维度的几何图形，是方向上特定的方位上的几何图形（二维）分布的、黑白相间的、记录数据符号信息的图形。二维码.js 在前端领域，有很多支持显示二维码的开源库，而 QRCode.js 是其中一个比较实用简单的库，github地址：https ://github.com/davidshimjs/qrcodejs QRCode.js支持使用svg或者canvas来创建二维码，使用起来也非常方便： // "qrcode"组件可以是svg或者canvas var qrcode = new QRCode(document.getElementById("qrcode"), { text: "123456", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", 正确级别: QRCode.CorrectLevel.H }); // 或者 qrcode.clear(); // 清除代码。 qrcode.makeCode("abcdef"); // 制作另一个代码。在HaaS UI上运行QRCode.js 因为HaaS UI支持了canvas组件，所以移植QRCode.js是非常容易的（其他二维码库，如果支持canvas渲染，也是非常容易移植的）。移植QRCode.js 移植QRCode.js的基本思路很简单：删除不支持的svg相关逻辑将不会触及的画布操作(qrcode.js)会调用一些浏览器支持的api)调整一下 canvas.getContext('2d')修改为createCanvasContext(canvas)（HaaS UI中使用createCanvasContext方法获取canvas时间） canvas宽组件高度不支持动态设置(canvas.width=width)，由组件初始化时设置此时，使用修改后的 qrcode.js 已经可以在 HaaS UI 中显示二维码了组件化在移植好的QRCode.js中，已经可以在页面中引入并生成二维码。为了更方便使用，可以通过之前介绍的自定义组件的方法封装一个二维码组件。 <模板> 然后在页面或者组件中使用qrcode组件：文章转载自：平头哥芯片开放社区作者：sucool 0
2022-3-9 07:22:25　　评论淘帖0 举报相关推荐 • 【RISC-V 生态软件系列】 HaaS UI进阶教学三：Canvas之动画实践 3301 • 【RISC-V 生态软件系列】HaaS UI进阶教学之HaaSUI系统框架扩展JSAPI之异步操作及调度 2720 • 【RISC-V 生态软件系列】 HaaS UI基础教学十：JSAPI之IoT平台连接 2220 • 【RISC-V 生态软件系列】 HaaS UI基础教学九：JSAPI之应用包管理 1834 • 【RISC-V 生态软件系列】 HaaS UI基础教学三：JSAPI之页面导航 2547 • 【RISC-V 生态软件系列】 HaaS UI基础教学二：第一个UI页面搭建 2856 • 【RISC-V 生态软件系列】 HaaS UI基础教学八：JSAPI自动化测试方法 3732 • 【RISC-V 生态软件系列】 HaaS UI基础教学一：快速开始 4167 • 二维码软件中制作Dot Code二维码的步骤 2884 • 【RISC-V 生态软件系列】HaaS UI进阶教学五：使用QuickJS原生方式扩展JSAPI（一）添加JSAPI模块 2624