如何在 mousemove html 画布上绘制矩形时显示矩形

Question

如何在 mousemove html 画布上绘制矩形时显示矩形

Mor*_*yie 2 javascript rectangles html5-canvas

我试图让用户使用鼠标在画布上绘制矩形，并且我已经能够在一定程度上使其工作。用户可以使用鼠标绘制矩形，但它仅在 mouseup 事件之后显示，但我也希望用户在鼠标移动事件上绘制矩形时也能看到矩形。我怎样才能实现这一点，同时让用户绘制多个当前有效的矩形，但我希望他们在绘制矩形时看到它。

<!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>
    #container {
      /*background-color: lime;*/
      width: 150px;
      height: 150px;
      cursor: pointer;
    }
    
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
    
    #heatmapContainer {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div class="heatmapWrapper">
    <div id="heatmapContainer" style="height: 4205px; width: 1278px">
      <div id="heatmap1" class="heatmapTile" style="height: 4205px; position: relative">
        <canvas id="myCanvas" class="heatmap-canvas" width="1278" height="4205" style="position: absolute; left: 0px; top: 0px"></canvas>
      </div>
    </div>
  </div>
  <script>
    var canvas = document.getElementById('myCanvas'),
      elemLeft = canvas.offsetLeft,
      elemTop = canvas.offsetTop,
      context = canvas.getContext('2d');

    let start = {};
    var mouseDown = false;

    function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect(),
        scaleX = canvas.width / rect.width,
        scaleY = canvas.height / rect.height;

      return {
        x: (evt.clientX - rect.left) * scaleX,
        y: (evt.clientY - rect.top) * scaleY,
      };
    }

    function startRect(e) {
      start = getMousePos(canvas, e);
      mouseDown = true;
    }

    window.addEventListener('mousedown', startRect);

    function endRect(e) {
      let {
        x,
        y
      } = getMousePos(canvas, e);
      context.strokeStyle = 'blue';
      context.strokeRect(start.x, start.y, x - start.x, y - start.y);
      mouseDown = false;
    }

    function drawSquare(e) {
      if (!mouseDown) return;
      // creating a square
      var width = Math.abs(start.x - canvas.getBoundingClientRect().offsetLeft);
      var height = Math.abs(start.y - canvas.getBoundingClientRect().offsetLeft);

      context.beginPath();
      context.rect(start.x, start.y, width, height);
      context.strokeStyle = 'blue';

      context.stroke();
    }

    window.addEventListener('mouseup', endRect);

    window.addEventListener('mousemove', drawSquare);
    /**End Drawing a rectangle on the canvas **/
  </script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Hel*_*eda 5

我们需要做一些不同的事情，我们需要将矩形添加到数组中，而不是动态绘制，然后清理画布并按需绘制它们，这样我们还可以绘制其他元素，在下面的示例中我画了一个红色移动时为矩形，释放鼠标后为蓝色

var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d')

let start = {}
let rects = [{x: 9, y: 9, width: 50, height: 30}]

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect()
  return {
    x: (evt.clientX - rect.left) * canvas.width / rect.width,
    y: (evt.clientY - rect.top) * canvas.height / rect.height,
  };
}

function startRect(e) {
  start = getMousePos(canvas, e);
}

function endRect(e) {
  let { x, y } = getMousePos(canvas, e)
  rects.push({x: start.x, y: start.y, width: x - start.x, height: y - start.y})
  start = {}
  draw()
}

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height)
  rects.forEach(rect => {
    context.beginPath();
    context.rect(rect.x, rect.y, rect.width, rect.height);
    context.strokeStyle = 'blue';
    context.stroke();
  }); 
}

function drawMove(e) {
  if (start.x) {
    draw()
    let { x, y } = getMousePos(canvas, e)
    context.beginPath();
    context.rect(start.x, start.y, x - start.x, y - start.y);
    context.strokeStyle = 'red';
    context.stroke();
    context.beginPath();
    context.arc(start.x, start.y, 5, 0, 2 * Math.PI);
    context.fill();
    context.beginPath();
    context.arc(x, y, 5, 0, 2 * Math.PI);
    context.fill();
  }
}
draw()

window.addEventListener('mouseup', endRect)
window.addEventListener('mousedown', startRect)
window.addEventListener('mousemove', drawMove)

Run Code Online (Sandbox Code Playgroud)

canvas { border: solid }

Run Code Online (Sandbox Code Playgroud)

<canvas id="myCanvas" width="400" height="400"></canvas>

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，1 月前
查看次数：	959 次
最近记录：	3 年，1 月前