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
1
vote
0 answers

Javascript Error: PanZoom JS function Not working on Dynamic Uploaded Image

I am trying to implement the PanZoom JS Functionality in my Code. The Code works fine when I add the static Image to the The WebPage and add the PanZoom Function to it. Eg: >>HTML
Chempooro
  • 415
  • 1
  • 7
  • 24
1
vote
1 answer

Convert mouse position to Canvas Coordinates and back

I'm creating a canvas with an overlay div to add markers on click and I want markers to change position when I pan zoom the canvas or resize the window. I'm using https://github.com/timmywil/panzoom to pan zoom. The problem is when I convert mouse…
Nam Tang
  • 100
  • 1
  • 10
1
vote
0 answers

Pan and zoom div container with draggable elements

I am trying to create a virtual post it board where you can add a note, drag it, etc. I also want to be able to zoom in and out of the board and pan around. I have most of this working but when I do the pan/zoom stuff (using a library I found) the…
Eric.18
  • 463
  • 4
  • 20
1
vote
1 answer

jsPlumb + Panzoom infinite droppable canvas

I have created a codepen that uses jquery ui droppable(for drag/drop), jsPlumb (for flowcharting) and Panzoom (panning and zooming) to create a flowchart builder. You could drag the list items from the draggable container (1st column) to the…
Pradeep Jagadeesan
  • 11
  • 1
1
vote
0 answers

How to programmatically smoothly zoom to a point with panzoom?

Using the panzoom library, assuming the containing div is 400x300px, and an interesting item is found on 120-150x200-250 (Before zooming), how can one programmatically zoom to this rectangle with a smooth zoom in?
Udi
  • 29,222
  • 9
  • 96
  • 129
1
vote
0 answers

How to install timmywill panzoom with a script tag

I am trying to add panzoom to my page via a vanilla script tag. In the documentation it says: With a script tag: I can not find a folder called js nor a file called panzoom.js in the package, only…
user1293977
  • 159
  • 9
1
vote
1 answer

Panzoom inconsistent when zooming in without a mouse and keyboard buttons

I have tried the solution posted in this github post Steps to reproduce: Click on Zoom in Button twice. When Zoom is 150%; Click zoom out. The image zooms in but should actually zoom out const element =…
dota2pro
  • 7,220
  • 7
  • 44
  • 79
0
votes
0 answers

PanZoom plugin integration into Nuxt3 project fails while in Nuxt2 it is OK

I am refactoring an application from Nuxt2 to Nuxt3 and I use PanZoom for panning and zooming a specific div. My package.json looks like below { "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate",…
Peter HIRT
  • 741
  • 2
  • 8
  • 18
0
votes
0 answers

How to recenter svg with react svg pan zoom

I have this SVG and I am zooming in on specific parts of it on click. I would like to make the new point I zoom into with Viewer.current.setPointOnViewerCenter(data.x, data.y, 2), my new center. Does anyone have any idea of how to go about this?
illyria
  • 324
  • 4
  • 19
0
votes
0 answers

Unity Pan and Zoom. Camera translate changes entirely once i click on screen

I'm trying to set Panning and zooming functions for my unity project. I got the codes i used from https://kylewbanks.com/blog/unity3d-panning-and-pinch-Ito-zoom-camera-with-touch-and-mouse-input. This is the code I used: using UnityEngine; using…
LEGIT
  • 21
  • 4
0
votes
1 answer

Why panzoom not disabled in svelte?

I am trying both panzoom library in projects. The panzoom is working perfectly but when I try to pause or dispose panzoom, it is not working. I have tried multiple approach to solve this but didn't find any working solution. I have created a canvas…
i_am_learning
  • 17
  • 3
0
votes
1 answer

Zoom (panZoom) not working when switching plots in R shiny

I am able to use zoom on a single image, and that works well. However, in a more complex app, I have a dynamic UI that the plotting depends on a selectInput() like this: output$all <- renderUI({ if (input$choice == 'two nodes') { …
CodingBiology
  • 262
  • 4
  • 13
0
votes
1 answer

multiple panzoom's on one page

I'm using this panzoom library, however I'm struggling to get it to work multiple instances on the same page with custom options. Here is a jsFiddle which allows for multiple panzooms all with the same class. const paths =…
probablybest
  • 1,403
  • 2
  • 24
  • 47
0
votes
1 answer

Panzoom library and filling a div with a centered image

The Panzoom library (https://timmywil.com/panzoom/demo/) allows you to move and zoom an image in a div: var panzoom1 = Panzoom(document.querySelector(".zoom-area1"), { maxScale:…
Dominika Zając
  • 68
  • 5
0
votes
1 answer

how can i Pause vue-panZoom

I have a Grid with vue-panZoom inside it there is a vue-draggable-resizable area like in the image below Image When i drag the (vue-draggable-resizable) gray square, the black (pan-zoom) rectangle also moves. when the gray square is selected, the…
Drakew
  • 5
  • 3
1
2
3