mini_canvas三方库发布

徐建国

发布于 2025-02-04 14:11:27

9400

代码可运行

文章被收录于专栏：个人路线个人路线

运行总次数：0

代码可运行

mini_canvas

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

安装

ohpm i @nutpi/mini_canvas

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

使用

绘制线条

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

0100

绘制圆形/圆环

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

0100

绘制矩形/矩形框

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

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

0100

绘制文本

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

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

0100

绘制图片

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

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