2013-05-08 15 views
5

Tôi đang cố tạo một ứng dụng vẽ đơn giản và tôi muốn các dòng sắp xếp xem trước dòng sau khi bạn chỉ định một điểm bắt đầu dòng. Javascript tương ứng giống như sau:loại bỏ đột quỵ trước đó (tạo dòng tạm thời) - 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; 
     } 
    }); 
}; 

Ngoài ra, tôi có một canvas liên quan được gọi là myCanvas.

Về cơ bản những gì nó làm là nó làm cho các đường đi từ điểm đó đến con trỏ của tôi cho đến khi tôi nhấp một lần nữa, sau đó nó sẽ dừng lại và bây giờ tôi còn lại chỉ với gò đất này.

Làm cách nào tôi có thể nhận được dòng "tạm thời" sau khi tôi nhấp vào một lần từ vị trí được nhấp vào con trỏ của tôi và sau đó đặt một dòng vĩnh viễn nơi nhấp chuột thứ hai của tôi.

+0

bạn có thể thử nhấp chuột để hiển thị canvas tạm thời thứ hai trên đầu tiên và nhấp vào bên trong dòng moussemove, ở lần nhấp thứ hai, hãy xóa canvas và thực hiện dòng đầu tiên – r043v

+0

blit? Tôi đã có một ý tưởng tương tự để có một canvas lồng nhau bên trong canvas và sau đó di chuyển chuột, tôi sẽ xóa canvas lồng nhau và sau đó nhấn vào tôi sẽ đẩy dòng lên canvas có chứa. Thing là tôi không biết làm thế nào để xóa một bức tranh và thậm chí nếu tôi đã làm, tôi cảm thấy như thế sẽ mất rất nhiều bộ nhớ. – Funkyguy

Trả lời

5

Bạn đã rất gần với mã của mình. Dưới đây là một số điều chỉnh điền vào các khoảng trống.

[Edited để hiển thị một giải pháp đơn canvas]

Để tránh vẽ “một đống dòng” khi người dùng kéo dòng mới của họ, bạn phải rõ ràng bức tranh trong mỗi MouseMove và vẽ chỉ mới nhất của họ đường kéo.

Xóa canvas cũng sẽ xóa mọi đường kẻ được người dùng vẽ trước đó, vì vậy bạn phải vẽ lại các dòng trước đó bằng mọi lần kéo. Để làm điều đó, bạn phải lưu trữ đủ thông tin về mỗi dòng để vẽ lại nó.

Đối với mỗi dòng, bạn sẽ cần điểm bắt đầu và điểm kết thúc (x1/y1 và x2/y2). Bạn có thể đặt những bắt đầu và kết thúc điểm trong một đối tượng và lưu trữ các dòng đối tượng trong một mảng:

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

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

Chức năng này vẽ lại tất cả các dòng rút ra trước đó

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

Bây giờ hiển thị dòng kéo của người dùng là dễ dàng hơn nhiều như thế này:

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

} 

đây là mã và một 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> 
+0

Tuyệt vời! trông khá kỹ lưỡng. Tôi sẽ phải thay đổi một vài điều b/c nó không chính xác trả lời những câu hỏi tôi hỏi nhưng điều này giúp vô cùng. – Funkyguy

+0

Ok nevermind, tôi không thể tìm ra cách thay đổi nó, Bạn có thể thay đổi nó để bạn không phải giữ nút xuống, bạn chỉ cần nhấp vào điểm bắt đầu và sau đó nhấp lại để thiết lập điểm kết thúc. – Funkyguy

+0

Tôi đã chỉnh sửa câu trả lời của tôi để được gần gũi hơn với mã ban đầu của bạn (xin lỗi nếu tôi đi lạc một chút với câu trả lời ban đầu của tôi). – markE