Stack Overflow
Stack Overflow

Questions tagged [panzoom]

A JS library for universal support in panning and zooming in the browser. Use this tag when you have a question or issue related to the library.

Panzoom is an open-source library used when you need to support panning or zooming via JS in the browser. It was created by Andrea Kashcha in 2016 and published under the MIT license.

See the library website for more information: https://anvaka.github.io/panzoom/

33 questions
5
votes
2 answers

( panzoom ) How to stop Image from panning out of the view?

is there a way other than resetting the zoom to force image not to get lost completely while panning using Panzoom library const element = document.querySelector('#scene'); const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5,…
dota2pro
  • 7,220
  • 7
  • 44
  • 79
4
votes
1 answer

PanZoom catch Touch Up event

I am using Panzoom JS to zoom in on a map. It is working just the way I need it for zooming in and out on mobile and desktop. When you click on an item on the map, I grab the x/y coordinates relative to the top left of the container taking into…
Chris
  • 833
  • 2
  • 17
  • 37
3
votes
2 answers

Calculating visible area in infinite webpage

I'm using @panzoom/panzoom package for creating infinite webpage where I have items placed on it. When user pans I need to lazyload items based on their x and y coordinates. To achieve lazyload of items I need to calculate visible area on the…
sravis
  • 3,562
  • 6
  • 36
  • 73
3
votes
5 answers

How to initially center an image inside inline-block container when using panzoom?

I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as centered of the container. I need to keep the style…
dota2pro
  • 7,220
  • 7
  • 44
  • 79
3
votes
2 answers

How to use Panzoom javascript in Angular 8+?

I am unable to use Panzoom Javascript library in Angular. I get ERROR Error: panzoom is not defined Here is the stackblitz of what i have done till now . Here is the working demo of how it should work Can any one help me troubleshoot ? Thanks I…
dota2pro
  • 7,220
  • 7
  • 44
  • 79
2
votes
1 answer

vue3 unhandeled error when using vue-panzoom component

I used the panzoom in an older vue2 project. Now I tested the component in a simple vue3 setup and got "Unhandled error during execution of mounted hook at at " and "Cannot create panzoom for the current type of dom element" where's the problem? my…
bluelemonade
  • 1,115
  • 1
  • 14
  • 26
2
votes
0 answers

Using Panzoom with Painterro for zooming in on images

I have a project that has Painterro integration for creating images. I had added Panzoom feature to that image, where by upon shift + mouse scroll event, we zoom the image. But this causes issue with the input layer as after zooming in the input…
Sajal Limbu - ITH
  • 31
  • 2
2
votes
0 answers

getImageData() returns wrong data when panning/zooming canvas (Physical mobile device issue only)

Context: I'm using Andrei Kashcha's (anvaka) panzoom library: https://github.com/anvaka/panzoom to provide detailed color picking functionalities: I've created a 1' movie to illustrate the use case:…
user1098973
  • 334
  • 2
  • 9
2
votes
1 answer

@angular/cdk/drag-drop inside panzoom

I'm using Angular 10 with panzoom. Inside the panzoom element I have draggable elements using @angular/cdk/drag-drop. This works fine until I zoom in or out with the panzoom. When zoomed in the dragging is accelerated and moves faster than my…
Doug
  • 665
  • 2
  • 8
  • 22
2
votes
1 answer

How to implement zoomIn and zoomout in vue-panzoom

I am trying to implement vue-panzoom's manual zoom option. panzoom is the parent library and the default zoom which is well demoed here is what i am trying to acheive https://timmywil.com/panzoom/demo/#Panning%20and%20zooming As per the original…
user7091075
2
votes
1 answer

Zooming in with keyboard moves the centered image to right

This is continuation from this post When i click and zoom in the image it pushes the centered image to the right how can I force it zoom and not move to right const element = document.querySelector('.image-inner-wrapper'); const zoomLevels =…
dota2pro
  • 7,220
  • 7
  • 44
  • 79
1
vote
1 answer

How to zoom and scroll an element

I'm a newbie in html/css/JS development, I'm trying to learn for hobbyist purpose. I'm trying to create a page with an element inside a
and I'm looking for a way to pan with scrollbar and zoom its content without using external libraries…
martin.p
  • 331
  • 3
  • 16
1
vote
0 answers

TypeError: Cannot read properties of undefined (reading 'on') when using panZoom in Vue 3

VUE 3 JS: Implementing the code for panZoom, I'm hitting the TypeError: Cannot read properties of undefined (reading 'on') . I got only solution https://github.com/thecodealer/vue-panzoom/issues/43 which is not applicable in my case. Please let me…
Ramlal S
  • 1,573
  • 1
  • 14
  • 34
1
vote
1 answer

Zoom only if [CTRL] key is pressed and auto repositioning of the image with panzoom - Angular

I am able to zoom in and out of my image with mouse scroll but I would like to zoom only if the [CTRL] key is pressed and using the mouse scroll. I would also like my image to go back to its initial properties after zooming out to a point and after…
Picolo
  • 23
  • 6
1
vote
1 answer

Panzoom library: Zoom in and out while clicking the image works only for the first time

I'm using Panzoom library panzoom and would like to be able to zoom in and zoom out an image while clicking the image itself. It works. But only for the first time. I want to zoom in an image in two steps (2 clicks) and zoom out in 1 step. I added…
Magda
  • 21
  • 3
1
2 3