mini_canvas(API12 - 5.0.3.800)

mini_canvas 是一款极为简单易用的绘制类组件 MiniCanvas，它仅需一行代码即可轻松实现 线条、圆形、圆环、椭圆、矩形、文本 和 图片 等各种形状的绘制。

安装

ohpm i @nutpi/mini_canvas

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

使用

绘制线条

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

@Entry
@ComponentV2
struct attributeDemo {

  build() {
    Column() {
      MiniCanvas({
        onDraw: (canvas: ICanvas) => {
          // 创建画笔
          let paint = new Paint()
          // 绘制默认线条
          canvas.drawLine(10, 10, 180, 10, paint)

          // 设置线条粗细
          paint.setStrokeWidth(10)
          // 设置线条颜色
          paint.setColor("#ff0000")
          // 绘制线条
          canvas.drawLine(30, 30, 180, 60, paint)
        }
      })
    }
    .width('100%')
    .height("100%")
  }
}

样例运行结果如下图所示：

绘制圆形/圆环

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

@Entry
@ComponentV2
struct attributeDemo {

  build() {
    Column() {
      MiniCanvas({
        onDraw: (canvas: ICanvas) => {
          // 创建画笔
          let paint = new Paint()
          // 绘制默认圆形
          canvas.drawCircle(80, 80, 30, paint)

          // 设置圆形颜色
          paint.setColor("#ff0000")
          // 绘制红色圆形
          canvas.drawCircle(150, 80, 30, paint)

          // 绘制圆环
          paint.setStroke(true)
          canvas.drawCircle(220, 80, 30, paint)

          paint.setStrokeWidth(10)
          canvas.drawCircle(300, 80, 30, paint)
        }
      })
    }
    .width('100%')
    .height("100%")
  }
}

样例运行结果如下图所示：

绘制矩形/矩形框

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

@Entry
@ComponentV2
struct attributeDemo {

  build() {
    Column() {
      MiniCanvas({
        onDraw: (canvas: ICanvas) => {
          // 创建画笔
          let paint = new Paint()
          // 绘制默认矩形
          canvas.drawRect(10, 10, 110, 40, paint)

          // 绘制红色矩形
          paint.setColor("#ff0000")
          canvas.drawRect(150, 10, 110, 40, paint)

          // 绘制红色矩形框
          paint.setStroke(true)
          canvas.drawRect(10, 70, 110, 40, paint)

          // 设置边框大小
          paint.setStrokeWidth(10)
          canvas.drawRect(160, 70, 110, 40, paint)
        }
      })
    }
    .width('100%')
    .height("100%")
  }
}

样例运行结果如下图所示：

绘制文本

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

@Entry
@ComponentV2
struct attributeDemo {

  build() {
    Column() {
      MiniCanvas({
        onDraw: (canvas: ICanvas) => {
          // 创建画笔
          let paint = new Paint()
          // 绘制文本
          canvas.drawText("OpenHarmony", 10, 10, paint)

          // 设置字体颜色
          paint.setColor("#ff0000")
          canvas.drawText("OpenHarmony", 180, 10, paint)

          // 设置字体大小
          paint.setFontSize(vp2px(30))
          canvas.drawText("OpenHarmony", 10, 50, paint)

        }
      })
    }
    .width('100%')
    .height("100%")
  }
}

样例运行结果如下图所示：

绘制图片

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

@Entry
@ComponentV2
struct attributeDemo {

  build() {
    Column() {
      MiniCanvas({
        onDraw: (canvas: ICanvas) => {
          // 创建画笔
          let paint = new Paint()

          // 绘制图片
          let bitmap = new ImageBitmap("pages/test.jpg")
          canvas.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height, 0, 0, 400, 200, paint)
        }
      })
    }
    .width('100%')
    .height("100%")
  }
}

样例运行结果如下图所示：

反馈

使用过程中发现任何问题都可以提 Issue 给我们；当然，我们也非常欢迎你给我们发 PR 。

QQ交流群

695438501

LICENSE

本项目基于 Apache License 2.0 ，在拷贝和借鉴代码时，请大家务必注明出处。

arkui/MiniCanvas

mini_canvas(API12 - 5.0.3.800)

安装

使用

反馈

QQ交流群

LICENSE

简介

发行版 (3)

贡献者

近期动态

arkui/MiniCanvas .gitee-modal { width: 500px !important; }

mini_canvas(API12 - 5.0.3.800)

安装

使用

反馈

QQ交流群

LICENSE

简介

发行版 (3)

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

arkui/MiniCanvas