如何在放大和縮小時處理當前數據

Question

如何確保當鼠標滾輪滾動時，圖表線的畫布可以用鼠標放大和縮小？

在圖表行的畫布中，我沒有使用chart.js或d3.js或其他庫。我期待它可以放大和縮小鼠標位置，但是這些值會隨着放大和縮小而改變。如何確保中心點 - 鼠標位置 - 不會受到座標系變化的影響。

Answer 1

如果您使用CSS transform屬性scale()，則可以設置另一個稱爲transform-origin的規則。如果在應用scale()之前將其設置爲屏幕中心，則頁面將正確放大。

// performs the change of origin and scales the body element 
zoom(scale, mouse) { 

    return $('body').css('transformOrigin', getMouse(mouse)) 
     .css('transform', 'scale('+scale+')'); 

} 

// returns a string of the current center of screen 
getMouse() { 
    let midX = window.innerWidth/2; 
    let midY = window.innerHeight/2; 
    let x = $('body').css('left').split('p')[0]; 
    let y = $('body').css('top').split('p')[0]; 

    return String(midX - x + 'px ') + String(midY - y + 'px'); 
} 

然後你就可以實現滾動激活與bind()方法：

let scale = 1; 
let scrollFactor = -0.1; 
$(window).bind('wheel mousewheel', function(e){ 

    let scroll = e.originalEvent.deltaY; 
    let sign = Math.sign(scroll); 
    let newScale = Math.round((scale + scrollFactor * sign)*100)/100; 

    // you could set an if statement here before calling zoom() to 
    // set a lower and higher zoom limit 
    zoom(newScale, [e.pageX, e.pageY]); 


});