前のストロークを削除する（一時行を作成する） - Javascript/HTML5

単純なペイントアプリケーションを作成しようとしていますが、行の開始点を指定した後に行をプレビューするようにします。対応するjavascriptは次のようなものです：前のストロークを削除する（一時行を作成する） - Javascript/HTML5

var Edges = new Array(); 
var Vertecies = new Array(); 
var Mouse = {x:0, y:0} 


function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
} 

function addEdge() { 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 

    var i=0; 
    var Start = { x:0, y:0} 
    var End = { x:0, y:0} 
    var Line = (Start, End); 
    var temp = new Array(); 
    $("#myCanvas").mousemove(function(e){ 
     console.log("mouse is movin!"); 
     if(i==1) 
     { 
      var pos = findPos(this); 
      console.log("I = 1 AHHHH") 
      ctx.moveTo(Start.x, Start.y); 
      ctx.lineTo(e.clientX-pos.x, e.clientY-pos.y); 

      ctx.stroke(); 

     } 
     else{ 

     } 
    }) 


    $("#myCanvas").click(function(event){ 
     var pos = findPos(this); 
     var x = event.pageX - pos.x; 
     var y = event.pageY - pos.y; 
     if (i==0) 
     { 
      Start = {x:x,y:y} 
      i++; 
     } 
     else if(i==1) { 
      End = {x:x,y:y} 
      ctx.moveTo(Start.x , Start.y); 
      ctx.lineTo(End.x , End.y); 
      ctx.stroke(); 
      Line = (Start, End); 
      Edges.push(Line); 
      i++; 
     } 

     while(i==2) { 
      Start = {x:0, y:0}; 
      End = {x:0, y:0}; 
      i=0; 
     } 
    }); 
};

これ以外にも、私はmyCanvasという関連キャンバスを持っています。

基本的には、私が再びクリックするまで、その点から私のカーソルに行が移動すると、それは停止し、今はこの山の部分だけ残っています。

クリックした場所から自分のカーソルに移動した後に「一時的な」行を取得し、次に2回目のクリックがある場所に永続的な行を配置する方法はありますか？

出典

2013-05-08 Funkyguy

クリックすると、2番目のクリック時に最初のblitとblitの上に2番目のtempキャンバスが表示されます。キャンバスを削除して1番目の行を行います。 – r043v

blit？キャンバスをキャンバス内にネストし、マウスを動かすと同様の考えができました。ネストされたキャンバスをクリアしてからクリックすると、そのキャンバスにラインをプッシュします。私はキャンバスをクリアする方法を知らないのですが、私がしても、それはたくさんの記憶を取るように感じます。 – Funkyguy

あなたのコードはとても近くでした。ギャップを埋めるいくつかの調整があります。

ユーザーが新しい行をドラッグしたときに、あなたがそれぞれのMouseMove中にキャンバスをクリアし、ちょうど彼らの最新を描く必要があります「行のマウンドを」描画避けるために

を[単一のキャンバスのソリューションを表示するには編集]行をドラッグします。

キャンバスを消去すると、以前にユーザーが描画した行も消去されるため、ドラッグするたびに前の行を再描画する必要があります。これを行うには、各行について十分な情報を格納して再描画する必要があります。

各行について、開始点と終了点（x1/y1とx2/y2）が必要です。あなたは、配列内の行のオブジェクトを対象にこれらの出発点と終了点を入れて保存することができます：

// an array to store previous lines 
var storedLines=[]; 

// to store a new line 
storedLines.push({ x1:10, y1:20, x2:50, y2:35 });

この関数は、現在のユーザーのドラッグラインが表示され、すべての以前に描かれたライン

function redrawStoredLines(){ 

     ctx.clearRect(0,0,canvas.width,canvas.height); 

     if(storedLines.length==0){ return; } 

     // redraw each stored line 
     for(var i=0;i<storedLines.length;i++){ 
      ctx.beginPath(); 
      ctx.moveTo(storedLines[i].x1,storedLines[i].y1); 
      ctx.lineTo(storedLines[i].x2,storedLines[i].y2); 
      ctx.stroke(); 
     } 
    }

を再描画しますこのように非常に簡単：

ここ

function handleMouseMove(e){ 

    if(!isDown){ return; } 

    redrawStoredLines(); 

    var mouseX=parseInt(e.clientX-offsetX); 
    var mouseY=parseInt(e.clientY-offsetY); 

    // draw the current line 
    ctx.beginPath(); 
    ctx.moveTo(startX,startY); 
    ctx.lineTo(mouseX,mouseY); 
    ctx.stroke() 

}

コードとフィドルです：http://jsfiddle.net/m1erickson/NnZ7a/

<!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; padding:10px; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var storedLines=[]; 
    var startX=0; 
    var startY=0; 
    var isDown; 

    ctx.strokeStyle="orange"; 
    ctx.lineWidth=3; 

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

    $("#clear").click(function(){ storedLines.length=0; redrawStoredLines(); }); 

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

     isDown=true; 
     startX=mouseX; 
     startY=mouseY; 

    } 

    function handleMouseMove(e){ 

     if(!isDown){ return; } 

     redrawStoredLines(); 

     var mouseX=parseInt(e.clientX-offsetX); 
     var mouseY=parseInt(e.clientY-offsetY); 

     // draw the current line 
     ctx.beginPath(); 
     ctx.moveTo(startX,startY); 
     ctx.lineTo(mouseX,mouseY); 
     ctx.stroke() 

    } 


    function handleMouseUp(e){ 

     isDown=false; 

     var mouseX=parseInt(e.clientX-offsetX); 
     var mouseY=parseInt(e.clientY-offsetY); 

     storedLines.push({x1:startX, y1:startY, x2:mouseX, y2:mouseY}); 

     redrawStoredLines(); 

    } 


    function redrawStoredLines(){ 

     ctx.clearRect(0,0,canvas.width,canvas.height); 

     if(storedLines.length==0){ return; } 

     // redraw each stored line 
     for(var i=0;i<storedLines.length;i++){ 
      ctx.beginPath(); 
      ctx.moveTo(storedLines[i].x1,storedLines[i].y1); 
      ctx.lineTo(storedLines[i].x2,storedLines[i].y2); 
      ctx.stroke(); 
     } 
    } 

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

</head> 

<body> 
    <p>Drag to draw lines</p> 
    <canvas id="canvas" width=300 height=300></canvas><br/> 
    <button id="clear">Clear Canvas</button> 
</body> 
</html>

出典

2013-05-08 06:31:23 markE

恐ろしい！それはかなり徹底的に見えます。私はいくつかのことを変えなければならないでしょう。それは私が尋ねた質問に正確に答えるものではありませんが、これは非常に役に立ちます。 – Funkyguy

さて、私はそれを変更する方法を理解できません。ボタンを押したままにする必要がないように変更することはできますか？ちょうど開始点をクリックし、もう一度クリックして終了点を設定してください。 – Funkyguy

元のコードに近づくように私の答えを編集しました（元の答えで少し迷ってしまって申し訳ありません）。 – markE

前のストロークを削除する（一時行を作成する） - Javascript/HTML5

答えて

関連する問題