直線を自由に描く

Question

2dで部屋を作成するためにキャンバスアプリケーションを開発し始めました。

を（以上2つのハイパーリンクを作成カント）devfiles.myopera.com/articles/649/example2.html：

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

例：私はこのような自由な描画から部屋を作成したいです

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; 

    } 
} 
​