Dessiner librement en ligne droite

Question

J'ai commencé à développer une application de toile pour créer des pièces en 2d. Je veux créer une pièce à partir d'un dessin libre comme ceci:

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

Exemple: devfiles.myopera.com/articles/649/example2.html (cant créer plus de 2 liens hyper)

lorsque le dessin libre de la pièce est terminée et le bouton de la souris est relâché (ou quand un bouton est pressé), je veux que le programme génère automatiquement une pièce avec des lignes droites comme ceci:

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

Je ne veux que des chambres avec des coins 90degrees donc je me demande s'il y a un moyen de le faire.

// Andreas

Answer 1

Live Demo

Heres une façon de le faire. J'utilise 2 objets de toile, vous "peignez" sur le dessus et une fois que vous relâchez la souris, il dessine une ligne droite du point de départ au point final de votre ligne. Il y a de la place pour l'amélioration mais je voulais juste mettre une solution là-bas.

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; 

    } 
} 
​