代码拉取完成,页面将自动刷新
基于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绘制
// 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. 开源生态
2. 协作、人、软件
3. 评估模型