使用 Canvas 进行绘制和缩放：Canvas 删除先前绘制的形状

编程问答 2022-05-22

问题描述

在这里我得到了一个在画布中绘制图像并缩放它的代码。所以我可以绘制我在给定下拉列表中选择的形状。， 我的问题是如果我选择线并绘制线，然后我选择矩形并绘制矩形，现在先前绘制的线已被删除 从我的画布。，我需要我绘制的所有形状都应该在我的画布中。，我在下面给出了我的完整代码（只需复制并粘贴它 在您的工作空间）， 请帮忙，因为我浪费了过去两天的时间

 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>

 <div id="controls">
    <button id="zoomIn">Zoom In</button>
    <button id="zoomOut">Zoom Out</button>
    <button id="clear">Clear</button>
</div>

  <style type="text/css">
  #container { position: relative; }
  #imageView { border: 1px solid #000; }
  #imageTemp { position: absolute; top: 1px; left: 1px; }
</style>

 <p><label>Drawing tool: <select id="dtool">
     <option value="pencil">Pencil</option>
    <option value="line" selected>Line</option>
    <option value="rect" >Rectangle</option>
   
    <option value="arc">Full Circle</option>
    <option value="lefthalfcircle">Left Half Circle</option>
    <option value="righthalfcircle">Right Half Circle</option>
    
    <option value="Erase">Erase</option>
 </select></label></p>


 <div id="container">
  <canvas id="imageView" width="900" height="400">
    <p>Unfortunately,your browser is currently unsupported by our web
    application.  We are sorry for the inconvenience. Please use one of the
    supported browsers listed below,or draw the image you want using an
    offline tool.</p>
    <p>Supported browsers: <a href="http://www.opera.com">Opera</a>,<a
      href="http://www.mozilla.com">Firefox</a>,<a
      href="http://www.apple.com/safari">Safari</a>,and <a
      href="http://www.konqueror.org">Konqueror</a>.</p>
  </canvas>
 </div>

 
 <script type="text/javascript">//<![CDATA[




 $(document).ready(function () {
 var canvas = document.getElementById("imageView"),paintContext = imageView.getContext("2d"),currentPathIndex = 0,draw = false,paths = [],scale = 1,scaleStep = 0.25,styles = {
        linewidth: 10,strokeStyle: "#000000"
    };

 paintContext.imageSmoothingEnabled = false;
 paintContext.mozImageSmoothingEnabled=false;
 paintContext.webkitimageSmoothingEnabled=false;
 var cvSize = 500;

 var drawCanvas = document.createElement('canvas');
 var drawCtx = drawCanvas.getContext('2d');

 drawCanvas.width = drawCanvas.height = cvSize;
 canvas.width = canvas.height = cvSize;

 var context = drawCtx;

 function updatePaintCanvas() {

        paintContext.clearRect(0,paintContext.canvas.width,paintContext.canvas.height); 
    paintContext.save();
    paintContext.translate(cvSize*0.5,cvSize*0.5);
    paintContext.scale(scale,scale);
    paintContext.drawImage(drawCanvas,-cvSize*0.5,-cvSize*0.5);
    
    paintContext.restore();
        
 }

 
 var canvasRect = canvas.getBoundingClientRect();
var mouse = {
    x: 0,y: 0
 };

 function getCoords(e) {
    mouse.x = e.clientX || e.pageX || 0;
    mouse.y = e.clientY || e.pageY || 0;
    mouse.x -= canvasRect.left;
    mouse.y -= canvasRect.top;
    mouse.x = cvSize*0.5 + (mouse.x - cvSize*0.5)/scale;
    mouse.y = cvSize*0.5 + (mouse.y - cvSize*0.5)/scale;
}

function applyStyles(context,styles) {
    for (var style in styles)
    context[style] = styles[style];
};

function reDrawHistory() {
    context.clearRect(0,context.canvas.width,context.canvas.height);
    context.save();
    applyStyles(context,styles);
    scaleFromCenter(context,scale);
    for (var i = 0; i < paths.length; i++) {
        context.beginPath();
        context.moveto(paths[i][0].x,paths[i][0].y);
        for (var j = 1; j < paths[i].length; j++)
        context.lineto(paths[i][j].x,paths[i][j].y);
        context.stroke();
    }
    context.restore();
}

function zoom(context,paths,styles,scale) {

};

$("#clear").on("click",function () {
    paths = [];
    currentPathIndex = 0;
    context.clearRect(0,context.canvas.height);
});

$("#zoomIn").on("click",function () {
    scale += scaleStep;
    updatePaintCanvas();
});

$("#zoomOut").on("click",function () {
    scale -= scaleStep;
    updatePaintCanvas();
});

$("#imageView").on("mousedown",function (e) {
   tool=document.getElementById("dtool").value;
    getCoords(e);
    draw = true;
    context.save();
    applyStyles(context,styles);
    context.beginPath();
    context.moveto(mouse.x,mouse.y);
    updatePaintCanvas();
    Startx=mouse.x;
    Starty=mouse.y;
    
    // save the path to memory
    if (typeof paths[currentPathIndex] == 'undefined') paths[currentPathIndex] = [];

    paths[currentPathIndex].push({
        x: mouse.x,y: mouse.y
    })

});

$("#imageView").on("mousemove",function (e) {
    
    getCoords(e);
    if (draw) {
         context.linewidth = 1;
         context.strokeStyle = "#000";
         //context.clearRect(0,canvas.width,canvas.height);
        console.log(tool)
         context.clearRect(0,drawCanvas.width,drawCanvas.height);
        if(tool=='line'){ 
      context.beginPath();
  context.moveto(Startx,Starty);
  context.lineto(mouse.x,mouse.y);
  context.stroke();

  
  }else if(tool=='rect'){
            context.beginPath();

 context.rect(Startx,Starty,mouse.x,mouse.y);

 context.stroke();


 }else{
        context.lineto(mouse.x,mouse.y);
        context.stroke();
                   
      
        }
         context.save();
         updatePaintCanvas();
          paths[currentPathIndex].push({
            x: mouse.x,y: mouse.y
        })
        
    }
});

 $("#imageView").on("mouseup",function (e) {
    draw = false;
   // context.restore();
    currentPathIndex++;
    updatePaintCanvas();
    
 });



 });


 //]]></script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlhtml5-canvasjavascript