svg.js/svg平移缩放-双击交互

svg.js / svg-pan-zoom - doubleclick interactions

本文关键字：svg 双击 交互 缩放 js      更新时间：2023-09-26

我使用的是Ariutta的svg平移缩放和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图像会居中，然后增长。当它的行为不正确时，它会集中，然后收缩成虚无。

你给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() 添加一个调用

相关文章：