撤消畫布上的選定形狀

Question

我想在畫布上畫一個特殊的形狀。 我已經實現了一個畫布，我們可以在其上使用鼠標事件繪制矩形，圓形，直線，橢圓形等形狀。 我已經創建了一個下拉列表，其中列出了我在畫布上繪制的所有形狀。 下拉列表由圓形，矩形，平行四邊形，橢圓形，圓形等形狀組成。現在，例如，我想要繪制2個矩形和2個圓形。 當我從下拉列表中選擇圓形並單擊“撤消”按鈕時，它應僅撤消圓，如果我從下拉列表中選擇矩形，然后單擊“撤消”按鈕，則應僅撤消矩形而不是其他形狀的代碼我在畫布上用於撤消的是：

function cPush() 
{
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    cStep++;
    if (cStep < cPushArray.length) 
    { 
        cPushArray.length = cStep; 
    }
    cPushArray.push(document.getElementById('drawingCanvas').toDataURL());
}
function cUndo()
{
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    context.clearRect(0,0,canvas.width, canvas.height);
    if (cStep > 0) 
    {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep]; 
        context.drawImage(canvasPic, 0, 0); 
    }
}

Answer 1

如何“撤消”（刪除指定的形狀並重繪其余形狀）

演示： http : //jsfiddle.net/m1erickson/9pTJ2/

創建一個數組來保存所有形狀定義：

    var drawings=[];

向數組添加形狀：

    function addShape(shapename,color){
        drawings.push({
            shape:shapename,
            color:color
        });
        drawAll();
    }

要“撤消”，請從數組中刪除指定形狀的所有元素：

    function undoShape(shapename){
        var i=drawings.length-1;
        while(i>=0){
            if(drawings[i].shape==shapename){
                drawings.splice(i,1);
            }
            i--;
        }
        drawAll();
    }

這是代碼：

[建議使用@enhzflep的方法]

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    var shapeWidth=30;
    var shapeHeight=30;
    var spacer=5;
    var drawings=[];

    function addShape(shapename,color){
        drawings.push({
            shape:shapename,
            color:color
        });
        drawAll();
    }

    function undoShape(shapename){
        var i=drawings.length-1;
        while(i>=0){
            if(drawings[i].shape==shapename){
                drawings.splice(i,1);
            }
            i--;
        }
        drawAll();
    }

    function drawAll(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<drawings.length;i++){
            var drawing=drawings[i];
            var x=i*shapeWidth;
            var y=50;
            switch(drawing.shape){
                case "rectangle":
                    drawRectangle(x,y,drawing.color);
                    break;
                case "circle":
                    drawCircle(x,y,drawing.color);
                    break;
            }
        }
    }


    function drawContainer(x,y){
        ctx.strokeStyle="lightgray";
        ctx.strokeRect(x,y,shapeWidth,shapeHeight);
    }

    function drawRectangle(x,y,color){
        drawContainer(x,y);
        ctx.fillStyle=color;
        ctx.fillRect(x+spacer,y+spacer,shapeWidth-2*spacer,shapeHeight-2*spacer);
    }

    function drawCircle(x,y,color){
        drawContainer(x,y);
        ctx.beginPath();
        ctx.arc(x+shapeWidth/2,y+shapeHeight/2,shapeWidth/2-spacer,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=color;
        ctx.fill();
    }

    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }

    $("#rect").click(function(){
        addShape("rectangle",randomColor());
    });
    $("#circle").click(function(){
        addShape("circle",randomColor());
    });
    $("#norect").click(function(){
        undoShape("rectangle");
    });
    $("#nocircle").click(function(){
        undoShape("circle");
    });

}); // end $(function(){});
</script>

</head>

<body>
    <button id="rect">Add Rect</button>
    <button id="circle">Add Circle</button>
    <button id="norect">Erase Rects</button>
    <button id="nocircle">Erase Circles</button>
    <canvas id="tools" width=300 height=40></canvas><br>
    <canvas id="erasers" width=300 height=40></canvas><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

撤消畫布上的選定形狀

問題描述

1 個解決方案

解決方案1
0 2014-01-17 18:44:09

撤消畫布上的選定形狀

問題描述

1 個解決方案

解決方案1 0 2014-01-17 18:44:09

解決方案1
0 2014-01-17 18:44:09