如何通过OpenHarmony的Cavas组件实现相应的绘制能力。

介绍

基于OpenHarmony的Cavas组件封装了一版极简操作的MiniCanvas，屏蔽了原有Canvas内部复杂的调用流程，支持一个API就可以实现相应的绘制能力，该库还在继续完善中，也欢迎PR。

使用说明

1. 添加MiniCanvas依赖

   在项目entry目录执行如下命令安装MiniCanvas库：

   npm install git+https://gitee.com/ark-ui/MiniCanvas.git

2. 引入MiniCanvas

   import { MiniCanvas, Paint, ICanvas } from '@ohos/mini_canvas'

3. 使用MiniCanvas

   @Entry @Component struct TestMiniCanvas {
     build() {
       Column() {
         MiniCanvas({
           onDraw: (canvas) => {
             
           }
         })
       }
       .size({width: "100%", height: "100%"})
     }
   }

4. 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%"})
     }
   }

5. 运行结果

   

最后

随着鸿蒙开发越来越火热，我了解到现在有很多小伙伴想入行鸿蒙，但又不知道学习哪些鸿蒙开发技术？所以我给大家整理了一份鸿蒙Next全套VIP学习资料

资料包含了：【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

有需要的小伙伴自行领取：获取完整版方式请点击→《 鸿蒙Next全套VIP学习资料》

1.鸿蒙核心技术学习路线

​

2.大厂面试必问面试题

​

3.鸿蒙南向开发技术

​

 4.鸿蒙APP开发必备

​

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开发白皮书V2.0PDF

​

这份全套完整版的学习资料已经全部打包好，朋友们如果需要可以点击→鸿蒙Next全套VIP学习资料：免费领取（安全链接，放心点击）