我試着撤消在畫布上繪製的特定形狀

我想撤消在畫布上繪製的選定形狀。以下是我正在實施的JavaScript代碼 //行 function line（） canvas = document.getElementById（「drawingCanvas」）; context = canvas.getContext（「2d」）; canvas.onmousedown = startLine; canvas.onmouseup = drawLine; canvas.onmouseout = stopLine;我試着撤消在畫布上繪製的特定形狀

}; 
function startLine(e) 
{ 
    isLine = true; 
    context.beginPath(); 
    context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop); 
} 

function drawLine(e) 
{ 
    if (isLine==true) 
    { 
     var x = e.pageX - canvas.offsetLeft; 
     var y = e.pageY - canvas.offsetTop; 
     context.lineTo(x ,y); 
     context.stroke(); 
     context.closePath(); 
     cPush(); 

    } 
} 
function stopLine() 
{ 
    isLine = false; 
} 

//RECTANGLE 

function rectangle() 
{ 
    canvas = document.getElementById("drawingCanvas"); 
    context = canvas.getContext("2d"); 
    canvas.onmousedown = startRectangle; 
    canvas.onmouseup = drawRectangle; 
    canvas.onmouseout = stopRectangle; 
}; 

function startRectangle(e) 
{ 
    isRectangle = true; 
    x = e.pageX - canvas.offsetLeft; 
    y= e.pageY - canvas.offsetTop; 
    context.beginPath() 
    context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);  
} 
function drawRectangle(e) 
{ 
    if (isRectangle==true) 
    { 
     a= e.pageX - canvas.offsetLeft; 
     b= e.pageY - canvas.offsetTop; 
     var k = Math.min(x,a); 
     var l=Math.min(y, b); 
     var width=Math.abs(x-a); 
     var height=Math.abs(y-b); 
     context.strokeRect(k, l, width, height); 
     cPush(); 
    } 
} 
function stopRectangle() 
{ 
    isRectangle = false; 
} 
var cPushArray = new Array(); 
var cStep = -1; 
function cPush() 
{ 
    cStep++; 
    if (cStep < cPushArray.length) 
    { 
     cPushArray.length = cStep; 
    } 
    cPushArray.push(document.getElementById("drawingCanvas").toDataURL()); 
} 

function cUndo() 
{ 
    if(cStep > 0) 
    { 
     cStep--; 
     var canvasPic = new Image(); 
     canvasPic.src = cPushArray[cStep]; 
     canvasPic.onload = function() { ctx.drawImage(canvasPic,0,0);} 
    } 
} 
function cRedo() 
{ 
    if(cStep < cPushArray.length-1) 
    { 
     cStep++; 
     var canvasPic = new Image(); 
     canvasPic.src = cPushArray[cStep]; 
     canvasPic.onload = function() {ctx.drawImage(canvasPic,0,0);} 
    } 
}

這裏我使用鼠標事件繪製線條和矩形。我用線和矩形作爲選項採用了dropdonw列表。當我選擇線只有行必須撤消，當我選擇矩形只有矩形應該撤消和重做相同。可以請你幫我在這個如何撤消和重做選定的形狀。

在此先感謝。

來源

2014-01-24 user3188826

您不能撤消您在畫布上繪製的任何東西。您只能重繪場景（或區域）。所以你要清除整個畫布，只畫出應該留在那裏的形狀，或者只清除一個區域並恢復需要保留的內容。

我想你應該讓那些在一些JavaScript結構（例如數組）被繪製，這樣你可以重繪要求的一切所有形狀的座標。當某些東西被刪除時 - 將其從結構中移除並重新繪製場景（區域）。

來源

2014-01-24 07:27:18 spaceman

我試着撤消在畫布上繪製的特定形狀

回答

相關問題