Как я могу показать, как будет выглядеть прямоугольник пользователя?

Question

Я пытаюсь нарисовать прямоугольник на холсте щелчком мыши, движением мыши и другим щелчком. Как я должен следовать за курсором пользователя после первого щелчка и отображать предварительный просмотр заполненного прямоугольника на холсте того, как будет выглядеть форма в любой заданной координате.

До сих пор я мог успешно создать прямоугольник, не показывая, как будет выглядеть прямоугольник в любой координате.

Вот код до сих пор:

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); 
}); 

Обратите внимание, как мы храним данные изображения в мыши вниз события и извлечения он на каждом перемещении мыши