HarmonyOS鸿蒙Next中实现图片添加贴纸示例代码

HarmonyOS鸿蒙Next中实现图片添加贴纸示例代码

介绍

本示例基于PanGesture（手势处理）实现了图片添加贴图，并通过手势更新贴图位置的功能。

实现图片贴纸源码链接

效果预览

图片名称

使用说明

进入应用会立马出现图片，屏幕下为提供的贴图。点击贴图，贴图添加到图片中，可点击贴图移动位置。

实现思路

贴图组件

贴图展示，通过手势更新图片位置。核心代码如下：

build() {
 Column() {
   Image(this.item.img).objectFit(ImageFit.None)
 }
.width('200vp')
  .height('200vp')
  .border({ width: '1vp', color: 'black' })
  .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
  .gesture(
    PanGesture()
      .onActionStart((event: GestureEvent | undefined) => {
        console.info('Pan start');
      })
      .onActionUpdate((event: GestureEvent | undefined) => {
        if (event) {
          this.offsetX = this.item.positionX + event.offsetX;
          this.offsetY = this.item.positionY + event.offsetY;
          console.info(`move:${event.offsetX}---${event.offsetY}`)
        }
      })
      .onActionEnd(() => {
        this.item.positionX = this.offsetX
        this.item.positionY = this.offsetY
      })
  )
}

更多关于HarmonyOS鸿蒙Next中实现图片添加贴纸示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中实现图片添加贴纸的功能，可以通过以下示例代码实现。该代码展示了如何加载图片、添加贴纸，并保存最终结果。

import image from '@ohos.multimedia.image';
import fileIo from '@ohos.fileio';

// 加载原始图片
let imageSource = image.createImageSource("file:///path/to/original/image.jpg");
let imagePixelMap = imageSource.createPixelMap();

// 加载贴纸图片
let stickerSource = image.createImageSource("file:///path/to/sticker.png");
let stickerPixelMap = stickerSource.createPixelMap();

// 创建画布并绘制原始图片
let canvas = image.createCanvas(imagePixelMap.width, imagePixelMap.height);
canvas.drawImage(imagePixelMap, 0, 0);

// 在指定位置绘制贴纸
canvas.drawImage(stickerPixelMap, 100, 100); // x, y 坐标根据需要调整

// 获取最终像素图
let finalPixelMap = canvas.getPixelMap();

// 保存最终图片
let filePath = "file:///path/to/save/final_image.jpg";
let file = fileIo.openSync(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.WRITE);
image.createImagePacker().packing(finalPixelMap, "image/jpeg").then((data) => {
    fileIo.writeSync(file.fd, data);
    fileIo.closeSync(file.fd);
});

此代码通过@ohos.multimedia.image模块加载图片和贴纸，使用画布进行绘制，并最终保存为新的图片文件。

更多关于HarmonyOS鸿蒙Next中实现图片添加贴纸示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过Image和Canvas组件实现图片添加贴纸的功能。以下是一个简单的示例代码：

// 创建Image组件
Image image = new Image(context);
image.setPixelMap(ResourceTable.Media_background); // 设置背景图片

// 创建Canvas组件
Canvas canvas = new Canvas(context);
canvas.drawImage(image, 0, 0, null); // 绘制背景图片

// 加载贴纸图片
PixelMap sticker = ImageSource.create(ResourceTable.Media_sticker, null).createPixelmap();

// 在指定位置绘制贴纸
canvas.drawImage(sticker, 100, 100, null); // (100, 100)为贴纸位置

// 将Canvas绘制的内容显示在界面上
Image resultImage = new Image(context);
resultImage.setPixelMap(canvas.getPixelMap());

此代码展示了如何在背景图片上添加贴纸，并将结果显示在界面上。

回到顶部