subsampling-scale-image-view

ohpm install @ohos/subsampling-scale-image-view 

import {SubsamplingScaleImageView} from '@ohos/subsampling-scale-image-view';
...
//创建model对象
@State model: SubsamplingScaleImageView.Model  = new SubsamplingScaleImageView.Model()
...
build() {
  Stack({ alignContent: Alignment.Bottom }) {
   //使用SubsamplingScaleImageView组件
   SubsamplingScaleImageView({ model: this.model })
   Column({ space: 5 }) {
     Swiper(this.swiperController) {
       Row({ space: 5 }) {
         Text('This image is 7,800 x 6,240 pixels. On most devices it will be subsampled, and higher quality tiles are loaded as you zoom in.')
           .width('100%')
           .height(60)
           .layoutWeight(1)
           .fontColor(0xffffff)
           .textAlign(TextAlign.Center)
           .fontSize(16)
         Image($r('app.media.next'))
           .width(30)
           .height(30)
           .margin({ top: 6, left: 10 })
           .onClick((event: ClickEvent) => {
             this.index = 1;

           })
       }.width('100%').height(60).backgroundColor(0x3d3d3d)

       Row({ space: 5 }) {
         Image($r('app.media.previous')).width(30).height(30).margin({ top: 6 }).onClick((event: ClickEvent) => {
           this.index = 0;
         })
         Text('This image has been rotated 90 degrees. Tap the button to rotate it. EXIF rotation is supported for external files.')
           .width('100%')
           .height(60)
           .layoutWeight(1)
           .fontColor(0xffffff)
           .textAlign(TextAlign.Center)
           .fontSize(16)
         Image($r('app.media.rotate'))
           .width(30)
           .height(30)
           .margin({ top: 6, left: 10, right: 20 })
           .onClick((event: ClickEvent) => {
             this.mRotate += 90;
             this.model.setOrientation(this.mRotate)
           })
       }.width('100%').height(60).backgroundColor(0x3d3d3d)

     }
     .index(this.index)
     .autoPlay(false)
     .indicator(false) // 默认开启指示点
     .loop(false) // 默认开启循环播放
     .duration(50)
     .vertical(false) // 默认横向切换
     .itemSpace(0)
     .onChange((index: number) => {
       if (index == 1) {
         
         this.model.setImage($r('app.media.swissroad'));
       }
     })
   }.height(60).backgroundColor(0x3d3d3d).align(Alignment.Bottom)
 }
}
//设置图片源
aboutToAppear() {
 this.model.setImage($r('app.media.card'));
}
...

|---- subsampling-scale-image-view 
    |---- entry # 示例代码文件夹      
    |---- library  
    |     |---- src
    |          |---- main
    |                |---- ets          
    |                      |---- components  # 库文件夹               
    |                           |---- SubsamplingScaleImageView.ets  # 自定义组件
    |                           |---- ImageViewState.ets  # 组件状态数据封装类  
    |     |---- index.ets  # 对外接口              
    |     |---- README.md  # 安装使用方法