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

前言

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

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

使用 canvas 的 drawImage 描绘图片

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

1. 创建渲染上下文

   • 通过RenderingContextSettings配置抗锯齿属性（true表示启用）
   • 初始化CanvasRenderingContext2D对象，作为2D绘图的入口

2. 加载图片资源

   • 使用ImageBitmap全局类加载本地图片资源（"images/1.jpg"）
   • 创建位图对象后可直接用于Canvas绘制，相比Image组件更适用于像素级操作

3. 构建UI布局

   • 通过Column容器创建垂直布局
   • 设置Canvas组件尺寸为100%宽度+固定高度，背景色为浅灰色
   • 使用.onReady生命周期回调确保Canvas初始化完成后执行绘制操作

4. 执行绘制操作

   • 基础绘制：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)

示例代码

@Entry
@Component
struct CanvasDrawImageExample {![](https://communityfile-drcn.op.hicloud.com/FileServer/getFile/cmtybbstemp/20250922/cmtybbs/122/927/098/0300086000122927098.20250922181010.05032771428854800800120119378265:20250922191010:2800:A824E9E5F8D4F9ECC3A747536E652694491437D6DE66EC86C2B6D85002DB3F6B.png)
  // 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上的自定义绘制，支持图片缩放/位置控制。 主要逻辑：

1. 模块导入

   • 通过@kit.ImageKit引入鸿蒙系统的图像处理能力，用于操作PixelMap像素数据。

2. 组件定义

   • 使用@Entry标记为应用入口组件，@Component声明为自定义组件。
   • 创建CanvasRenderingContext2D渲染上下文，配置抗锯齿（RenderingContextSettings(true)）。

3. 资源预加载

   • 在 aboutToAppear

     生命周期中：

     • 调用image.createImageSource创建图片源（沙箱路径需替换为实际地址）。
     • 通过createPixelMap()异步生成像素数据，赋值给pixelMap变量。

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

以往文章

• 我的iMaHarmonyOS 知识库接入 鸿蒙6 API20 新特性了

  https://mp.weixin.qq.com/s/YsbFQyi5PsndpRUaA9h_dA?token=830743671&lang=zh_CN

• 鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总

  https://mp.weixin.qq.com/s/ERmgSAIT8B8njFqtyPx9IQ

• 可可图片编辑 HarmonyOS（4）图片裁剪-canvas

  https://mp.weixin.qq.com/s/2M3f_LNnt0YRo0qEnCnqpA

• 可可图片编辑 HarmonyOS（3）应用间分享图片

  https://mp.weixin.qq.com/s/n8kkdougB4lqDHjYC7co8g

近期活动

最近想要想要考取 HarmonyOS 基础或者高级证书，或者快要获取的同学都可以点击这个链接，加入我的班级，考取成功有机会获得鸿蒙礼盒一份。

https://developer.huawei.com/consumer/cn/training/classDetail/7e230b074eaa41c587c71c1d1a9a6514?type=1%3Fha_source%3Dhmosclass&ha_sourceId=89000248

联系我

可以加我微信，带你了解更多HarmonyOS相关的资讯。