0

我是 Panzoom 的新手，我正在努力实现一些关键的目标。我有一张 5000 像素 x 3350 像素的地图，我想从 0.25 开始比例。但是，地图以大尺寸初始化，然后居中并减小到 0.25，使其离开屏幕。我通过自定义原点设置来解决这个问题，根据地图大小和屏幕大小将它们设为负值，这很有效。问题是，当我从那里放大时，它会从那些初始负值放大，即使我transformOrigin在点击时添加了选项。我一直在尝试许多不同的设置，但效果有限。下面是我到目前为止的代码，这是我的问题：

  1. 如何重置 transformOrigin 以便在初始设置缩放后从视口中心平滑地进行所有缩放？
  2. 如何设置动量滚动，以便当您释放平底锅时，元素会继续移动一小段距离？
  3. 在哪里可以找到带有示例代码的 pan.zoom 的所有选项？

感谢您在这里的任何帮助。

var scale = 0.25.  

var w_width = $(window).width()
var m_width = $("#map_cont").width()
var new_x = (w_width - (m_width * scale)) / 2
var w_height = $(window).height()
var m_height = $("#map_cont").height()
var new_y = (w_height - (m_height * scale)) / 2

const elem = document.getElementById('map_cont')
const panzoom = Panzoom(elem, {
    maxScale        : 1.25,
    minScale        : 0.25,
    smoothScroll    : true,
    origin : new_x+'px '+new_y+'px'
})

panzoom.pan(100, 100)
panzoom.zoom(scale, { animate: true })

$(".zoom_plus").on("click",function(){
    panzoom.zoomIn({ 
        animate         : true,
        transformOrigin : {x: 0.5, y: 0.5},
        increment       : 0.6
    });
    //panzoom.setTransformOrigin({x: 0.5, y: 0.5})
});

$(".zoom_minus").on("click",function(){
    //panzoom.setTransformOrigin({x: 0.5, y: 0.5})
    panzoom.zoom(0.25, { 
        animate: true,
        transformOrigin : {x: 0.5, y: 0.5}
    });
});
4

0 回答 0