A Web Component that supports `pinch-zoom` and `pan` for PC and Touch Devices.
npm install gesture-framepinch-zoom and pan for PC and touch devices.
npm i gesture-frame
`
Usage
`html
`
or using module bundler:
`ts
import 'gesture-frame/gesture-frame.css';
import 'gesture-frame/gesture-frame.js';
const gestureFrame = document.createElement('gesture-frame');
gestureFrame.pinchZoom = true;
gestureFrame.minScale = 0.01;
gestureFrame.fit({ marginX: 20, marginY: 20 });
`
If you use TypeScript with import elision and need the custom element type, import it separately.
See:
- verbatimModuleSyntax option
- preserveValueImports option (deprecated)
- importsNotUsedAsValues option (deprecated)
`ts
import { GestureFrame } from 'gesture-frame';
import 'gesture-frame/gesture-frame.css';
import 'gesture-frame/gesture-frame.js'; // when import elision is disabled, this line is not necessary.
// type usage
const gestureFrame: GestureFrame = document.createElement('gesture-frame');
// constructor usage
if (gestureFrame instanceof GestureFrame) {
}
`
HTML Attributes and DOM Element Properties
$3
| HTML Attribute | DOM Element Property | Default | Description |
| -------------- | -------------------- | ------- | ------------ |
| scale | scale | 1 | Scale. |
| offset-x | offsetX | 0 | Left margin. |
| offset-y | offsetY | 0 | Top margin. |
These attributes can be observed using MutationObserver.
$3
| HTML Attribute | DOM Element Property | Default | Description |
| ------------------------ | -------------------- | ------- | ----------------------------------------------------------------------------------------------- |
| min-scale | minScale | 0.1 | Minimum scale. |
| max-scale | maxScale | 100 | Maximum scale. |
| pan-x (existence) | panX | false | Whether horizontal panning is enabled. |
| pan-y (existence) | panY | false | Whether vertical panning is enabled. |
| pinch-zoom (existence) | pinchZoom | false | Whether two-finger panning and zooming is enabled. For PC, follows Ctrl + Wheel events. |
| pan-button | panButton | 0 | Mouse button for panning on PC. |
| anchor-left
(existence) |
| false
| Edges to which the content is bound. When the element is resized, the content is resized while keeping the distance from the bound edges.
\* Only up to three anchors can be set; if all anchors are set, only the left and right anchors will be enabled. |
DOM Element API
$3
Adjust the scale and offset to display the entire content.
$3
Adjust the scale and offset-x to fit the width.
$3
Adjust the scale and offset-y to fit the height.
$3
Zoom keeping the apparent position of (origin.x, origin.y). Zoom in when scaleRatio > 1 and zoom out when scaleRatio < 1. origin.x and origin.y can be specified as a number (px) or a ${number}% . The default value for both is "50%"` (center).