可可图片编辑 HarmonyOS（7）图片绘画原创精华

万少skr

发布于 2025-9-12 23:08

浏览

0收藏

可可图片编辑 HarmonyOS（7）图片绘画

前言

可可图片编辑实现在上传图片，然后在已有图片上绘画的功能。

该功能主要也是利用了canvas画布功能，把选择的图片转换成画布，然后在上面直接描绘。

可可图片编辑 HarmonyOS（7）图片绘画-鸿蒙开发者社区

使用 canvas 的 drawImage 描绘图片

演示如何通过CanvasRenderingContext2D的drawImage方法实现图片渲染及尺寸控制

创建渲染上下文
- 通过RenderingContextSettings配置抗锯齿属性（true表示启用）
- 初始化CanvasRenderingContext2D对象，作为2D绘图的入口
加载图片资源
- 使用ImageBitmap全局类加载本地图片资源（“images/1.jpg”）
- 创建位图对象后可直接用于Canvas绘制，相比Image组件更适用于像素级操作
构建UI布局
- 通过Column容器创建垂直布局
- 设置Canvas组件尺寸为100%宽度+固定高度，背景色为浅灰色
- 使用.onReady生命周期回调确保Canvas初始化完成后执行绘制操作
执行绘制操作
- 基础绘制：drawImage(this.img, 0, 0)将图片绘制在Canvas左上角（0,0）位置
- 缩放绘制：drawImage(this.img, 0, 150, 200, 150)
  
  指定绘制区域，实现：
  - 源图片按原始比例缩放至200x150像素
  - 绘制起点位于Canvas坐标(0,150)处
- 两种调用方式分别对应W3C标准的drawImage重载方法：
  - drawImage(image, dx, dy)
  - drawImage(image, dx, dy, dWidth, dHeight)

可可图片编辑 HarmonyOS（7）图片绘画-鸿蒙开发者社区

示例代码

@Entry
@Component
struct CanvasDrawImageExample {
  // 1. 创建Canvas渲染上下文
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  // 2. 创建图片对象 - 注意：ImageBitmap是全局类，不从image命名空间导出
  private img: ImageBitmap = new ImageBitmap("images/1.jpg"); //默认的图片

  build() {
    Column() {
      // 3. 创建Canvas组件
      Canvas(this.context)
        .width('100%')
        .height(400)
        .backgroundColor('#F1F3F5')
        .onReady(() => {
          // 4. 在Canvas准备就绪后绘制图片
          this.context.drawImage(this.img, 0, 0);
          this.context.drawImage(this.img, 0, 150, 200, 150);
        })
    }
    .width('100%')
    .padding(10)
  }
}

使用 canvas 使用 PixelMap 绘制图片

实现图片资源的异步加载与Canvas上的自定义绘制，支持图片缩放/位置控制。
主要逻辑：

模块导入
- 通过@kit.ImageKit引入鸿蒙系统的图像处理能力，用于操作PixelMap像素数据。
组件定义
- 使用@Entry标记为应用入口组件，@Component声明为自定义组件。
- 创建CanvasRenderingContext2D渲染上下文，配置抗锯齿（RenderingContextSettings(true)）。
资源预加载
- 在 aboutToAppear
  
  生命周期中：
  - 调用image.createImageSource创建图片源（沙箱路径需替换为实际地址）。
  - 通过createPixelMap()异步生成像素数据，赋值给pixelMap变量。
Canvas绘制
- 在build函数中构建UI，设置Canvas尺寸与背景色。
- 通过 onReady
  
  回调确保Canvas初始化完成后：
  - 检测pixelMap是否加载完成（避免空指针）。
  - 调用drawImage绘制图片，参数0,0,300,200表示将图片缩放至300x200尺寸并绘制到Canvas左上角。

示例代码

import { image } from '@kit.ImageKit';

@Entry
@Component
struct CanvasDrawPixelMapExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private pixelMap: image.PixelMap | undefined = undefined;

  // 组件初始化时加载图片
  aboutToAppear() {
    // 创建ImageSource并获取PixelMap
    let imageSource = image.createImageSource("沙箱图片地址");
    imageSource.createPixelMap().then((pixelMap) => {
      this.pixelMap = pixelMap;
    });
  }

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(400)
        .backgroundColor('#F1F3F5')
        .onReady(() => {
          // 检查pixelMap是否已加载
          if (this.pixelMap) {
            // 使用PixelMap绘制图片
            this.context.drawImage(this.pixelMap, 0, 0, 300, 200);
          }
        })
    }
    .width('100%')
    .padding(10)
  }
}