繪制矩形而不清除畫布？（事件監聽器？）

Question

我對javascript很陌生。 我試圖使用戶能夠繪制自己的對象，並且在網上找到了一個包含鉛筆和矩形工具的腳本。 每次在使用矩形工具時移動鼠標時，都會清除畫布。

我試圖通過在第一個畫布上添加第二個畫布來解決此問題，但是它不起作用，老實說，我也不知道為什么。

這是我當前的腳本版本： http : //jsfiddle.net/Scilens/mACuK/

我認為為canvas2添加事件偵聽器將有所幫助，但顯然這可以：

canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);
canvas2.addEventListener('mousedown', ev_canvas, false);
canvas2.addEventListener('mousemove', ev_canvas, false);
canvas2.addEventListener('mouseup',   ev_canvas, false);

這不是正確的方法嗎？ 那是問題嗎？ 我還要怎么辦？ = /我已經為此苦苦掙扎了很長一段時間，所以如果您能幫助我，我將非常高興！

Answer 1

您可以使用臨時繪圖畫布覆蓋永久畫布

通用程序為：

創建包含您完成的圖紙的“永久”畫布
創建一個“臨時”畫布，用戶可以在其上繪制新圖紙（可擦除）
最初，使用CSS將臨時畫布移出屏幕
當用戶按下鼠標時，使用CSS將臨時畫布移到永久畫布的頂部
當用戶拖動以繪制（mousemove）時，在臨時畫布上繪制
當用戶釋放鼠標（鼠標）時，在永久畫布上繪制最后一個矩形
並將臨時畫布移出屏幕

MOUSEDOWN：

保存鼠標的起始位置（== context，rect的x，y）
將臨時畫布移到永久畫布的頂部

設置isDown標志以指示繪圖已開始

 function handleMouseDown(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousedown stuff here startX=mouseX; startY=mouseY; ctx2.clearRect(0,0,canvas2.width,canvas2.height); $("#canvas2").css({ left:0, top:0 }); isDown=true; }

鼠標移動：

清除臨時畫布（不會刪除永久畫布）

從起始XY到當前鼠標位置在臨時畫布上繪制矩形

 function handleMouseMove(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousemove stuff here ctx2.clearRect(0,0,canvas2.width,canvas2.height); drawRect(mouseX,mouseY,ctx2); }

鼠標松開：

將臨時畫布移出屏幕
在永久畫布上繪制用戶的最終矩形

繪制完成后清除isDown標志

 function handleMouseUp(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mouseup stuff here isDown=false; $("#canvas2").css({ left:-500, top:0 }); drawRect(mouseX,mouseY,ctx); }

這是代碼和小提琴： http : //jsfiddle.net/m1erickson/puk8A/

<!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; }
    #wrapper{
        position:relative;
        width:300px;
        height:200px;
    }
    #canvas{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas2{
        position:absolute; top:0px; left:0px;
        border:3px solid red;
        width:100%;
        height:100%;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvas2=document.getElementById("canvas2");
    var ctx2=canvas2.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    $("#canvas2").css({ left:-500, top:0 });

    function drawRect(toX,toY,context){
        context.beginPath();
        context.rect(startX,startY,toX-startX,toY-startY);
        context.stroke();
    }


    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      startX=mouseX;
      startY=mouseY;
      ctx2.clearRect(0,0,canvas2.width,canvas2.height);
      $("#canvas2").css({ left:0, top:0 });
      isDown=true;
    }

    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isDown=false;
      $("#canvas2").css({ left:-500, top:0 });
      drawRect(mouseX,mouseY,ctx);
    }

    function handleMouseOut(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mouseup stuff here
      isDown=false;
      $("#canvas2").css({ left:-500, top:0 });
      drawRect(mouseX,mouseY,ctx);

    }

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      ctx2.clearRect(0,0,canvas2.width,canvas2.height);
      drawRect(mouseX,mouseY,ctx2);

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

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

</head>

<body>
    <p>Drag to draw a rect</p>
    <div id="wrapper">
        <canvas id="canvas2" width=300 height=200></canvas>
        <canvas id="canvas" width=300 height=200></canvas>
    </div>
</body>
</html>

繪制矩形而不清除畫布？（事件監聽器？）

問題描述

1 個解決方案

解決方案1
1 已采納 2013-08-13 06:08:44

繪制矩形而不清除畫布？ （事件監聽器？）

問題描述

1 個解決方案

解決方案1 1 已采納 2013-08-13 06:08:44

繪制矩形而不清除畫布？（事件監聽器？）

解決方案1
1 已采納 2013-08-13 06:08:44