如何为transform缩放设置最大最小限制？禁用负缩放

你只需要在现有代码中添加缩放阈值定义，并在滚轮缩放逻辑里对scale值做范围约束，就能实现需求。以下是修改后的完整代码：

var scale = 1,
    panning = false,
    pointX = 0,
    pointY = 0,
    start = { x: 0, y: 0 },
    zoom = document.getElementById("zoom"),
    // 定义缩放的最小/最大阈值，可根据需求调整
    MIN_SCALE = 0.5,
    MAX_SCALE = 3;

function setTransform() {
    zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}

zoom.onmousedown = function (e) {
    e.preventDefault();
    start = { x: e.clientX - pointX, y: e.clientY - pointY };
    panning = true;
}

zoom.onmouseup = function (e) {
    panning = false;
}

zoom.onmousemove = function (e) {
    e.preventDefault();
    if (!panning) {
        return;
    }
    pointX = (e.clientX - start.x);
    pointY = (e.clientY - start.y);
    setTransform();
}

zoom.onwheel = function (e) {
    e.preventDefault();
    var xs = (e.clientX - pointX) / scale,
        ys = (e.clientY - pointY) / scale,
        delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
    
    // 计算新的缩放比例
    let newScale = delta > 0 ? scale * 1.2 : scale / 1.2;
    // 约束缩放范围：不低于最小值、不高于最大值，同时确保为正数
    scale = Math.max(MIN_SCALE, Math.min(newScale, MAX_SCALE));
    
    pointX = e.clientX - xs * scale;
    pointY = e.clientY - ys * scale;

    setTransform();
}

关键修改说明 #

• 新增MIN_SCALE和MAX_SCALE常量，你可以根据实际需求调整数值（比如把最小缩放设为0.3，最大设为5）
• 在滚轮事件中，先计算出未受限制的新缩放值newScale，再用Math.max和Math.min将其约束在设定的区间内，从根源上禁用了负缩放（因为MIN_SCALE设为正数）
• 保持了原有的拖拽和缩放中心点逻辑，缩放时依然以鼠标位置为中心，体验不受影响

内容的提问来源于stack exchange，提问作者Tasbir