vue-pinch-scroll-zoom
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices
example:
https://vue-pinch-scroll-zoom.coddicat.com/
Installation
npm i @coddicat/vue-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 } from "@coddicat/vue-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 PinchScrollZoom).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 |
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;
}
instead of
0 Mar 1, 2021
534 Dec 2, 2022
2 Feb 13, 2022
84 Dec 26, 2022
16 Nov 12, 2021
57 Mar 2, 2022
1 Jun 5, 2022
1 Oct 4, 2018
2k Dec 31, 2022
17 Jul 15, 2022
455 Dec 16, 2022
0 Nov 27, 2020
2 Nov 5, 2020
64 Oct 4, 2022
119 Nov 28, 2022
182 Nov 24, 2022
1.5k Jan 6, 2023