Pinch zoom for Angular

Note 2

This Project has been forked to update:

• Add a listener to detect zoom changes (onZoomChange)="zoomChange($event) demo
• Adds functionality to modify the zoom state programmatically demo
• Adds functionality to modify the zoom state programmatically at a specific point (in this example the click) demo

Note 1

This Project has been forked to update to the newest Angular 16 Version.

The module provides opportunities for image zooming in, zooming out and positioning with use of gestures on a touch screen.

Live demos and source code samples can be found on home page.

🔬️ Help make Pinch zoom better by answering a few questions.

Installation

Install the npm package.

npm i @meddv/ngx-pinch-zoom

Import module:

import { PinchZoomModule } from '@meddv/ngx-pinch-zoom';

@NgModule({
    imports: [ PinchZoomModule ]
})

Usage

For use, put your image inside the <pinch-zoom> container. Please, pay attention to the parameters of your viewport metatag. If you use Pinch Zoom, it is required to limit zooming of a web-page, by entering the following parameters: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">.

<pinch-zoom>
    <img src="path_to_image" />
</pinch-zoom>

Properties

| name | type | default | description | |---------------------| ----------------------------- | --------------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | transition-duration | number | 200 | Defines the speed of the animation of positioning and transforming. | | limit-zoom | number, "original image size" | "original image size" | Limit the maximum available scale. By default, the maximum scale is calculated based on the original image size. | | minScale | number | 0 | Limit the minimum acceptable scale. With a value of 1, it is recommended to use this parameter with limitPan | | auto-zoom-out | boolean | false | Automatic restoration of the original size of an image after its zooming in by two fingers. | | double-tap | boolean | true | Zooming in and zooming out of an image, depending on its current condition, with double tap. | | disabled | boolean | false | Disable zoom. | | disablePan | boolean | false | Turn off panning with one finger. | | overflow | "hidden", "visible" | "hidden" | hidden - the overflow is clipped, and the rest of the content will be invisible. visible - the overflow is not clipped. The content renders outside the element's box. | | disableZoomControl | "disable", "never", "auto" | "auto" | Disable zoom controls. auto - Disable zoom controls on touch screen devices. never - show zoom controls on all devices. disable - disable zoom controls on all devices. | | zoomControlScale | number | 1 | Zoom factor when using zoom controls. | | backgroundColor | string | "rgba(0,0,0,0.85)" | The background color of the container. | | limitPan | boolean | false | Stop panning when the edge of the image reaches the edge of the screen. | | minPanScale | number | 1.0001 | Minimum zoom at which panning is enabled. | | listeners | "auto", "mouse and touch" | "mouse and touch" | By default, subscriptions are made for mouse and touch screen events. The value auto means that the subscription will be only for touch events or only for mouse events, depending on the type of screen. | | wheel | boolean | true | Scale with the mouse wheel. | | wheelZoomFactor | number | 0.2 | Zoom factor when zoomed in with the mouse wheel. | | stepZoomFactor | number | 0.2 | Zoom factor when zoomed in/out with external control and zoom in with mouse click. | | autoHeight | boolean | false | Calculate the height of the container based on the width and height attributes of the image. By default, the width of the container is 100%, and the height is determined after the image information is loaded - this may cause a delay in determining the height of the container. If you want the container to initially have dimensions corresponding to the dimensions of the image, then specify the attributes width and height for the <img> tag. When setting the property value to true, a subscription to the window resize listener will be created. | | draggableImage | boolean | false | Sets the attribute draggable to the <img> tag. |

Outputs

| name | description | |---------------------|--------------------------------------------------------------------------------------------| | (onZoomChange) | Returns a ZoomEvent objet on every change of state |

interface ZoomEvent {
    scale: number;
    moveX: number;
    moveY: number;
}

Methods

| name | description | |-------------------------------------|----------------------------------------------------------------------------------------------------------------------------------| | toggleZoom() | Image zooming in and out, depending on its current state. | | destroy() | Unsubscribe from mouse events and touches, as well as remove added styles from the DOM tree. | | zoomIn() | Allows zooming in a step with an external control, requires a value defined in the stepZoomFactor property | | resetZoom() | Unsubscribe from mouse events and touches, as well as remove added styles from the DOM tree. | | zoomOut() | Allows zooming out a step with an external control, requires a value defined in the stepZoomFactor property | | zoomPoint(newPoint: MouseZoomPoint) | Allows zooming in a step with an external control in a specific point, requires a value defined in the stepZoomFactor property |

interface MouseZoomPoint{
    clientX: number;
    clientY: number;
}

See the full documentation and examples on the home page.

Author services

Are you interested in this library but lacks features? Write to the author, he can do it for you.

Sponsors

Tested using Browserstack