SVG Pan Zoom Library - 如何提高缩放灵敏度?

问题描述 投票:0回答:0

参考 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>
javascript html jquery css arrays
© www.soinside.com 2019 - 2024. All rights reserved.