鸿蒙OpenHarmony实战开发-MiniCanvas

介绍

基于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%"})
  }
}

运行结果

参与贡献

1. Fork 本仓库
2. 新建 xxx 分支
3. 提交代码
4. 新建 Pull Request

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG