javascript - 如何显示用户的矩形的外观？

Question

我试图通过单击、移动鼠标​​并再次单击在 Canvas 上绘制一个矩形。我应该如何在第一次单击后跟随用户的光标并在 Canvas 上显示填充矩形的预览，以了解形状在任何给定坐标处的外观。

到目前为止，我可以成功创建矩形，而无需显示矩形在任何坐标处的外观。

这是到目前为止的代码:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var drawingShape = false;

//function getMousePos(canvas, ev) {
//var rect = canvas.getBoundingClientRect();
//}

//canvas.addEventListener('mousemove', function (ev) {
//var mousePos = getMousePos(canvas, ev);
//} 

function setMousePosition(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    $("#downlog").html("Down: " + mouseX + " / " + mouseY);


    if (drawingShape) {
        drawingShape = false;
        ctx.beginPath();
        ctx.fillStyle = "#FF0000";
        ctx.rect(startX, startY, mouseX - startX, mouseY - startY);
        ctx.fill();

    } else {
        drawingShape = true;
        startX = mouseX;
        startY = mouseY;
    }
}

$("#canvas").mousedown(function (e) {
    setMousePosition(e);
});

我尝试使用事件监听器来监听鼠标移动，正如我在 HTML5 教程 ( http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ ) 中看到的那样，但我不确定如何将其与现有代码连接起来。

Answer 1

您可以在开始绘制时存储图像，并在每次想要编辑时重新加载它。
这是我基于您的代码的快速实现，它需要一些优化(也许只捕获您计划绘制的区域):

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;

var startX;
var startY;
var drawingShape = false;
var oldImage;

canvas.addEventListener('mousemove', function(e){
  if(drawingShape){
    ctx.putImageData(oldImage,0,0);
    mouseX = parseInt(e.clientX - offsetX, 10);
    mouseY = parseInt(e.clientY - offsetY, 10);

    ctx.beginPath();
    ctx.fillStyle = "#FF0000";
    ctx.rect(startX, startY, mouseX - startX, mouseY - startY);
    ctx.fill();
  }
});

function setMousePosition(e) {
mouseX = parseInt(e.clientX - offsetX, 10);
mouseY = parseInt(e.clientY - offsetY, 10);
$("#downlog").html("Down: " + mouseX + " / " + mouseY);


  if (drawingShape) {
    drawingShape = false;
    ctx.beginPath();
    ctx.fillStyle = "#FF0000";
    ctx.rect(startX, startY, mouseX - startX, mouseY - startY);
    ctx.fill();

  } else {
    drawingShape = true;
    startX = mouseX;
    startY = mouseY;
    oldImage = ctx.getImageData(0,0,canvas.width,canvas.height);
  }
}

$("#canvas").mousedown(function (e) {
    setMousePosition(e);
});

注意我们如何在鼠标按下事件中存储图像数据并在每次鼠标移动时检索它