javascriptjqueryjquery.panzoom

Having issues with jquery panzoom js, increment value is not destroyed upon calling destroy


I am having problems while working on jquery.panzoom.js

My requirement is to click on a button to allow zoom on the image several times. The reason why I had a zoom button is ,I also have a pan button, so I have to click them and on mousewheel I have to process pan or zoom accordingly.

My problem is that even after calling destroy() method , the increment parameter increments by current + previous increment which makes the zoom to increase by more than 0.1 despite of setting that parameter everytime.

It increases like :

transform : matrix(0.1, 0, 0, 0.1, 0, 0)
transform : matrix(0.2, 0, 0, 0.2, 0, 0)

After I click zoom button again ,

transform : matrix(0.4, 0, 0, 0.4, 0, 0)
transform : matrix(0.6, 0, 0, 0.6, 0, 0)

After I click zoom button again ,

transform : matrix(0.9, 0, 0, 0.9, 0, 0)
transform : matrix(1.2, 0, 0, 1.2, 0, 0)

I know the immediate question will be why am I clicking them again and again? Answer will be because I need to do some other operations on image like adding rectangle or circle, etc.

my code:

$section.panzoom("destroy"); 
         $section.panzoom(
         {
              disablePan: disablePan,
              increment: 0.1,
              minScale: 0.1,
              maxScale: 50,
              $reset: $("#resetImg")
         });
         $section.on('mousewheel', function( e ) {
             e.preventDefault();
                var delta = e.delta || e.originalEvent.wheelDelta;
                var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
                if(UIConstants.zoomActivated == true) {
                     $section.panzoom('zoom', zoomOut, {
                         increment: 0.1,
                         animate: false,
                         focal: e
                    });
                } else {
                     $section.panzoom('zoom', zoomOut, {
                      increment: 0.1,
                      animate: false,
                      focal: e
                    });
                }
          });

Solution

  • Check JQueryUI https://jqueryui.com/draggable/ for getting the flexibility of dragging things. You can try out examples there.

    for zooming better keep a flag variable instead of triggering events every time.