사용자의 사각형이 어떻게 보이는지 어떻게 표시합니까?

Question

캔버스에 클릭, 마우스 이동 및 다른 클릭으로 사각형을 그리려합니다. 첫 번째 클릭 후 사용자의 커서를 따라 가서 주어진 좌표에서 모양이 어떻게 보이는지 캔버스에 채워진 사각형의 미리보기를 표시하려면 어떻게해야합니까?

지금까지 모든 좌표에서 사각형이 어떻게 보이는지 보여주지 않고도 사각형을 성공적으로 만들 수 있습니다. 여기

지금까지 코드 :이 HTML5 튜토리얼 ( http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/)에서 본 바와 같이 나는, 마우스 움직임에 이벤트 리스너를 사용하려고

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

,하지만 난 그것을 연결하는 방법을 확실 해요 기존 코드.

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

통지 및 검색 :
는 여기서, 일부 최적화 (아마도 단지 당신이 그릴 계획하고 영역을 캡처)가 필요 귀하의 코드를 기반으로 내 빠른 구현입니다 각 마우스 이동시