entfernen Sie einen vorherigen Strich (eine temporäre Linie erstellen) - Javascript/HTML5

Ich versuche, eine einfache Malanwendung zu machen, und ich möchte, dass die Zeilen eine Vorschau der Zeile nach dem Festlegen eines Zeilenanfangspunkts sortieren. Das entsprechende Javascript ist wie folgt:entfernen Sie einen vorherigen Strich (eine temporäre Linie erstellen) - 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; 
     } 
    }); 
};

Abgesehen davon habe ich eine verwandte Leinwand namens myCanvas.

Grundsätzlich macht es Linien von diesem Punkt zu meinem Cursor gehen, bis ich wieder klicke, dann wird es aufhören und jetzt bin ich nur mit diesem Hügel von Linien.

Wie kann ich eine "temporäre" Linie bekommen, nachdem ich einmal geklickt habe, von dieser angeklickten Stelle zu meinem Cursor und dann eine permanente Linie, wo mein zweiter Klick ist.

Quelle

2013-05-08 Funkyguy

können Sie versuchen, klicken Sie auf eine zweite temporäre Leinwand über die erste und Blit innerhalb der MousseMove-Linie, beim zweiten Klick entfernen Sie die Leinwand und machen Sie die Linie auf der ersten – r043v

Blit? Ich hatte eine ähnliche Idee, eine Leinwand in der Zeichenfläche geschachtelt zu haben und dann, wenn ich mich bewegte, löschte ich die verschachtelte Leinwand und dann klickte ich auf die enthaltene Leinwand. Die Sache ist, dass ich nicht weiß, wie man eine Leinwand löscht, und selbst wenn ich das täte, denke ich, dass das eine Menge Erinnerung erfordern würde. – Funkyguy

Sie waren sehr eng mit Ihrem Code. Hier sind einige Anpassungen, die Lücken füllen.

[Bearbeiten eine einzige Leinwand Lösung zu zeigen]

Um zu vermeiden, Zeichnung „einen Hügel von Linien“, wenn der Benutzer ihre neue Linie zieht, Sie Muss während jeden mousemove- die Leinwand klar und gerade ihre neuesten ziehen Linie ziehen.

Wenn Sie die Zeichenfläche löschen, werden auch alle zuvor vom Benutzer gezeichneten Linien gelöscht. Daher müssen Sie die vorherigen Linien bei jedem Ziehen neu zeichnen. Um dies zu tun, müssen Sie genügend Informationen über jede Zeile speichern, um sie neu zu zeichnen.

Für jede Zeile benötigen Sie die Start- und Endpunkte (x1/y1 und x2/y2). Sie können diese Start- und Endpunkte in einem Objekt setzen und speichern Sie die Line-Objekte in einem Array:

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

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

Diese Funktion alle zuvor gezogenen Linien neu gezeichnet

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(); 
     } 
    }

Jetzt das Schleppen Linie des Benutzers anzeigt ist viel einfacher wie folgt aus:

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() 

}

Hier Code und ein Fiddle: 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>

Quelle

2013-05-08 06:31:23 markE

Super! Das sieht ziemlich gründlich aus. Ich werde ein paar Dinge ändern müssen b/c es beantwortet nicht genau die Frage, die ich fragte, aber das hilft immensly. – Funkyguy

Okay, vergiss nicht, ich kann nicht herausfinden, wie ich es ändern kann. Kannst du es ändern, so dass du die Taste nicht gedrückt halten musst, klicke einfach auf den Startpunkt und klicke erneut, um den Endpunkt zu setzen. – Funkyguy

Ich habe meine Antwort bearbeitet, um näher an Ihrem ursprünglichen Code zu sein (Entschuldigung, wenn ich ein bisschen mit meiner ursprünglichen Antwort abgewichen bin). – markE

entfernen Sie einen vorherigen Strich (eine temporäre Linie erstellen) - Javascript/HTML5

Antwort

Verwandte Themen