我试着撤消在画布上绘制的特定形状

我想撤消在画布上绘制的选定形状。以下是我正在实施的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

我试着撤消在画布上绘制的特定形状

回答

相关问题