4

Tengo este código en el que me sirve para firmar documento a mano alzada, el problema es que solo funciona con el ratón, he estado buscando la opción de añadir la funcionalidad "touch", pero no consigo combinarlo con el código que tengo. He intentado añadir addEventListener('touchstart'), pero no se exactamente donde debo de aplicarlo. Además tiene un añadido para que el trazado realizado se suavice una vez levantado el ratón del canvas.

Agradecería una ayuda, dejo el código completo por si a alguien también le pudiera ayudar alguna vez a hacer algo parecido.

var limpiar = document.getElementById("limpiar");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 250,
    cx = cw / 2;
var ch = canvas.height = 150,
    cy = ch / 2;

var dibujar = false;
var factorDeAlisamiento = 5;
var Trazados = [];
var puntos = [];
ctx.lineJoin = "round";

limpiar.addEventListener('click', function (evt) {
    dibujar = false;
    ctx.clearRect(0, 0, cw, ch);
    Trazados.length = 0;
    puntos.length = 0;
}, false);

canvas.addEventListener('mousedown', function (evt) {
    dibujar = true;
    //ctx.clearRect(0, 0, cw, ch);
    puntos.length = 0;
    ctx.beginPath();

}, false);

canvas.addEventListener('mouseup', function (evt) {
    redibujarTrazados();
}, false);

canvas.addEventListener("mouseout", function (evt) {
    redibujarTrazados();
}, false);

canvas.addEventListener("mousemove", function (evt) {
    if (dibujar) {
        var m = oMousePos(canvas, evt);
        puntos.push(m);
        ctx.lineTo(m.x, m.y);
        ctx.stroke();
    }
}, false);

function reducirArray(n, elArray) {
    var nuevoArray = [];
    nuevoArray[0] = elArray[0];
    for (var i = 0; i < elArray.length; i++) {
        if (i % n == 0) {
            nuevoArray[nuevoArray.length] = elArray[i];
        }
    }
    nuevoArray[nuevoArray.length - 1] = elArray[elArray.length - 1];
    Trazados.push(nuevoArray);
}

function calcularPuntoDeControl(ry, a, b) {
    var pc = {}
    pc.x = (ry[a].x + ry[b].x) / 2;
    pc.y = (ry[a].y + ry[b].y) / 2;
    return pc;
}

function alisarTrazado(ry) {
    if (ry.length > 1) {
        var ultimoPunto = ry.length - 1;
        ctx.beginPath();
        ctx.moveTo(ry[0].x, ry[0].y);
        for (i = 1; i < ry.length - 2; i++) {
            var pc = calcularPuntoDeControl(ry, i, i + 1);
            ctx.quadraticCurveTo(ry[i].x, ry[i].y, pc.x, pc.y);
        }
        ctx.quadraticCurveTo(ry[ultimoPunto - 1].x, ry[ultimoPunto - 1].y, ry[ultimoPunto].x, ry[ultimoPunto].y);
        ctx.stroke();
    }
}

function redibujarTrazados() {
    dibujar = false;
    ctx.clearRect(0, 0, cw, ch);
    reducirArray(factorDeAlisamiento, puntos);
    for (var i = 0; i < Trazados.length; i++)
        alisarTrazado(Trazados[i]);
}

function oMousePos(canvas, evt) {
    var ClientRect = canvas.getBoundingClientRect();
    return { //objeto
        x: Math.round(evt.clientX - ClientRect.left),
        y: Math.round(evt.clientY - ClientRect.top)
    }
}

/* Enviar el trazado */
function GuardarTrazado() {
    imagen.value = document.getElementById('canvas').toDataURL('image/png');
    //document.forms['incineracionForm'].submit();
}

/* Limpiar pizarra */
function limpiarTrazado() {
    dibujar = false;
    ctx.clearRect(0, 0, cw, ch);
    Trazados.length = 0;
    puntos.length = 0;
  }
<canvas id="canvas" style="border:1px solid #999; cursor:crosshair; width:250px !important; height: 150px;"></canvas>
<a id="limpiar" class="btn btn-sm btn-danger" style="margin-left:10px; vertical-align: middle;"><i class="fas fa-trash-alt">Limpiar</i></a>

1 respuesta 1

3

En realidad es muy fácil una vez que lo sabes: simplemente necesitas duplicar los listener, usando la misma lógica del ratón:

let limpiar = document.getElementById("limpiar");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let cw = canvas.width = 250,
    cx = cw / 2;
let ch = canvas.height = 150,
    cy = ch / 2;

let dibujar = false;
let factorDeAlisamiento = 5;
let Trazados = [];
let puntos = [];
ctx.lineJoin = "round";

limpiar.addEventListener('click', function (evt) {
    dibujar = false;
    ctx.clearRect(0, 0, cw, ch);
    Trazados.length = 0;
    puntos.length = 0;
}, false);

function iniciarTrazado(evt) {
    dibujar = true;
    //ctx.clearRect(0, 0, cw, ch);
    puntos.length = 0;
    ctx.beginPath();

}

function trazar(evt) {
    if (dibujar) {
        let m = oMousePos(canvas, evt);
        puntos.push(m);
        ctx.lineTo(m.x, m.y);
        ctx.stroke();
    }
}

canvas.addEventListener('mousedown', iniciarTrazado , false);
canvas.addEventListener('touchstart',event => iniciarTrazado(event.touches[0]) , false);

canvas.addEventListener('mouseup', redibujarTrazados, false);
canvas.addEventListener('touchend', event =>redibujarTrazados(event.touches[0]), false);

canvas.addEventListener("mouseout", redibujarTrazados, false);

canvas.addEventListener("mousemove", trazar, false);
canvas.addEventListener("touchmove", event => trazar(event.touches[0]), false);

function reducirArray(n, elArray) {
    let nuevoArray = [];
    nuevoArray[0] = elArray[0];
    for (let i = 0; i < elArray.length; i++) {
        if (i % n == 0) {
            nuevoArray[nuevoArray.length] = elArray[i];
        }
    }
    nuevoArray[nuevoArray.length - 1] = elArray[elArray.length - 1];
    Trazados.push(nuevoArray);
}

function calcularPuntoDeControl(ry, a, b) {
    let pc = {}
    pc.x = (ry[a].x + ry[b].x) / 2;
    pc.y = (ry[a].y + ry[b].y) / 2;
    return pc;
}

function alisarTrazado(ry) {
    if (ry.length > 1) {
        let ultimoPunto = ry.length - 1;
        ctx.beginPath();
        ctx.moveTo(ry[0].x, ry[0].y);
        for (let i = 1; i < ry.length - 2; i++) {
            let pc = calcularPuntoDeControl(ry, i, i + 1);
            ctx.quadraticCurveTo(ry[i].x, ry[i].y, pc.x, pc.y);
        }
        ctx.quadraticCurveTo(ry[ultimoPunto - 1].x, ry[ultimoPunto - 1].y, ry[ultimoPunto].x, ry[ultimoPunto].y);
        ctx.stroke();
    }
}

function redibujarTrazados() {
    dibujar = false;
    ctx.clearRect(0, 0, cw, ch);
    reducirArray(factorDeAlisamiento, puntos);
    for (let i = 0; i < Trazados.length; i++)
        alisarTrazado(Trazados[i]);
}

function oMousePos(canvas, evt) {
    let ClientRect = canvas.getBoundingClientRect();
    return { //objeto
        x: Math.round(evt.clientX - ClientRect.left),
        y: Math.round(evt.clientY - ClientRect.top)
    }
}

/* Enviar el trazado */
function GuardarTrazado() {
    imagen.value = document.getElementById('canvas').toDataURL('image/png');
    //document.forms['incineracionForm'].submit();
}

/* Limpiar pizarra */
function limpiarTrazado() {
    dibujar = false;
    ctx.clearRect(0, 0, cw, ch);
    Trazados.length = 0;
    puntos.length = 0;
  }
<div id="app">
  <canvas id="canvas" style="border:1px solid #999; cursor:crosshair;"></canvas>
<a id="limpiar" class="btn btn-sm btn-danger" style="margin-left:10px; vertical-align: middle;"><i class="fas fa-trash-alt">Limpiar</i></a>
</div>

Como verás no existe un equivalente para mouseout, pero si hiciera falta podrías usar una función que compruebe que no te has salido en cada momento:

estaFueraDelCanvas(e) {
  const item = e.changedTouches.item(0);
  if (item === null) return false;
  return canvas.getBoundingClientRect().right > item.clientX &&
      canvas.getBoundingClientRect().left < item.clientX &&
      canvas.getBoundingClientRect().top < item.clientY &&
      canvas.getBoundingClientRect().bottom > item.clientY;
}

Aquí tienes el mismo código pero con un canvas más grande: https://stackblitz.com/edit/pawer13-canvastouch?file=index.js

4
  • He actualizado el código, pero sigue sin funcionar, funciona el ratón, pero no con el dedo, ni el movil ni en pantalla portatil tactil.a
    – Jesus
    Commented el 18 mar. 2021 a las 23:57
  • Tienes razón, se me había olvidado un detalle sobre los TouchEvent. Lo he arreglado Commented el 19 mar. 2021 a las 8:46
  • Funciona perfectamente, muchisimas gracias, te agradezco el tiempo que le has dedicado... Espero que a alguien le sirva alguna vez..
    – Jesus
    Commented el 19 mar. 2021 a las 11:59
  • Puedes marcar la respuesta como aceptada para que la pregunta quede como respondida, si así lo consideras. No te preocupes por el tiempo, hace un par de años implementé esto mismo en una aplicación y recordaba casi todos los detalles :) Commented el 19 mar. 2021 a las 12:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.