vue3-zoom-pan-pinch

vue3-zoom-pan-pinch

Super fast and light vue3 npm package for zooming, panning and pinching html elements in easy way

Install

npm install --save vue3-zoom-pan-pinch

or

yarn add vue3-zoom-pan-pinch

Usage

import {
  defineComponent,
  ref,
  shallowRef,
  watch,
  unref,
  reactive,
  onMounted,
} from "vue";
import { TransformComponent } from "vue3-zoom-pan-pinch";
import car from "./assets/images/car.png";
import "./App.scss";

export default defineComponent({
  name: "App",
  setup() {
    const transformComponentRef = ref(null);
    return () => (
      <div>
        <TransformComponent
          ref={transformComponentRef}
          defaultScale={1.2}
          defaultPositionX={10}
          defaultPositionY={20}
          wheel={{
            step: 1,
          }}
        >
          <div class="content">
            <img src={car} />
          </div>
        </TransformComponent>
        <footer>
          <button onClick={transformComponentRef.value?.resetTransform}>reset</button>
        </footer>
      </div>
    );
  },
});

<script setup lang="ts">
import { TransformComponent } from 'vue3-zoom-pan-pinch'
import car from './assets/car.png'
</script>

<template>
  <div>
    <TransformComponent
      :wheel="{
        step: 1
      }"
    >
      <div class="content">
        <img :src="https://raw.githubusercontent.com/DummyEkko/vue3-zoom-pan-pinch/HEAD/car" alt="" srcset="" />
      </div>
    </TransformComponent>
  </div>
</template>

Props of TransformComponent

Options prop elements

Wheel prop elements

Pan prop elements

Pinch prop elements