svg-pan-zoom pan / zoom для любого объекта

Question

Я использую код svg-pan-zoom https://github.com/ariutta/svg-pan-zoom, чтобы создать карту SVG, теперь пришло время добавить функцию панорамирования и масштабирования к художественному компоненту SVG насобытие клика.Тем не менее, я не уверен, как использовать функцию panBy () для перехода к нужному элементу svg art: я пытался использовать getBBox () в группе, к которой я ищу панорамирование, и использовать ее с panZoomInstance.getPan.() и getSizes (), но мои эксперименты не удаются.Я хотел бы выполнить тот же король анимации, что и в их примере (http://ariutta.github.io/svg-pan-zoom/demo/simple-animation.html), но центрировать область просмотра относительно элемента.

Answer 1

Несмотря ни на что, я смог разобраться в этой части!

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() и центромограничивающий прямоугольник клиента целевого элемента.

Теперь проблема пытается создать анимированный зум.Пока что я сделал масштабирование до указанного места с помощью команды в конце анимации панорамирования и установил несколько CSS, чтобы сделать масштабирование плавным переходом.Через некоторое время CSS удаляется, поэтому нормальное масштабирование и панорамирование не затрагиваются.В моих попытках сделать масштабирование пошаговой анимацией всегда казалось, что масштабирование превышает предполагаемую максимальную точку.