Directory

← Back

pinch-zoom

(no summary available)

Author

Contributors

Rating

A web component for pinch zooming DOM elements.

Usage

npm install --save-dev pinch-zoom-element
<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Now the above can be pinch-zoomed!

API

<pinch-zoom class="my-pinch-zoom">
  <h1>Hello!</h1>
</pinch-zoom>
<script>
  const pinchZoom = document.querySelector('.my-pinch-zoom');
</script>

Properties

pinchZoom.x; // x offset
pinchZoom.y; // y offset
pinchZoom.scale; // scale

Methods

Set the transform. All values are optional.

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.

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. Although you can put any element in <pinch-zoom>.

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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • pointer-tracker#^2.0.3
Released
2019-02-22
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Browser
Browser Independent

pinch-zoom - Vaadin Add-on Directory

(no summary available) pinch-zoom - Vaadin Add-on Directory
# 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!

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