基于CreateJS与Canvas实现位图拖拽等比缩放的技术求助

嘿，我之前刚好做过Canvas图片的边角等比缩放功能，给你一套完整的实现方案和代码示例吧！

要完成这个功能，我们需要做到这几点：

• 监听鼠标的mousedown、mousemove、mouseup事件，判断用户是点击了边角、拖拽移动还是松开鼠标
• 给图片的四个边角定义「可点击区域」（比如20px×20px的范围），触发缩放逻辑
• 缩放时严格按照图片的原始宽高比计算新尺寸，避免拉伸变形
• 根据拖拽的边角不同，调整图片的位置（比如拖拽左上角时，图片位置和尺寸都会变；拖拽右下角时只变尺寸）

HTML部分 #

<canvas id="designCanvas" width="800" height="600" style="border:1px solid #ccc;"></canvas>
<input type="file" id="imageUpload" accept="image/*">

JavaScript部分 #

const canvas = document.getElementById('designCanvas');
const ctx = canvas.getContext('2d');
const uploadInput = document.getElementById('imageUpload');

// 图片状态变量
let img = null;
let imgX = 100; // 初始X坐标
let imgY = 100; // 初始Y坐标
let imgWidth = 200; // 初始宽度
let imgHeight = 0; // 初始高度（根据宽高比自动计算）
let originalAspectRatio = 0; // 图片原始宽高比

// 鼠标状态变量
let isDragging = false; // 是否正在拖拽移动图片
let isScaling = false; // 是否正在缩放图片
let scaleCorner = null; // 当前拖拽的边角：'tl'左上、'tr'右上、'bl'左下、'br'右下
let startX, startY; // 鼠标按下时的坐标
let startImgX, startImgY; // 鼠标按下时图片的位置
let startImgWidth, startImgHeight; // 鼠标按下时图片的尺寸

// 监听图片上传事件
uploadInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = (event) => {
    img = new Image();
    img.onload = () => {
      // 保存图片原始宽高比
      originalAspectRatio = img.width / img.height;
      // 根据初始宽度计算对应高度
      imgHeight = imgWidth / originalAspectRatio;
      // 绘制画布
      drawCanvas();
    };
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

// 绘制画布内容
function drawCanvas() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!img) return;
  
  // 绘制图片
  ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight);
  
  // 绘制边角可点击区域（调试用，上线可以删掉）
  const cornerSize = 20;
  ctx.strokeStyle = 'blue';
  ctx.strokeRect(imgX - cornerSize/2, imgY - cornerSize/2, cornerSize, cornerSize); // 左上
  ctx.strokeRect(imgX + imgWidth - cornerSize/2, imgY - cornerSize/2, cornerSize, cornerSize); // 右上
  ctx.strokeRect(imgX - cornerSize/2, imgY + imgHeight - cornerSize/2, cornerSize, cornerSize); // 左下
  ctx.strokeRect(imgX + imgWidth - cornerSize/2, imgY + imgHeight - cornerSize/2, cornerSize, cornerSize); // 右下
}

// 判断鼠标是否落在边角可点击区域内
function getHoveredCorner(mx, my) {
  const cornerSize = 20;
  // 左上
  if (mx >= imgX - cornerSize/2 && mx <= imgX + cornerSize/2 &&
      my >= imgY - cornerSize/2 && my <= imgY + cornerSize/2) {
    return 'tl';
  }
  // 右上
  if (mx >= imgX + imgWidth - cornerSize/2 && mx <= imgX + imgWidth + cornerSize/2 &&
      my >= imgY - cornerSize/2 && my <= imgY + cornerSize/2) {
    return 'tr';
  }
  // 左下
  if (mx >= imgX - cornerSize/2 && mx <= imgX + cornerSize/2 &&
      my >= imgY + imgHeight - cornerSize/2 && my <= imgY + imgHeight + cornerSize/2) {
    return 'bl';
  }
  // 右下
  if (mx >= imgX + imgWidth - cornerSize/2 && mx <= imgX + imgWidth + cornerSize/2 &&
      my >= imgY + imgHeight - cornerSize/2 && my <= imgY + imgHeight + cornerSize/2) {
    return 'br';
  }
  return null;
}

// 判断鼠标是否落在图片内部（用于拖拽移动）
function isInsideImage(mx, my) {
  return mx >= imgX && mx <= imgX + imgWidth && my >= imgY && my <= imgY + imgHeight;
}

// 鼠标按下事件处理
canvas.addEventListener('mousedown', (e) => {
  if (!img) return;
  
  // 转换鼠标坐标为画布内部坐标
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  
  // 判断是否点击了边角
  scaleCorner = getHoveredCorner(mx, my);
  if (scaleCorner) {
    isScaling = true;
    // 保存缩放前的初始状态
    startX = mx;
    startY = my;
    startImgX = imgX;
    startImgY = imgY;
    startImgWidth = imgWidth;
    startImgHeight = imgHeight;
  } else if (isInsideImage(mx, my)) {
    // 点击了图片内部，触发拖拽移动
    isDragging = true;
    startX = mx;
    startY = my;
    startImgX = imgX;
    startImgY = imgY;
  }
});

// 鼠标移动事件处理
canvas.addEventListener('mousemove', (e) => {
  if (!img) return;
  
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  
  // 动态切换鼠标样式，提升用户体验
  if (getHoveredCorner(mx, my)) {
    canvas.style.cursor = 'nwse-resize'; // 边角缩放光标
  } else if (isInsideImage(mx, my)) {
    canvas.style.cursor = 'move'; // 移动光标
  } else {
    canvas.style.cursor = 'default'; // 默认光标
  }
  
  // 处理缩放逻辑
  if (isScaling) {
    const deltaX = mx - startX;
    const deltaY = my - startY;
    let newWidth, newHeight, newX, newY;
    
    // 根据不同边角执行不同的缩放逻辑
    switch(scaleCorner) {
      case 'br':
        // 右下：保持左上位置不变，缩放宽高
        newWidth = startImgWidth + deltaX;
        newHeight = newWidth / originalAspectRatio;
        // 限制最小尺寸，避免缩到消失
        newWidth = Math.max(50, newWidth);
        newHeight = Math.max(50, newHeight);
        newX = startImgX;
        newY = startImgY;
        break;
      case 'tl':
        // 左上：同时调整位置和尺寸
        newWidth = startImgWidth - deltaX;
        newHeight = newWidth / originalAspectRatio;
        newWidth = Math.max(50, newWidth);
        newHeight = Math.max(50, newHeight);
        newX = startImgX + deltaX;
        newY = startImgY + deltaY;
        // 防止图片位置异常（可选）
        newX = Math.min(newX, startImgX + startImgWidth - newWidth);
        newY = Math.min(newY, startImgY + startImgHeight - newHeight);
        break;
      case 'tr':
        // 右上：调整X位置，保持顶部Y不变
        newWidth = startImgWidth + deltaX;
        newHeight = newWidth / originalAspectRatio;
        newWidth = Math.max(50, newWidth);
        newHeight = Math.max(50, newHeight);
        newX = startImgX + (startImgWidth - newWidth);
        newY = startImgY;
        break;
      case 'bl':
        // 左下：调整Y位置，保持左侧X不变
        newHeight = startImgHeight + deltaY;
        newWidth = newHeight * originalAspectRatio;
        newWidth = Math.max(50, newWidth);
        newHeight = Math.max(50, newHeight);
        newX = startImgX;
        newY = startImgY + (startImgHeight - newHeight);
        break;
    }
    
    // 更新图片状态并重新绘制
    imgX = newX;
    imgY = newY;
    imgWidth = newWidth;
    imgHeight = newHeight;
    drawCanvas();
  } else if (isDragging) {
    // 处理拖拽移动逻辑
    imgX = startImgX + (mx - startX);
    imgY = startImgY + (my - startY);
    drawCanvas();
  }
});

// 鼠标松开事件处理
canvas.addEventListener('mouseup', () => {
  isDragging = false;
  isScaling = false;
  scaleCorner = null;
});

// 鼠标离开画布事件处理（防止拖拽到画布外后无法停止）
canvas.addEventListener('mouseleave', () => {
  isDragging = false;
  isScaling = false;
  scaleCorner = null;
});

• 边角可点击区域：我们给每个边角设置了20px的触发范围，你可以修改cornerSize调整大小，范围越大越容易点击。
• 宽高比锁定：图片加载时就保存了原始宽高比，所有缩放操作都基于这个比例计算，确保图片不会变形。
• 边角差异化逻辑：不同边角的缩放行为符合用户直觉——比如拖拽右下角只会放大/缩小图片，拖拽左上角则会同时移动和缩放。
• 最小尺寸限制：设置了50px的最小宽高，避免图片被缩到看不见，你可以根据需求调整这个值。
• 光标反馈：根据鼠标位置动态切换光标样式，让用户清楚当前可以执行什么操作，提升交互体验。

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