Pinch To Zoom & Pan In Vue

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 { Component, Vue } from "vue-property-decorator";
import PinchScrollZoom, { PinchScrollZoomEmitData } from "@coddicat/vue-pinch-scroll-zoom";

@Component({
  name: "PinchScrollZoomExample",
  components: {
    PinchScrollZoom
  }
})

2. Wrap your content in the PinchScrollZoom component.

<PinchScrollZoom
  ref="zoomer"
  :width="400"
  :height="300"
  :scale="scale"
  @scaling="scalingHandler"
>
  <img src="1.jpg" width="400" height="300" />
</PinchScrollZoom>

@Component({
  name: "PinchScrollZoomExample",
  components: {
    PinchScrollZoom
  }
})
export default class PinchScrollZoomExample extends Vue {
  private scale = 2;
  public scalingHandler(e: PinchScrollZoomEmitData): void {
    console.log(e);
  },
  public reset() {
    (this.$refs.zoomer as PinchScrollZoom).setData({
      scale: 1,
      originX: 0,
      originY: 0,
      translateX: 0,
      translateY: 0        
    });
  }
}

3. Default component props.

@Prop({ required: false }) private contentWidth!: number | undefined;
@Prop({ required: false }) private contentHeight!: number | undefined;
@Prop({ required: true }) private width!: number;
@Prop({ required: true }) private height!: number;
@Prop({ required: false }) private originX!: number | undefined;
@Prop({ required: false }) private originY!: number | undefined;
@Prop({ required: false, default: 0 }) private translateX!: number;
@Prop({ required: false, default: 0 }) private translateY!: number;
@Prop({ required: false, default: 1 }) private scale!: number;
@Prop({ required: false, default: 25 }) private throttleDelay!: number;
@Prop({ required: false, default: true }) private within!: boolean;
@Prop({ required: false, default: 0.3 }) private minScale!: number;
@Prop({ required: false, default: 5 }) private maxScale!: number;
@Prop({ required: false, default: 0.001 }) private wheelVelocity!: number;
@Prop({ required: false, default: true }) private draggable!: boolean;

Preview:

Changelog:

v3.3.4 (05/04/2022)

• Update

Download Details:

Author: coddicat

Live Demo: https://vue-pinch-scroll-zoom.coddicat.com/

Download Link: https://github.com/coddicat/vue-pinch-scroll-zoom/archive/refs/heads/main.zip

Official Website: https://github.com/coddicat/vue-pinch-scroll-zoom

Install & Download:

You Might Be Interested In: