[英]svg-pan-zoom pan/zoom to any object
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. 我正在使用svg-pan-zoom代码https://github.com/ariutta/svg-pan-zoom制作某种svg地图,现在是时候添加用于平移和缩放艺术的功能了点击事件中svg的组件。 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.
但是,我不确定如何使用panBy()函数获取所需的svg艺术作品:我尝试在要平移的组上使用getBBox()并将其与panZoomInstance.getPan一起使用()和getSizes()信息,但我的实验无法完成。 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.
我想完成与示例相同的动画之王( http://ariutta.github.io/svg-pan-zoom/demo/simple-animation.html ),但将视口居中放置在该项目上。
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);
}
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. 关键在于计算
panZoomInstance.getSizes()
中的视口宽度和高度的中心与目标元素的客户端边界矩形的中心之间的差。
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.
现在,我已经在平移动画的末尾使用命令将其缩放到指定位置,并设置了一些CSS以使缩放平滑过渡。 The css gets removed after some time interval so normal zooming and panning isn't affected.
一段时间后,css将被删除,因此正常的缩放和平移不受影响。 In my attempts to make the zoom a step animation it always appeared to zoom past the intended max point.
在我尝试使缩放成为步进动画时,它总是看起来会超出预期的最大点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.