vue-pinch-scroll-zoom

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

original_repo: https://github.com/coddicat/vue-pinch-scroll-zoom/tree/main_vue3

example:

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

Installation

npm i @dream07312/vue3-pinch-scroll-zoom

Usage

template:

<PinchScrollZoom
  ref="zoomer"
  :width="300"
  :height="400"
  :scale="scale"
  @scaling="scalingHandler"
  style="border: 1px solid black"
>
  <img src="https://picsum.photos/600/1000" width="300" height="400" />
</PinchScrollZoom>

type script:

import { Component, Vue } from "vue-property-decorator";
import PinchScrollZoom, { PinchScrollZoomEmitData, PinchScrollZoomRef } from "@dream07312/vue3-pinch-scroll-zoom";

@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 PinchScrollZoomRef).setData({
      scale: 1,
      originX: 0,
      originY: 0,
      translateX: 0,
      translateY: 0        
    });
  }
}

Props

the following properties don't support the ".async" modifier

|name|required|description|default| |----|--------|-----------|-------| |width|yes|visible area width|| |height|yes|visible area height|| |contentWidth|no|should be defined when content width larger than container width|| |contentHeight|no|should be defined when content height larger than container height|| |minScale|no|minimum allowable scaling|0.3| |maxScale|no|maximum allowable scaling|5| |within|no|limit scrolling of content to its borders|true| |wheelVelocity|no|zoom velocity when mouse wheel|0.001| |scale|no|scale of the content|1| |origin-x|no|transform-origin-x|width/2| |origin-y|no|transform-origin-y|height/2| |translate-x|no|transform: translateX|0| |translate-y|no|transform: translateY|0| |throttleDelay|no|rendering delay (milliseconds)|25| |draggable|no|draggable of/off|true| |enableScaling|no| for enable listener scaling event| true |enableStartDrag|no| for enable listener startDrag event| true |enableStopDrag|no| for enable listener stopDrag event| true |enableDragging|no| for enable listener dragging event| true

Events

the following events are emitted with the argument:

export interface PinchScrollZoomEmitData {
  x: number;
  y: number;
  scale: number;
  originX: number;
  originY: number;
  translateX: number;
  translateY: number;  
}

• startDrag
• stopDrag
• dragging
• scaling

Methods

.SetData(data: PinchScrollZoomSetData);

export interface PinchScrollZoomSetData {
    scale: number;
    originX: number;
    originY: number;
    translateX: number;
    translateY: number;
}