svg-pan-zoom平移/缩放到任何对象 [英] svg-pan-zoom pan/zoom to any object

问题描述

我正在使用svg-pan-zoom代码 https://github.com/ariutta/svg-pan-zoom 制作某种svg地图，现在是时候向pan& amp;添加一个功能了.点击事件时，将其缩放到svg的图片组件.但是，我不确定如何使用panBy()函数获取所需的svg艺术作品:我尝试在要平移的组上使用getBBox()并将其与panZoomInstance.getPan一起使用()和getSizes()信息，但我的实验无法完成. 我想完成与示例相同的动画之王( http://ariutta.github.io/svg-pan-zoom/demo/simple-animation.html )，但将视口居中放置在该项目上.

I'm using the svg-pan-zoom code https://github.com/ariutta/svg-pan-zoom to make an svg map of some kind, now it is time to add a feature to pan & zoom to an art component of the svg on a click event. However, I'm not sure how to use the panBy() function to get to a desired svg art item: I tried to use the getBBox() on the group I'm looking to pan to and use that with the panZoomInstance.getPan() and getSizes() information, but my experiments are not working out. I'd like to accomplish the same king of animation as their example (http://ariutta.github.io/svg-pan-zoom/demo/simple-animation.html) but center the viewport to the item.

推荐答案

在所有可能的情况下，我都能弄清楚这部分内容！

Against all odds I was able to figure out this part of it!

function customPanByZoomAtEnd(amount, endZoomLevel, animationTime){ // {x: 1, y: 2}
  if(typeof animationTime == "undefined"){
      animationTime =   300; // ms
  }
  var animationStepTime = 15 // one frame per 30 ms
    , animationSteps = animationTime / animationStepTime
    , animationStep = 0
    , intervalID = null
    , stepX = amount.x / animationSteps
    , stepY = amount.y / animationSteps;

  intervalID = setInterval(function(){
    if (animationStep++ < animationSteps) {
      panZoomInstance.panBy({x: stepX, y: stepY})
    } else {
      // Cancel interval
      if(typeof endZoomLevel != "undefined"){
        var viewPort = $(".svg-pan-zoom_viewport")[0];
        viewPort.style.transition = "all " + animationTime / 1000 + "s ease";
        panZoomInstance.zoom(endZoomLevel);
        setTimeout(function(){
            viewPort.style.transition = "none";
            $("svg")[0].style.pointerEvents = "all"; // re-enable the pointer events after auto-panning/zooming.
                    panZoomInstance.enablePan();
                    panZoomInstance.enableZoom();
                    panZoomInstance.enableControlIcons();
                    panZoomInstance.enableDblClickZoom();
                    panZoomInstance.enableMouseWheelZoom();
        }, animationTime + 50);
      }
      clearInterval(intervalID)
    }
  }, animationStepTime)
}

function panToElem(targetElem) {

    var initialSizes = panZoomInstance.getSizes();
    var initialLoc = panZoomInstance.getPan();
    var initialBounds = targetElem.getBoundingClientRect();
    var initialZoom = panZoomInstance.getZoom();
    var initialCX = initialBounds.x + (initialBounds.width / 2);
    var initialCY = initialBounds.y + (initialBounds.height / 2);

    var dX = (initialSizes.width / 2) - initialCX;
    var dY = (initialSizes.height / 2) - initialCY;

  customPanByZoomAtEnd({x: dX, y: dY}, 2, 700);
}

关键在于计算视口宽度中心与中心之间的差异.距panZoomInstance.getSizes()的高度和目标元素的客户端边界矩形的中心.

The key was in calculating the difference between the center of the viewport width & height from panZoomInstance.getSizes() and the center of the target element's client bounding rectangle.

现在，问题是尝试制作动画缩放.现在，我已经在平移动画的末尾使用命令将其缩放到指定位置，并设置了一些CSS以使缩放平滑过渡.一段时间后，css将被删除，因此正常的缩放和平移不受影响.在我尝试使缩放动画成为步进动画时，它总是看起来会缩放到超过预期的最大点.

Now the issue is trying to make an animated zoom. For now I've made it do a zoom to a specified location with a command at the end of the panning animation and set some css to make the zoom a smooth transition. The css gets removed after some time interval so normal zooming and panning isn't affected. In my attempts to make the zoom a step animation it always appeared to zoom past the intended max point.

这篇关于svg-pan-zoom平移/缩放到任何对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！