usunąć poprzedni skok (utworzyć tymczasową linię) - JavaScript/HTML5

Próbuję wykonać prostą aplikację farby i chcę, aby linie sortowały podgląd linii po określeniu punktu początkowego linii. Odpowiedni javascript jest taki:usunąć poprzedni skok (utworzyć tymczasową linię) - 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; 
     } 
    }); 
};

Oprócz tego mam powiązane płótno o nazwie myCanvas.

W zasadzie to, co robi, sprawia, że linie idą od tego punktu do mojego kursora, dopóki nie kliknę ponownie, a następnie zatrzyma się i teraz pozostaję z tym tylko kopcem linii.

W jaki sposób mogę uzyskać "tymczasowy" wiersz po kliknięciu raz przechodząc od tej klikniętej lokalizacji do mojego kursora, a następnie umieścić stały wiersz, w którym znajduje się moje drugie kliknięcie.

Źródło

2013-05-08 Funkyguy

Możesz spróbować kliknąć, pokaż drugie płótno na górze pierwszego i wklej wewnątrz linii moussemove, po drugim kliknięciu usuniesz płótno i zrobisz linię na pierwszym z nich? – r043v

blit? Miałem podobny pomysł, aby płótno zagnieździło się wewnątrz płótna, a następnie na ruchy myszy, wyczyściłbym zagnieżdżone płótno, a następnie kliknięciem popchnęłbym linię na płótno zawierające. Chodzi o to, że nie wiem, jak wyczyścić płótno, a nawet gdybym to zrobił, miałbym wrażenie, że zajmie to dużo pamięci. – Funkyguy

Byłeś bardzo blisko ze swoim kodem. Oto kilka poprawek, które wypełniają luki.

[Edytowane pokazać jedno rozwiązanie płótno]

Aby uniknąć rysunek „kopiec linii”, kiedy użytkownik przeciąga swoją nową linii, moszczu jasne płótno podczas każdego mouseMove i wyciągnąć tylko ich ostatni przeciąganie linii.

Wyczyszczenie płótna spowoduje także wyczyszczenie wszystkich linii uprzednio narysowanych przez użytkownika, dlatego przy każdym przeciągnięciu należy ponownie rysować poprzednie linie. Aby to zrobić, musisz przechowywać wystarczającą ilość informacji o każdym wierszu, aby przerysować go.

Dla każdej linii potrzebne będą punkty początkowe i końcowe (x1/y1 i x2/y2). Można umieścić te zaczynające i kończące punktów w obiekcie i przechowywanie line-obiekty w tablicy:

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

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

Funkcja ta odświeża wszystkie wcześniej narysowane linie

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

Wyświetlono linia przeciągając autora jest o wiele łatwiej tak:

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

}

Oto kod i 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>

Źródło

2013-05-08 06:31:23 markE

Awesome! to wygląda na dość dokładne. Będę musiał zmienić kilka rzeczy b/c nie odpowiada dokładnie na pytanie, które zadałem, ale to pomaga niezmiernie. – Funkyguy

Dobra, nieważne, nie wiem, jak to zmienić. Czy możesz to zmienić, aby nie naciskać przycisku, wystarczy kliknąć punkt początkowy, a następnie kliknąć ponownie, aby ustawić punkt końcowy. – Funkyguy

Edytowałem swoją odpowiedź, aby być bliżej oryginalnego kodu (przepraszam, jeśli trochę zbłądziłem z moją oryginalną odpowiedzią). – markE

usunąć poprzedni skok (utworzyć tymczasową linię) - JavaScript/HTML5

Odpowiedz

Powiązane problemy