如何在放大和缩小时处理当前数据

Question

当鼠标滚轮滚动时，如何确保图表线画布可以通过鼠标位置进行放大和缩小？

在我的图表线画布中，我没有使用chart.js、d3.js或其他库。我希望它可以围绕鼠标位置放大和缩小，但值会随着放大和out.How而变化，以确保中心点-鼠标位置-不会受到坐标系变化的影响。

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]);


});