Skip to content

vue3 library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>

License

Notifications You must be signed in to change notification settings

DummyEkko/vue3-zoom-pan-pinch

Repository files navigation

vue3-zoom-pan-pinch

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

Development

pnpm install

pnpm --filter example run dev

Props of TransformComponent

Props Default Type
defaultPositionX 0 number
defaultPositionY 0 number
defaultScale 1 number
options {...} object
wheel {...} object
pan {...} object
pinch {...} object

Options prop elements

Props Default Type
disabled false boolean
minPositionX null null, number
maxPositionX null null, number
minPositionY null null, number
maxPositionY null null, number
minScale 1 number
maxScale 8 number
limitToBounds true boolean
centerContent true boolean

Wheel prop elements

Props Default Type
disabled false boolean
step 6.5 number
wheelEnabled true boolean
touchPadEnabled true boolean
disableLimitsOnWheel true boolean

Pan prop elements

Props Default Type
disabled false boolean
lockAxisX false boolean
lockAxisY false boolean
limitToWrapperBounds false boolean

Pinch prop elements

Props Default Type
disabled false boolean
step 1 number

About

vue3 library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published