HarmonyOS鸿蒙Next中实现图片视频预览功能示例代码

HarmonyOS鸿蒙Next中实现图片视频预览功能示例代码介绍
本示例基于组合手势实现图片视频的预览功能，支持双击缩放图片，双指缩放图片，拖动图片以及点击视频进行预览。

效果预览

使用说明
进入应用点击消息列表的图片可对图片进行缩放、拖动查看操作，点击视频可预览视频。

实现思路

预览图片

通过设定手势事件PanGesture触发滑动的手指数、滑动距离以及手势识别的回调事件，实现双击缩放以及双指缩放图片功能。核心代码如下，源码参考ImagePreview.ets

_PinchGesture({ fingers: 2, distance: 1 })  
    .onActionStart((e) => {  
      this.defaultScale = this.activeImage.scale  
    })  
    .onActionUpdate((e) => {  
      let scale = e.scale * this.defaultScale  
      if (scale <= 4 && scale >= 1) {  
        this.activeImage.offsetX = this.activeImage.offsetX / (this.activeImage.scale - 1) * (scale - 1) || 0  
        this.activeImage.offsetY = this.activeImage.offsetY / (this.activeImage.scale - 1) * (scale - 1) || 0  
        this.activeImage.scale = scale  
      }  
      this.disabledSwipe = this.activeImage.scale > 1  
    })  
    .onActionEnd((e) => {  
      this.disabledSwipe = this.activeImage.scale > 1  
    })  
    .onActionCancel(() => {  
      this.disabledSwipe = this.activeImage.scale > 1  
    })

预览视频

通过VideoController对象控制预览视频的播放和暂停。核心代码如下，源码参考ImagePreview.ets

_OverlayNode() {  
    Image(this.isPlay ? $r('app.media.ic_play') : $r('app.media.ic_pause'))  
      .zIndex(8)  
      .width('10%')  
      .height('10%')  
      .position({ left: '50%', top: '50%' })  
      .translate({ x: '-50%', y: '-50%' })  
      .visibility(this.progressState[this.indexChange].ifLoad ? Visibility.Visible : Visibility.None)  
      .onClick(() => {  
        if (this.isPlay) {  
          this.controller.start()  
        } else {  
          this.controller.pause()  
        }  
        this.isPlay = !this.isPlay  
      })  
  }

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

nodeper 1楼•7 天前

在HarmonyOS鸿蒙Next中实现图片视频预览功能，可以使用Image和Video组件来实现。以下是示例代码：

import image from '@ohos.multimedia.image';
import video from '@ohos.multimedia.video';

@Entry
@Component
struct MediaPreview {
  private imageSource: image.ImageSource = image.createImageSource("file:///path/to/image.jpg");
  private videoSource: video.VideoSource = video.createVideoSource("file:///path/to/video.mp4");

  build() {
    Column() {
      Image(this.imageSource)
        .width(200)
        .height(200)
        .onClick(() => {
          // 点击图片时进行预览
          this.previewImage();
        });

      Video(this.videoSource)
        .width(300)
        .height(200)
        .controls(true)
        .onClick(() => {
          // 点击视频时进行预览
          this.previewVideo();
        });
    }
  }

  private previewImage() {
    // 图片预览逻辑
    // 使用系统提供的图片预览接口
    image.previewImage(this.imageSource);
  }

  private previewVideo() {
    // 视频预览逻辑
    // 使用系统提供的视频预览接口
    video.previewVideo(this.videoSource);
  }
}

在这段代码中，Image组件用于显示图片，Video组件用于播放视频。点击图片或视频时，分别调用previewImage和previewVideo方法进行预览。图片预览使用image.previewImage接口，视频预览使用video.previewVideo接口。

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

htzhanglong 2楼•7 天前

在HarmonyOS鸿蒙Next中，可以通过Image和Video组件实现图片和视频的预览功能。以下是一个简单的示例代码：

import image from '@ohos.multimedia.image';
import media from '@ohos.multimedia.media';

// 图片预览
let imageSrc = 'resources/example.jpg';
Image(imageSrc)
  .width('100%')
  .height('100%')
  .onClick(() => {
    console.log('图片被点击');
  });

// 视频预览
let videoSrc = 'resources/example.mp4';
Video({
  src: videoSrc,
  controller: new media.VideoController()
})
  .width('100%')
  .height('100%')
  .onClick(() => {
    console.log('视频被点击');
  });