README.md · OpenHarmony-SIG/ohos_image_view_zoom

# 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

## 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).

OpenHarmony-SIG/ohos_image_view_zoom

简介

发行版 (7)

贡献者

近期动态

OpenHarmony-SIG/ohos_image_view_zoom .gitee-modal { width: 500px !important; }

简介

发行版 (7)

贡献者

近期动态

搜索帮助

OpenHarmony-SIG/ohos_image_view_zoom