javascript - svg.js/svg-pan-zoom - 双击交互

Question

我正在使用 Ariutta 的 svg-pan-zoom 和 svg.js。我已禁用 native Arriuta 双击功能，并尝试添加自己的双击功能，该功能最终由平移调整和动画组成。

通常这工作正常，但有时当我加载页面时，双击功能表现得很奇怪。根据我的调试，有时当我的应用程序加载时，我编写的双击函数会为每次双击调用两次。这会导致动画行为异常，并且对于何时出现此问题似乎没有一致的依据。重新启动我的服务器有时有效，有时无效。我几乎只需要继续重新加载我的页面，直到问题消失。

我最初的想法是，我的文件的加载顺序可能有问题，有时加载顺序不正确。目前正在调查此事。我的另一个想法是，这可能与 svg.js 动画库有关，或者我试图替换 arriuta 插件中的 native 双击功能。想法？

myApp.service('AnimatorService', function(){
   this.dblClickBehavior = function(svgCanvas, zoom){   
        $('.node').dblclick(function(){

            // get pan
            pan = zoom.getPan();

            // get screen width and height
            var sizes = zoom.getSizes();
            var centerX = (sizes.width)/2;
            var centerY = (sizes.height)/2;

            // get center position of svg object double clicked 
            var x0 = this.instance.first().attr('cx');
            var y0 = this.instance.first().attr('cy');

            //determine the correct pan value necessary to center the svg
            panAdjustX = centerX - x0*sizes.realZoom;
            panAdjustY = centerY - y0*sizes.realZoom;

            //center the svg object by adjust pan
            zoom.pan({'x' :centerX - x0*sizes.realZoom, 'y' : centerY - y0*sizes.realZoom});

            //simple animation on the object
            this.instance.first().animate().radius(centerX);

        }); 
       }
});

当其行为正确时，svg 图像会居中然后增大。当它行为不正确时，它会居中，然后收缩成虚无。

Answer 1

您标记了 svg.js，所以我将给出 svg.js 答案。现在有一个插件 svg.panZoom.js 可以用来轻松实现你想要的功能:

var canvas = SVG('container').viewbox(0,0,1000,1000)

canvas.image('https://www.zooroyal.de/magazin/wp-content/uploads/2017/05/cat-2783601_1920.jpg', 1000, 1000)
  .attr('preserveAspectRatio', 'none')

canvas.on('dblclick', function(e) {
  var p = this.point(e.pageX, e.pageY)
  var zoomLvl = 3

  // zoom into point p to zoomLvl
  canvas.animate().zoom(zoomLvl, p)
})

这是一个 fiddle :https://jsfiddle.net/Fuzzy/95t6oL8y/5/

当您也希望能够平移缩放您的 svg 时。只需添加对 canvas.panZoom()

的调用