Canvas图片点击控制按钮缩放后被容器裁剪的修复方案咨询

问题分析 #

你遇到的裁剪问题，本质是当小球放大后的尺寸超过了Canvas容器（或Canvas元素本身）的可视范围，而容器默认的overflow属性为hidden，导致超出部分被裁剪掉了。

解决方案 #

这里提供几种可行的解决思路，你可以根据需求选择：

1. 动态调整Canvas尺寸以适配放大后的小球

这种方法会让Canvas元素的尺寸跟随小球的放大比例变化，确保小球始终能完整显示：

const canvas = document.getElementById('glassesCanvas');
const ctx = canvas.getContext('2d');
let M_GlassesZoom = 1;
const defaultSize = 128;

$('.ZoomGlasses').on("click",function(event) {
  if($(this).hasClass("ZoomGlassesPlus")){
    M_GlassesZoom += 0.2; // 每次放大0.2倍
  } else {
    M_GlassesZoom = Math.max(0.2, M_GlassesZoom - 0.2); // 限制最小缩放比例，避免缩得过小
  }
  
  // 动态调整Canvas尺寸
  const newSize = defaultSize * M_GlassesZoom;
  canvas.width = newSize;
  canvas.height = newSize;
  
  // 重新绘制红色小球
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(newSize/2, newSize/2, newSize/2, 0, Math.PI*2);
  ctx.fillStyle = 'red';
  ctx.fill();
});

注意：如果Canvas有父容器，记得给父容器设置display: inline-block这类自适应样式，避免Canvas尺寸变化导致布局错乱。

2. 保持Canvas尺寸，调整小球绘制位置使其居中显示

如果不想改变Canvas的固定尺寸，可以通过计算偏移量，让放大后的小球始终在Canvas可视区域的中心：

const canvas = document.getElementById('glassesCanvas');
const ctx = canvas.getContext('2d');
const canvasSize = 128; // 固定Canvas尺寸
const defaultBallSize = 128;
let M_GlassesZoom = 1;

$('.ZoomGlasses').on("click",function(event) {
  if($(this).hasClass("ZoomGlassesPlus")){
    M_GlassesZoom += 0.2;
  } else {
    M_GlassesZoom = Math.max(0.2, M_GlassesZoom - 0.2);
  }
  
  const ballSize = defaultBallSize * M_GlassesZoom;
  // 计算偏移量，让小球居中对齐Canvas
  const offsetX = (canvasSize - ballSize) / 2;
  const offsetY = (canvasSize - ballSize) / 2;
  
  ctx.clearRect(0, 0, canvasSize, canvasSize);
  ctx.beginPath();
  // 基于偏移量绘制小球
  ctx.arc(offsetX + ballSize/2, offsetY + ballSize/2, ballSize/2, 0, Math.PI*2);
  ctx.fillStyle = 'red';
  ctx.fill();
});

这种方法下，当小球放大超过Canvas尺寸时边缘仍会被裁剪，但小球始终保持居中状态；如果想要完全查看完整小球，可以结合第三种方法。

3. 给容器添加滚动条，允许用户查看完整小球

如果希望保持Canvas和容器的尺寸不变，同时能看到完整的放大后小球，可以给Canvas的父容器设置滚动属性：

/* 假设Canvas的父容器类是.glass-container */
.glass-container {
  width: 128px;
  height: 128px;
  overflow: auto;
  border: 1px solid #ccc;
}

然后搭配第一种方法动态调整Canvas尺寸，当Canvas尺寸超过容器时，容器会自动出现滚动条，用户可以拖动查看完整的红色小球。

总结 #

如果需要完整显示放大后的小球，优先选择方法1或方法3；如果必须保持Canvas尺寸不变，且只需要居中显示效果，就选择方法2。你可以根据自己的实际需求修改代码～

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