Pinch To Zoom & Pan In Vue

Install & Download:

Description:

A Vue.js component that allows you to zoom and pan content with mouse events or touch gestures.

How to use it:

1. Import and register the component.

import '@coddicat/vue-pinch-scroll-zoom/style.css';

import { ref, reactive } from 'vue';
import PinchScrollZoom, {
  type PinchScrollZoomEmitData,
  type PinchScrollZoomExposed
} from '@coddicat/vue-pinch-scroll-zoom';

2. Wrap your content in the PinchScrollZoom component.

<PinchScrollZoom
  ref="zoomer"
  :width="300"
  :height="400"
  within
  :min-scale="0.3"
  :max-scale="6"
  @scaling="e => onEvent('scaling', e)"
  @startDrag="e => onEvent('startDrag', e)"
  @stopDrag="e => onEvent('stopDrag', e)"
  @dragging="e => onEvent('dragging', e)"
  style="border: 1px solid black"
  :content-width="500"
  :content-height="500"
>
  <img src="1.jpg" width="800" height="600" />
</PinchScrollZoom>

const zoomer = ref<PinchScrollZoomExposed>();
function onEvent(name: string, e: PinchScrollZoomEmitData): void {
  state.eventName = name;
  state.eventData = e;
  state.scale = e.scale;
  state.originX = e.originX;
  state.originY = e.originY;
  state.translateX = e.translateX;
  state.translateY = e.translateY;
}
function reset(): void {
  zoomer.value?.setData({
    scale: 1,
    originX: 150,
    originY: 200,
    translateX: -100,
    translateY: -50
  });
}

3. Default component props.

contentWidth?: number;
contentHeight?: number;
width: number;
height: number;
originX?: number;
originY?: number;
translateX?: number;
translateY?: number;
scale?: number;
throttleDelay?: number;
within?: boolean;
minScale?: number;
maxScale?: number;
wheelVelocity?: number;
draggable?: boolean;
centered?: boolean;
keyActions?: boolean;
tabindex?: number;
keyZoomVelocity?: number;
keyMoveVelocity?: number;
keyControls?: Record<string, PinchScrollZoomKeyAction>;
translate3d?: boolean;

4. API methods.

.SetData(data: PinchScrollZoomSetData);
export interface PinchScrollZoomSetData {
  scale: number;
  originX: number;
  originY: number;
  translateX: number;
  translateY: number;
}