可可图片编辑 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)

示例代码

使用 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左上角。

示例代码

近期活动

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