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

可可图片编辑 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 {// 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并获取PixelMaplet 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)}
}