svg.js / svg-pan-zoom-doubleclick互動

Question

我正在使用帶有svg.js的Ariutta的svg-pan-zoom。 我已禁用Arriuta原生的doubleclick功能，並嘗試添加自己的功能，該功能最終包括平移調整和動畫。

通常這可以正常工作，但是有時在我加載頁面時，doubleclick函數的行為異常。 根據我的調試，似乎有時在我的應用加載時，我為每個雙擊雙擊編寫的doubleclick函數。 這將導致動畫表現異常，並且似乎沒有一致的依據來說明何時出現此問題。 重新啟動服務器有時可以正常運行，有時卻不可行。 我幾乎只需要繼續重新加載我的頁面，直到問題解決為止。

我最初的想法是，文件的加載順序可能有問題，有時加載不正常。 目前正在對此進行調查。 我的另一個想法是，這可能與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()的調用