参考 https://github.com/bumbu/svg-pan-zoom 上的 SVG Pan Zoom Library,有一个部分用于更快或更慢的缩放。我在下面的代码片段中使用 Pan Functionality 创建了这个放大和缩小,但是放大和缩小不够灵敏,我可以知道如何在 github 中实现上面的示例以提高缩放灵敏度吗?任何帮助将不胜感激:)
好吧,我已经尝试实现这个 zoomScaleSensitivity,但它似乎对增加缩放灵敏度没有影响,这令人失望:)
instance = panzoom(area, {
bounds: false,
zoomScaleSensitivity: 10,
maxZoom: 10.55,
minZoom: 0,
zoomScaleSensitivity:0.8,
zoomDoubleClickSpeed: 1
});
let paths = document.querySelectorAll('path');
// paths is an html collection of all paths;
// attach event listeners to each path;
for (let i=0; i<paths.length; i++) {
paths[i].addEventListener('click', displayAlert);
}
function displayAlert(event) {
alert(event.target.dataset.key)
}
$(".each-row").on("click touchend",function(){
alert("Clicked on "+ $(this).data('name'));
});
var area = document.getElementById('zoomPanCont');
var instance = "";
instance = panzoom(area, {
bounds: false,
zoomScaleSensitivity: 10,
maxZoom: 10.55,
minZoom: 0,
zoomScaleSensitivity:0.8,
zoomDoubleClickSpeed: 1
});
function resetBuilding(){
$(this).instance = panzoom(area, {
bounds: true,
maxZoom: 1.55,
minZoom: 0,
zoomDoubleClickSpeed: 1
}).zoomAbs( 0, 0, 1);
}
$("#btnResetZoom").on("click",function(){
resetBuilding();
});
$("#btnZoomIn").on("click",function(){
instance.smoothZoom(0, 0, 1.25);
});
$("#btnZoomOut").on("click",function(){
instance.smoothZoom(0, 0, 0.8);
});
.main-container {
overflow: hidden;
background: #ccc;
}
.pan-zoom-control {
width: 30px;
height: auto;
position: absolute;
top: 20px;
right: 20px;
font-size: 0;
z-index: 1000;
}
.pan-zoom-control button.btn-reset {
width: 50px;
font-size: 12px;
}
<script src="https://unpkg.com/[email protected]/dist/panzoom.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="main-container">
<div id="zoomPanCont" class="zoompan-container">
<svg id="" data-name="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<path data-key="12345" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 224.34 585.57 L 224.34 586.6 L 225.22 588.68 L 226.1 589.71 L 227.87 590.75 L 231.39 590.75 L 233.15 589.71 L 234.04 588.68 L 234.92 586.6 L 234.92 584.53 L 234.04 582.46 L 232.27 579.35 L 223.46 568.98 L 235.8 568.98 "/>
</svg>
</div>
</div>