Question

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

通常这样可以正常工作，但有时当我加载页面时，双击功能会很奇怪。根据我的调试，看起来有时当我的应用程序加载时，我写的双击功能每次双击都会被调用两次。这会导致动画行为异常，并且在出现此问题时似乎没有一致的基础。重启我的服务器有时会工作，有时却不行。我几乎不得不继续重新加载我的页面，直到问题消失。

我最初的想法是，在我的文件的加载顺序中可能存在某些问题，并且有时会出现乱序。目前正在调查此事。我的另一个想法是，这可能与svg.js动画库或我试图替换arriuta的插件中的原生双击功能有关。想法？

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

这是一个小提琴：https://jsfiddle.net/Fuzzy/95t6oL8y/5/

当你想要能够平移你的svg时。只需添加对canvas.panZoom()

的调用即可

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

1 个答案: