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


});

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

1 个答案: