# ohos_image_view_zoom

**Repository Path**: openharmony-sig/ohos_image_view_zoom

## Basic Information

- **Project Name**: ohos_image_view_zoom
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 35
- **Created**: 2022-04-16
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ImageViewZoom

## Overview

ImageViewZoom provides functions such as loading of resources or PixelMap images, setting of image display types, image zoom-in or zoom-out, pan, double-click to zoom in, listening for image size and resource changes, and clearing of displayed images.

## Display Effects

![avatar](screenshot/效果展示.gif)

## How to Install

```shell
ohpm install @ohos/imageviewzoom 
```

For details, see [Installing an OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md).

## How to Use

ets code dependency:

```
import {ImageViewTouchDate, ImageViewTouch, DisplayType} from "@ohos/imageviewzoom"
import {PixelMapUtils} from "./PixelMapUtils"
...
// Create a model object.
@State private model: ImageViewTouch.Model = new ImageViewTouch.Model();
...
// Use the ImageViewTouch component.
ImageViewTouch({ model: $model });
...
```

When using **ImageViewTouch** in the **Swiper** component, you need to call **gestureConversion** in **onAnimationEnd** of the **Swiper** component to adjust the gesture direction if an image is zoomed in and then switched. This helps avoid gesture competition in case the image index does not change.
```
 if (this.currentIndex == index && this.data[this.currentIndex].getScale() > 1) {
   this.data[this.currentIndex].gestureConversion(PanDirection.All, SwipeDirection.None)
 }
```

## Available APIs

1. Sets the image information.

   `public setImageSrc(src ?: Resource | PixelMap | string | null, matrix ?: object | null, minZoom ?: number, maxZoom ?: number): void` 
    The string type is added to the **src** parameter of the **setImageSrc** API.

2. Sets the default image display type.

   `public setDisplayType(type: DisplayType)`
   `public getDisplayType(): DisplayType`

   DisplayType.NONE: The image is not scaled by default.
   DisplayType.FIT_TO_SCREEN: The image will always be rendered using the boundaries of this view.
   DisplayType.FIT_IF_BIGGER: The image is scaled only when the image is greater than the boundary of the view.
   DisplayType.FIT_HEIGHT: The image will be scaled to fit the height of the device.
   DisplayType.FIT_WIDTH: The image will be scaled to fit the width of the device.

3. Clears the currently displayed image.

   `public dispose(): void`

4. Sets whether to support double-click.

   `public setDoubleTapEnabled(value: boolean): void`

5. Sets whether to support zoom-in or zoom-out.

   `public setScaleEnabled(value: boolean): void`

6. Sets whether to support scrolling.

   `public setScrollEnabled(value: boolean): void`

7. Sets the listener for image resource changes.

   `public setOnDrawableChangedListener(listener: OnDrawableChangeListener): void`

8. Sets the listener for image size changes.

   `public setOnLayoutChangeListener(listener: OnLayoutChangeListener): void`

9. Restores display.

   `public resetDisplay(): void`

10. Restores the view matrix.
   
   `public resetMatrix(): void`

11. Obtains the maximum image scale.
   
   `public getMaxScale(): number`

12. Obtains the minimum image scale.
   
   `public getMinScale(): number`

13. Sets the current view matrix.
   
   `public setImageMatrix(matrix: object): void`

14. Obtains the current view matrix.
   
   `public getImageViewMatrix(): object`

15. Prints matrix details.
   
   `public printMatrix(matrix: object): void`

16. Obtains the current view scale.

   `public getScale(): number`

17. Zooms to the target scale.

   `public zoomTo(scale: number, durationMs: number): void`

18. Sets whether to support double-click.
   
   `public setDoubleTapEnabled(value: boolean): void`

19. Sets whether to support zoom-in or zoom-out.

   `public setScaleEnabled(value: boolean): void`

20. Checks whether double-click is supported.
   
   `public getDoubleTapEnabled(): boolean`

21. Checks whether scrolling is supported.

   `public canScroll(): boolean`

22. Sets the listener for double-click events.

   `public setDoubleTapListener(listener: OnImageViewTouchDoubleTapListener): void`

23. Sets the listener for click events.

   `public setSingleTapListener(listener: OnImageViewTouchSingleTapListener): void`

24. Sets the directions for swiping and dragging.

   `public gestureConversion(panDirection: PanDirection, swipeDirection?: SwipeDirection, vertical?: boolean)`

    **gestureConversion** helps to resolve the gesture competition between **PanGesture** and **SwipeGesture** by dynamically setting their triggering directions.

25. Listens for image resource changes.

   `onDrawableChanged(src: Resource | PixelMap | string): void`
   The string type is added to the **src** parameter of the **onDrawableChanged** API.


## Constraints

ImageViewZoom has been verified in the following version:

- DevEco Studio: 4.1.3.500

- OpenHarmony SDK: API11 (4.1.0.63)

## Directory Structure

```
|---- ImageViewZoom
|     |---- entry  # Sample code
|     |---- library  # ImageViewZoom library 
|        |----src
|           |----main
|              |----ets
|                 |---- components
|                       |---- utils  # Utility library
|                             |---- IDisposable.ets  # Image clearing APIs
|                       |---- ImageViewTouch.ets  # Custom controls
|           |---- index.ets  # External APIs
|     |---- README.MD  # Readme
|     |---- README_zh.MD  # Readme
| |---- LICENSE # License
```

## How to Contribute

If you find any problem when using ImageViewZoom, submit an [Issue](https://gitee.com/openharmony-sig/ImageViewZoom/issues) or a [PR](https://gitee.com/openharmony-sig/ImageViewZoom/pulls).

## License

This project is licensed under the terms of the [MIT License](https://gitee.com/openharmony-sig/ImageViewZoom/blob/master/LICENSE).