自由繪製直線

Question

我已經開始開發一個畫布應用程序來創建2D房間。我想創建一個從自由繪畫這樣的房間：

http://soud.se/images/room.JPG

例子：devfiles.myopera.com/articles/649/example2.html（不能創建2個以上的超鏈接）

當房間的自由拉伸完成並且釋放鼠標按鈕（或當按鈕被按下時），我想要的程序自動生成這樣用直線的房間：

http://soud.se/images/room1.JPG

我只想要90度角的房間，所以我想知道有沒有辦法做到這一點。

//安德烈亞斯

Answer 1

Live Demo

繼承人一個做到這一點的方式。我使用2個畫布對象，在頂部繪製「繪畫」對象，一旦釋放鼠標，它就會從您的線條的起點到終點繪製一條直線。有改進的餘地，但我只想把一個解決方案放在那裏。

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    drawCanvas = document.getElementById("drawCanvas"), 
    drawCtx = drawCanvas.getContext("2d"), 
    painting = false, 
    lastX = 0, 
    lastY = 0, 
    startX = 0, 
    startY = 0, 
    lineThickness = 1; 

canvas.width = canvas.height = 600; 

drawCanvas.width = drawCanvas.height = 600; 

drawCanvas.onmousedown = function(e) { 
    painting = true; 
    drawCtx.fillStyle = "#000"; 
    lastX = e.pageX - this.offsetLeft; 
    lastY = e.pageY - this.offsetTop; 
    startX = lastX; 
    startY = lastY; 
}; 

drawCanvas.onmouseup = function(e){ 
    painting = false; 
    var x2 = e.pageX - this.offsetLeft, 
     y2 = e.pageY - this.offsetTop; 

    ctx.strokeStyle = "#000"; 
    ctx.beginPath(); 
    ctx.moveTo(startX, startY); 
    ctx.lineTo(x2, y2); 
    ctx.stroke(); 

    drawCtx.clearRect(0, 0, 600, 600); 
} 

drawCanvas.onmousemove = function(e) { 
    if (painting) { 
     mouseX = e.pageX - this.offsetLeft; 
     mouseY = e.pageY - this.offsetTop; 

     // find all points between   
     var x1 = mouseX, 
      x2 = lastX, 
      y1 = mouseY, 
      y2 = lastY; 


     var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1)); 
     if (steep){ 
      var x = x1; 
      x1 = y1; 
      y1 = x; 

      var y = y2; 
      y2 = x2; 
      x2 = y; 
     } 
     if (x1 > x2) { 
      var x = x1; 
      x1 = x2; 
      x2 = x; 

      var y = y1; 
      y1 = y2; 
      y2 = y; 
     } 

     var dx = x2 - x1, 
      dy = Math.abs(y2 - y1), 
      error = 0, 
      de = dy/dx, 
      yStep = -1, 
      y = y1; 

     if (y1 < y2) { 
      yStep = 1; 
     } 


     for (var x = x1; x < x2; x++) { 
      if (steep) { 
       drawCtx.fillRect(y, x, lineThickness , lineThickness); 
      } else { 
       drawCtx.fillRect(x, y, lineThickness , lineThickness); 
      } 

      error += de; 
      if (error >= 0.5) { 
       y += yStep; 
       error -= 1.0; 
      } 
     } 



     lastX = mouseX; 
     lastY = mouseY; 

    } 
} 
​