(no summary available)
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 exportsPinchZoom
.dist/pinch-zoom.js
- Plain JS. ExposesPinchZoom
on the global.dist/pinch-zoom-min.js
- Minified plain JS. 2.3k gzipped.
Install
Framework Support
Browser Independent
Install with
Run the above npm command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 1.1.1
Dependencies
- pointer-tracker#^2.0.3