Question

我有一个画布，我可以使用鼠标绘制矩形。

我希望用户能够在同一画布上绘制多个矩形。在所有＆＃39;绘制矩形鼠标＆＃39;我找到的例子，你通常会用clearRect（0,0，canvas.width，canvas.height）清除整个画布，但是因为我想能够绘制多个rects，所以我将它改为canvas.clearRect（start.x），start.y，end.x-start.x，end.y-start.y）。

问题是，如果你做任何快速的moes就像再次在Windows 95上。矩形没有得到妥善清理。

您可以在此处查看代码和问题： http://jsfiddle.net/2r5n1rmL/

正如你所看到的，我试图为clearrect添加一些额外的东西，这有点帮助，但还不够

draw.clearRect(start.x-5, start.y-5, w+10, h+10);

我如何解决这个问题？

谢谢

Answer 1

首先，绘制一个矩形有一个开始和一个结束。单击时，开始绘图。释放鼠标按钮时，绘图停止。

其次，您应该从最小x和最小y开始绘制一个矩形。所以，我相信你应该有一面旗帜知道你是否在画画：

var amIDrawing = false;

然后，您应该在画布上附加onmousedown，这将是这样的函数：

function mousePressed(e) {
    amIDrawing = true;
}

并且您必须确认附加到您的画布上的onmouseup，这将是这样的函数：

function mouseReleased(e) {
    amIDrawing = false;
}

最后，您应该在画布上附加onmousemove，这将是这样的函数：

function mouseMoved(e) {
    //Clear previous rectangle if needed
    //draw new rectangle
}

请注意，在mousePressed中，您需要存储坐标，并且需要将这些坐标与移动鼠标时收到的坐标配对，以了解需要显示的新矩形。

Answer 2

我也有这个，所以我所做的不是清除那个特定的矩形，而是将矩形的所有位置存储在一个数组中并更新这些单独的位置，并在每次鼠标移动时重新绘制所有位置。

var can = document.getElementById("can");
var cont = can.getContext("2d");
var isCon = false;
var shapes = [];
var cur = 0;

cont.canvas.width = window.innerWidth;
cont.canvas.height = window.innerHeight;

function updateFrame() {
  shapes.forEach((el) => {
    cont.strokeRect(el.x1, el.y1, el.x2 - el.x1, el.y2 - el.y1);
  });
}

can.addEventListener("pointerdown", function (e) {
  isCon = true;
  shapes.push({
    x1: e.clientX - can.offsetLeft,
    y1: e.clientY - can.offsetTop,
    x2: e.clientX - can.offsetLeft,
    y2: e.clientY - can.offsetTop,
  });
});

can.addEventListener("pointermove", function (e) {
  if (isCon) {
    cont.clearRect(0, 0, can.width, can.height);
    shapes[cur].x2 = e.clientX - can.offsetLeft;
    shapes[cur].y2 = e.clientY - can.offsetTop;
    requestAnimationFrame(updateFrame);
  }
});

can.addEventListener("pointerup", function (e) {
  isCon = false;
  cur += 1;
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0px;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body id="body">
    <canvas id="can"></canvas>
  </body>
</html>

用鼠标在画布上绘制多个形状 - 在快速移动时不清晰

2 个答案: