Canvas矩形缩放功能优化咨询：鼠标滚轮驱动的缩放实现问题

问题描述 #

在Canvas中实现多个矩形的滚轮缩放（Zoom In/Zoom Out）功能，当前逻辑是滚动滚轮时先根据鼠标位置移动矩形，再调整宽高重绘，但存在以下问题：

• 矩形重叠（鼠标位于矩形内部）时，缩放逻辑完全失效
• 固定步长调整位置和尺寸，缩放比例不一致，整体效果不流畅

现有代码的核心问题 #

1. 位置调整逻辑不完整：仅处理了矩形完全在鼠标左侧/右侧、上方/下方的情况，当鼠标落在矩形内部时，没有对应的位置更新逻辑，导致重叠时缩放失效。
2. 固定步长缩放不自然：使用固定的zoomStep=10调整尺寸和位置，缩放比例随矩形大小变化，无法保证均匀的缩放体验，还可能导致矩形尺寸变为负数。

改进思路与实现方案 #

采用基于缩放因子的相对变换，以鼠标位置为缩放原点，对每个矩形进行坐标和尺寸的比例计算，确保无论矩形是否重叠，都能正确且流畅地缩放：

• 使用比例因子替代固定步长：比如每次滚轮滚动时缩放1.1倍（放大）或0.9倍（缩小），保证缩放比例一致。
• 以鼠标位置为原点计算偏移：对每个矩形，先计算其左上角坐标相对于鼠标点的偏移量，将偏移量乘以缩放因子后，再更新矩形的位置；同时将宽高乘以缩放因子。
• 限制最小尺寸：避免缩放后矩形过小或消失。

完整改进代码示例 #

JavaScript 代码 #

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var zoomFactor = 1.1; // 每次缩放的比例因子
var minSize = 20; // 矩形最小宽高限制

canvas.addEventListener('mousedown', function(event) {
  var rect = this.getBoundingClientRect();
  var x = parseInt(event.clientX - rect.left);
  var y = parseInt(event.clientY - rect.top);

  win.push({ x: x, y: y, width: 75, height: 35});
  drawAll();
})

canvas.onmousewheel = function(event) {
  event.preventDefault(); // 阻止页面滚动
  var wheel = event.wheelDelta / 120; // 滚轮方向：正为放大，负为缩小
  var rect = this.getBoundingClientRect();
  var mouseX = parseInt(event.clientX - rect.left);
  var mouseY = parseInt(event.clientY - rect.top);

  if (wheel < 0) {
    zoom(mouseX, mouseY, 1 / zoomFactor);
  } else {
    zoom(mouseX, mouseY, zoomFactor);
  }
}

var win = [];
win.push({ x: 300, y: 300, width: 75, height: 35 });
win.push({ x: 400, y: 400, width: 75, height: 35 });
drawAll();

function drawAll() {
  ctx.clearRect(0, 0, cw, ch);
  for (var i = 0; i < win.length; i++) {
    var shape = win[i];
    ctx.strokeRect(shape.x, shape.y, shape.width, shape.height);
  }
}

function zoom(mouseX, mouseY, scale) {
  for (var i = 0; i < win.length; i++) {
    var rect = win[i];
    // 计算矩形左上角相对于鼠标点的偏移
    var offsetX = rect.x - mouseX;
    var offsetY = rect.y - mouseY;
    
    // 更新位置：偏移量乘以缩放因子后，加上鼠标坐标
    rect.x = mouseX + offsetX * scale;
    rect.y = mouseY + offsetY * scale;
    
    // 更新尺寸：宽高乘以缩放因子，同时限制最小尺寸
    rect.width = Math.max(minSize, rect.width * scale);
    rect.height = Math.max(minSize, rect.height * scale);
  }
  drawAll();
}

HTML 代码 #

<canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;"></canvas>

改进效果说明 #

• 无论鼠标位于矩形外部、内部还是矩形重叠区域，缩放功能都能正常工作
• 基于比例因子的缩放保证了均匀的缩放体验，视觉效果更流畅
• 最小尺寸限制避免了矩形因过度缩小而消失

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