Zoompinch

Apply a pinch-and-zoom experience that’s feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas.

Play around with the demo here

Mathematical correct pinch on touch

Unlike other libraries, Zoompinch does not just uses the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes pinching on touch devices feel native-like.

Touch, Wheelm, Mouse and Trackpad Gestures!

Adside of touch, mouse and wheel events, gesture events (Safari Desktop) are supported as well! Try it out on the demo

Currently supported platforms:

• Vue 3
• Web components (work in progress)
• React

Install

$ npm install zoompinch

Example usage

<zoompinch
  ref="zoompinchRef"
  v-model:transform="transform"
  :width="1536"
  :height="2048"
  :offset="{ top: 10, right: 10, bottom: 10, left: 10 }"
  :min-scale="0.1"
  :max-scale="10"
  :rotation="true"
  :bounds="false"
  mouse
  touch
  wheel
  gesture
>
  <template #canvas>
    <img src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" style="width: 1536px; height: 2048px;" />
  </template>
  <template #matrix="{ composePoint }">
    <svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
      <!-- This circle will stick to the center of the canvas -->
      <circle :cx="composePoint(0.5, 0.5)[0]" :cx="composePoint(0.5, 0.5)[1]" r="5" style="fill: #f00;" />
    </svg>
  </template>
</zoompinch>

import { Zoompinch } from 'zoompinch';
import 'zoompich/style.css';

// Just the ref instance in which the component instance will live
const zoompinchRef = ref<InstanceType<typeof ProjectionLayer>>();

// A reactive transform object
const transform = ref({
  x: 0,
  y: 0,
  scale: 1,
  rotate: 1,
});

function handleClickOnLayer(event: MouseEvent) {
  const [x, y] = zoompinchRef.value?.normalizeMatrixCoordinates(event.clientX, event.clientY);

  console.log('clicked at', x, y);
}

Properties

• width and height: Just inner dimensions of the element in the canvas.In fact they have to fit the aspect ratio of the actual element (otherwise you will have offsets)
• offset: A padding that affects the "real view box" that will be used for calculations. This is important because of course the initial scale of 1 such as the initial translate of 0, 0 will be affected by this offset. Fitting your canvas into { scale: 1, x: 0, y: 0, rotate: 0 } will be always the center of the view box without the offset.
• transform: A reactive property (that can be used via v-model) that holds and accepts the relative transform from the center
• minScale and maxScale: Minimum and maximum scale
• bounds: Boolean value wether the canvas whould fit into the bounds of the view layer. I