jquery panzoom js有问题，调用destroy时增量值不会被破坏

Posted 2023-05-07

【中文标题】jquery panzoom js有问题，调用destroy时增量值不会被破坏

【英文标题】：Having issues with jquery panzoom js, increment value is not destroyed upon calling destroy

【发布时间】：2016-01-03 00:10:44

【问题描述】：

我在处理 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
                    );
                
          );

【参考方案1】：

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

为了更好地缩放，保留一个标志变量，而不是每次都触发事件。