在jquery panzoom js中,增量值在调用destroy时不会被销毁

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

本文关键字:destroy 调用 panzoom jquery js      更新时间:2023-09-26

我在jquery.panzoom.js工作时遇到了问题

我的要求是点击一个按钮,允许缩放图像几次。我有一个缩放按钮的原因是,我也有一个平移按钮,所以我必须点击它们,在鼠标滚轮上我必须相应地处理平移或缩放。

我的问题是,即使在调用destroy()方法后,增量参数增加current + previous增量,这使得变焦增加超过0.1,尽管每次设置该参数。

它像这样增加:

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

再次点击缩放按钮后,

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

再次点击缩放按钮后,

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

我知道直接的问题是为什么我一次又一次地点击它们?答案是,因为我需要对图像做一些其他操作,比如添加矩形或圆形等。

我的代码:

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

检查JQueryUI https://jqueryui.com/draggable/以获得拖动事物的灵活性。你可以在这里试用示例。

用于缩放的

最好保留一个标志变量,而不是每次都触发事件。