介绍
基于OpenHarmony的Cavas组件封装了一版极简操作的MiniCanvas,屏蔽了原有Canvas内部复杂的调用流程,支持一个API就可以实现相应的绘制能力,该库还在继续完善中,也欢迎PR。
使用说明
- 添加MiniCanvas依赖
在项目entry
目录执行如下命令安装MiniCanvas
库:npm install git+https://gitee.com/ark-ui/MiniCanvas.git
- 引入MiniCanvas
import { MiniCanvas, Paint, ICanvas } from '@ohos/mini_canvas'
- 使用MiniCanvas
@Entry @Component struct TestMiniCanvas { build() { Column() { MiniCanvas({ onDraw: (canvas) = > { } }) } .size({width: "100%", height: "100%"}) } }
- MiniCanvas绘制
更多鸿蒙学习知识,可+mau123789,记住是v喔
// import { MiniCanvas, Paint, ICanvas } from '@ohos/mini_canvas' // 源码方式引入 import { MiniCanvas, Paint } from "./mini_canvas" @Entry @Component struct TestMiniCanvas { build() { Column() { MiniCanvas({ // 在onDraw()方法内执行绘制 onDraw: (canvas) = > { // 创建画笔 let paint = new Paint() // 绘制直线 paint.setColor("#FF0000"); paint.setStrokeWidth(5); canvas.drawLine(10, 10, 280, 10, paint); // 绘制圆以及圆环 canvas.drawCircle(50, 50, 25, paint); paint.setStroke(true); paint.setStrokeWidth(3); canvas.drawCircle(250, 50, 25, paint); // 绘制椭圆以及椭圆环 paint.setStroke(false); canvas.drawOval(20, 100, 150, 50, paint) paint.setStroke(true); paint.setColor(Color.Pink.toString()) canvas.drawOval(190, 100, 150, 50, paint) // 绘制矩形 paint.setStroke(false) canvas.drawRect(20, 180, 150, 50, paint) paint.setStroke(true) paint.setStrokeWidth(5) canvas.drawRect(190, 180, 150, 50, paint) // 绘制圆角矩形 paint.setStroke(false); canvas.drawRoundRect(20, 250, 150, 50, 10, paint) paint.setStroke(true); canvas.drawRoundRect(190, 250, 150, 50, 10, paint) // 绘制圆弧 canvas.drawArc(80, 330, 40, 0, 135, paint); paint.setStroke(false); canvas.drawArc(250, 330, 40, 0, 135, paint); // 绘制图片 let bitmap = new ImageBitmap("pages/test.jpg") canvas.drawImage(bitmap, 10, 10, 800, 600, 20, 400, 320, 160, paint) }, // 设置画布的属性 attribute: { id: "mini_canvas", width: "100%", height: "100%", background: "#ffffff", clickListener: (event) = > { console.log("onClicked: " + JSON.stringify(event)); }, touchListener: (event) = > { console.log("onTouched: " + JSON.stringify(event)); } }, }) } .size({width: "100%", height: "100%"}) } }
审核编辑 黄宇
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
-
组件
+关注
关注
1文章
336浏览量
17584 -
鸿蒙
+关注
关注
55文章
1629浏览量
42120 -
OpenHarmony
+关注
关注
23文章
3297浏览量
15159
发布评论请先 登录
相关推荐
鸿蒙OS南向开发实战:【智能电子牌】
本Demo是基于hi3516dv300开发板,使用开源鸿蒙OpenHarmony 开发的应用。通过该应用不仅可以查看时间、日期以及对应的室内外温湿度、空气质量等,还可以查看当日的行程,
鸿蒙开发实战:【Hdf Framework】
该仓主要存放OpenHarmony驱动子系统核心源码信息(包括驱动框架、配置管理、配置解析、驱动通用框架模型、硬件通用平台能力接口等),旨在为开发者提供更精准、更高效的开发环境,力求做到一次开
【OpenHarmony鸿蒙实战】在RK3399开发板实现智能门禁人脸识别
基于RK3399开发板,使用OpenHarmony3.0-LTS开发的应用。通过定时获取摄像头数据,实现人脸识别比对等功能。
深圳市24年,实现鸿蒙原生应用数占全国总量10%以上
、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点
高清完整版与笔记请加→mau123789是卫呀
针对鸿蒙
发表于 03-04 21:42
鸿蒙开发实战项目:录音变声应用
手机端的应用,适用于OpenHarmony3.1_release版本,使用AudioCapturer提供的JS接口对音频进行采集,并进行变声处理;
样例效果
首先开发设置音频加速或者减速,如果
发表于 03-01 17:24
鸿蒙不再兼容安卓,那么鸿蒙开发者是否会大增?
。以上为略缩版图册,如果需要高清完整的可以在主页4或https://qr23.cn/AKFP8k保存。
内容涵盖:(文档形式)
OpenHarmony入门基础
OpenHarmony核心技能
OpenHarmony高级技能
发表于 01-31 22:17
鸿蒙next开发-OpenHarmony的NDK开发
Native API是OpenHarmony SDK上提供的一组native开发接口与工具集合(也称为NDK),方便开发者使用C或者C++语言实现应用的关键功能。
鸿蒙开发OpenHarmony组件复用案例
)
}
}, item => item)
}
}
}
本文主要是对鸿蒙开发基础当中的OpenHarmony技术组件复用示例, 更多鸿蒙开发
发表于 01-15 17:37
科通技术推出首款基于OpenHarmony开发的智能BMS电池管理系统
据硬蛋创新(原“科通芯城”)介绍,集团旗下服务于芯片产业的技术服务公司科通技术推出首款基于 OpenHarmony 开源鸿蒙开发的智能BMS电池管理系统,进一步加强集团业务与 OpenHarm
OpenHarmony 应用开发SDK、API 与基础工具
一、整体说明
ArkTS 语言是鸿蒙系统主推的应用开发语言。因此鸿蒙系统提供给开发者的 API 绝大部分也是 ArkTS 语言的。
鸿蒙系统
发表于 09-19 15:45
OpenHarmony轻量系统书籍推荐《OpenHarmony轻量设备开发理论与实战》
最近大家问的智能家居套件方面有没有可以参考的资料,这里给大家统一回复一下 推荐大家可以看这本书 《OpenHarmony轻量设备开发理论与实战》 本书系统地讲授OpenHarmony
评论