1

我正在使用 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 图像居中然后增长。当它行为不正确时，它会居中，然后缩小为虚无。

4

1 回答 1

0

你标记了 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()

于 2018-02-15T14:32:27.363 回答