撤消画布上的选定形状

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