HarmonyOS 鸿蒙Next Image组件放大拖动图片

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Image组件放大拖动图片

Image 目前通过scale属性放大图片后 想要实现单指拖动查看图片功能 如何实现



关于HarmonyOS 鸿蒙Next Image组件放大拖动图片的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。

3 回复

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

你好，鸿蒙开发者同僚

上面那位老师，提供的实现很详细，我这边也提供一种视角，希望有所帮助有所启发

要在鸿蒙OS的ArkUI框架中实现单指拖动查看图片的功能，可以按照以下步骤进行：

1.使用Image组件加载图片：

  • 确保使用Image组件来加载图片。

2.设置图片的aspectRatio属性：

  • 设置图片的aspectRatio属性，以便在图片被放大或缩小时保持宽高比不变。

3.应用transform属性进行缩放：

  • 使用transform属性来缩放图片。可以通过scale属性实现放大或缩小的效果。

4.监听手势事件：

  • 使用on方法为图片组件监听手势事件，特别是单指拖动事件。

5.处理手势事件：

  • 在手势事件的回调函数中，处理用户的单指拖动动作，并根据拖动手势的位置调整图片的显示内容。

具体步骤如下：

  • 确保图片组件的aspectRatio属性设置为图片的宽高比。

  • 使用transform属性的scale方法来放大或缩小图片。

  • 使用on方法监听单指拖动事件，并在回调函数中处理手势移动事件，更新图片的显示内容。

图片手势捏合的可以参考这个：https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/imageviewer/README.md

实现思路：

  1. 使用matrix实现图片的缩放。详情见ImageItemView.ets。 
    [@State](/user/State) matrix: matrix4.Matrix4Transit = matrix4.identity().copy();
Image(this.imagePixelMap)
    .transform(this.matrix)
  2. 使用offset属性对图片进行偏移。详情见ImageItemView.ets。 
    [@State](/user/State) imageOffsetInfo: OffsetModel = new OffsetModel(0, 0);
Image(this.imagePixelMap)
    .offset({
        x: this.imageOffsetInfo.currentX,
        y: this.imageOffsetInfo.currentY
    })
  3. Image的objectFit属性设置为Cover，锁定图片宽高比，并使其能够超出父组件边界显示。详情见ImageItemView.ets。 
    Image(this.imagePixelMap)
    .objectFit(ImageFit.Cover)
  4. 提前计算图片信息，并通过Image的宽或高配合aspectRatio设置默认尺寸。详情见ImageItemView.ets。 
    initCurrentImageInfo(): void {
    this.matrix = matrix4.identity().copy();
    const imageSource: image.ImageSource = image.createImageSource(this.imageUri);
    imageSource.getImageInfo(0).then((data: image.ImageInfo) => {
        this.imageWHRatio = data.size.width / data.size.height;
        this.imageDefaultSize = this.calcImageDefaultSize(this.imageWHRatio, windowSizeManager.get());
        if (this.imageDefaultSize.width === windowSizeManager.get().width) {
            this.fitWH = "width";
        } else {
            this.fitWH = "height";
        }
        this.imageScaleInfo.maxScaleValue += this.fitWH === "width" ? 
            (windowSizeManager.get().height / this.imageDefaultSize.height) : 
            (windowSizeManager.get().width / this.imageDefaultSize.width);
    }).catch((err: BusinessError) => {
        console.error(`[error][getImageInfo]${err.message}`);
    });
    imageSource.createPixelMap().then((data: image.PixelMap) => {
        this.imagePixelMap = data;
    }).catch((err: BusinessError) => {
        console.error(`[error][createPixelMap]${err.message}`);
    });
}

    Image(this.imagePixelMap)
.width(this.fitWH === “width” ? $r(“app.string.image_default_width”) : undefined)
.height(this.fitWH === “height” ? $r(“app.string.image_default_height”) : undefined)
.aspectRatio(this.imageWHRatio)

回到顶部