Cómo dibujar una línea recta táctil en lienzo HTML5

Estoy tratando de crear un conjunto de herramientas de dibujo para el iPad y hasta ahora he hecho el cuadrado, pero no estoy seguro de cómo codificaría un línea recta? Aquí está el código para mi cuadrado terminado, tal vez sea de ayuda. Me gustaría saber cómo codificar una línea recta. Después de eso, ¿qué pasa si también quiero dibujar círculos? ¿Qué en este código necesitaría cambiar?

Aquí está el código:

JavaScript (Cuadrado/Rectángulo)

// "Draw Rectangle" Button
function rect(){
var canvas = document.getElementById('canvasSignature'), ctx = canvas.getContext('2d'), rect = {}, drag = false;

function init() {
  canvas.addEventListener("touchstart", touchHandler, false);
  canvas.addEventListener("touchmove", touchHandler, false);
  canvas.addEventListener("touchend", touchHandler, false);
}


function touchHandler(event) {
  if (event.targetTouches.length == 1) { //one finger touche
    var touch = event.targetTouches[0];

    if (event.type == "touchstart") {
      rect.startX = touch.pageX;
      rect.startY = touch.pageY;
      drag = true;
    } else if (event.type == "touchmove") {
      if (drag) {
        rect.w = touch.pageX - rect.startX;
        rect.h = touch.pageY - rect.startY ;
        draw();
      }
    } else if (event.type == "touchend" || event.type == "touchcancel") {
      drag = false;
    }
  }
}

function draw() {
  ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);


  ctx.clearRect(0, 0, canvas.width, canvas.height);



  ctx.fillStyle = "orange";
}

init();
}

preguntado el 12 de junio de 12 a las 18:06

La mayor parte de ese código solo determina DÓNDE dibujar el rectángulo. Solo hay una línea que realmente lo dibuja. Encuentre esa línea y reemplácela con otra cosa, como con un método diferente de la misma clase o algo así. -

1 Respuestas

Solo reemplaza esto:

ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);

ctx.clearRect(0, 0, canvas.width, canvas.height);

con algo como esto:

ctx.fillLine(rect.startX, rect.startY, rect.w, rect.h);

ctx.clearLine(0, 0, canvas.width, canvas.height);

por supuesto, este no es un código 100% válido, pero el concepto debería funcionar y entenderá el punto

Respondido el 12 de junio de 12 a las 18:06

Espera, ¿cambio rect.startX, etc. a line.startX, etc. también? - Wardenclyffe

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.