如何在update()后保留已绘制矩形？绘图应用技术求助

嘿，我来帮你搞定这个矩形覆盖的问题！你现在的核心问题是每次画新矩形时没有保留之前的绘制状态，直接覆盖了画布，导致旧矩形消失。下面是具体的解决思路和代码修改方案：

问题根源 #

每次绘制新矩形时，你应该是直接在画布上绘制新图形，但没有先重绘之前已经画好的矩形，加上画布的绘制是"增量覆盖"的（或者你每次绘制前清空了画布但没恢复旧内容），所以旧矩形就被覆盖掉了。

解决步骤 #

1. 新增历史矩形存储数组 #

首先，我们需要一个数组来保存所有已经绘制完成的矩形的参数（比如位置、宽高），这样后续重绘时就能把它们都画出来。

在代码里添加这一行：

const rectangles = []; // 用来存储所有已绘制的矩形信息

2. 修改绘制逻辑：先重绘历史，再画新矩形 #

每次绘制新矩形前，先清空画布，然后遍历存储数组把所有旧矩形重新画一遍，最后再绘制新矩形，并把新矩形加入存储数组。

写一个通用的绘制函数：

function drawRect(newRect) {
  // 先清空整个画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 遍历重绘所有历史矩形
  rectangles.forEach(rect => {
    ctx.strokeStyle = 'black'; // 可以自定义矩形颜色
    ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
  });
  
  // 绘制当前新矩形
  ctx.strokeStyle = 'black';
  ctx.strokeRect(newRect.x, newRect.y, newRect.width, newRect.height);
  
  // 将新矩形存入历史数组，方便下次重绘
  rectangles.push(newRect);
}

3. 调整点击事件的处理逻辑 #

当你通过两次点击确定一个新矩形的对角点后，计算出矩形的正确参数，然后调用上面的drawRect函数，而不是直接在画布上绘制。

完整修改后的代码示例 #

<canvas id="myCanvas" width="500" height="500" style="background: gray;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const rectangles = []; // 存储所有历史矩形
let startPoint = null; // 记录第一次点击的起始点

// 绑定画布点击事件
canvas.addEventListener('click', (e) => {
  // 计算鼠标在画布内的坐标
  const canvasRect = canvas.getBoundingClientRect();
  const x = e.clientX - canvasRect.left;
  const y = e.clientY - canvasRect.top;

  if (!startPoint) {
    // 第一次点击，记录起始点
    startPoint = { x, y };
  } else {
    // 第二次点击，计算矩形参数
    const newRect = {
      x: Math.min(startPoint.x, x), // 取两个点的最小x作为矩形左上角x
      y: Math.min(startPoint.y, y), // 取两个点的最小y作为矩形左上角y
      width: Math.abs(x - startPoint.x), // 矩形宽度
      height: Math.abs(y - startPoint.y) // 矩形高度
    };
    // 调用绘制函数，自动保留历史矩形
    drawRect(newRect);
    // 重置起始点，准备绘制下一个矩形
    startPoint = null;
  }
});

// 统一绘制函数
function drawRect(newRect) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 重绘所有历史矩形
  rectangles.forEach(rect => {
    ctx.strokeStyle = 'black';
    ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
  });
  
  // 绘制新矩形
  ctx.strokeStyle = 'black';
  ctx.strokeRect(newRect.x, newRect.y, newRect.width, newRect.height);
  
  rectangles.push(newRect);
}
</script>

额外说明 #

• 如果你需要给不同的矩形设置不同的颜色，可以在newRect里添加color属性，在绘制时读取这个值即可。
• 后续如果需要删除某个历史矩形，只需要操作rectangles数组，然后重新调用drawRect（或者写一个重绘所有的函数）即可。

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