A Web Component that supports pinch-zoom and pan for PC and touch devices.
Demo: https://luncheon.github.io/gesture-frame/
npm i gesture-frame
<link rel="stylesheet" href="gesture-frame/gesture-frame.css">
<script type="module" src="gesture-frame/gesture-frame.js"></script>
<gesture-frame pan-x pan-y pinch-zoom min-scale="0.01" max-scale="1000" scale="2" offset-x="20" offset-y="20">
<!-- Content -->
</gesture-frame>or using module bundler:
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:
verbatimModuleSyntaxoptionpreserveValueImportsoption (deprecated)importsNotUsedAsValuesoption (deprecated)
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 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.
| 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-leftanchor-rightanchor-topanchor-bottom(existence) |
anchorLeftanchorRightanchorTopanchorBottom |
falsefalsefalsefalse |
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. |
Adjust the scale and offset to display the entire content.
Adjust the scale and offset-x to fit the width.
Adjust the scale and offset-y to fit the height.
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).