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
});
}
});
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.