https://github.com/GoogleChromeLabs/pinch-zoom

https://github.com/GoogleChromeLabs/pinch-zoom

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/GoogleChromeLabs/pinch-zoom
• Owner: GoogleChromeLabs
• License: apache-2.0
• Created: 2018-10-10T18:15:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-06-10T22:55:37.000Z (7 months ago)
• Last Synced: 2024-08-31T05:43:41.895Z (4 months ago)
• Language: TypeScript
• Size: 298 KB
• Stars: 370
• Watchers: 13
• Forks: 54
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - pinch-zoom - (TypeScript)
• awesome-standalones - `<pinch-zoom>`

README

        
# 

A web component for pinch zooming DOM elements.

## Usage

```sh

npm install --save-dev pinch-zoom-element

```

```html

  
Hello!


```

Now the above can be pinch-zoomed!

## API

```html

  
Hello!


  const pinchZoom = document.querySelector('.my-pinch-zoom');

```

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