pinch-zoom - Vaadin Add-on Directory
(no summary available)
#
A web component for pinch zooming DOM elements.
## Usage
```sh
npm install --save-dev pinch-zoom-element
```
```html
```
Now the above can be pinch-zoomed!
## API
```html
```
### Properties
```js
pinchZoom.x; // x offset
pinchZoom.y; // y offset
pinchZoom.scale; // scale
```
### Methods
Set the transform. All values are optional.
```js
pinchZoom.setTransform({
scale: 1,
x: 0,
y: 0,
// Fire a 'change' event if values are different to current values
allowChangeEvent: false,
});
```
Scale in/out of a particular point.
```js
pinchZoom.scaleTo(scale, {
// Transform origin. Can be a number, or string percent, eg "50%"
originX: 0,
originY: 0,
// Should the transform origin be relative to the container, or content?
relativeTo: 'content',
// Fire a 'change' event if values are different to current values
allowChangeEvent: false,
});
```
## Demo
[Simple image pinch-zoom](https://pinch-zoom-element.glitch.me/). Although you can put any element in ``.
## Files
* `lib/index.ts` - Original TypeScript.
* `dist/pinch-zoom.mjs` - JS module. Default exports `PinchZoom`.
* `dist/pinch-zoom.js` - Plain JS. Exposes `PinchZoom` on the global.
* `dist/pinch-zoom-min.js` - Minified plain JS. 2.3k gzipped.
View on NPMHello!
Hello!
View on GitHub
pinch-zoom version 1.0.0
### Dependencies
pinch-zoom version 1.0.1
### Dependencies
pinch-zoom version 1.0.2
### Dependencies
pinch-zoom version 1.0.3
### Dependencies
* pointer-tracker#^2.0.3
pinch-zoom version 1.1.0
### Dependencies
* pointer-tracker#^2.0.3
pinch-zoom version 1.1.1
### Dependencies
* pointer-tracker#^2.0.3