0

Tengo un fichero HTML en el que pongo el htmlcanvas

<div id="canvas" class="firma-div">
  <canvas id="myCanvas" width="500" height="200" style="border:2px solid black"></canvas>
</div>

Y luego tengo el controller que es el que me hace todas las funcionalidades del HTML.

Pero por más que pruebo, no consigo que cuándo paso por encima me dibuje con el ratón/mano.

¿Alguna ídea?

1 respuesta 1

0

te paso el código que uso yo para temas de firmas digitales con el que podrás dibujar en el canvas.

<title>Nueva</title>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!--TODO: PDF-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

<!-- Bootstrap CSS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<canvas id="pizarra" class="mb-5 border"></canvas>


<script>
    var hoy = new Date();

    var dd = hoy.getDate();

    var mm = hoy.getMonth();

    var yyyy = hoy.getFullYear();

    var meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];

    $('#fecha_firmado').text(dd + ' de ' + meses[mm] + ' del ' + yyyy);






    //======================================================================

    // VARIABLES

    //======================================================================

    let miCanvas = document.querySelector('#pizarra');

    let lineas = [];

    let correccionX = 0;

    let correccionY = 0;

    let pintarLinea = false;


    let posicion = miCanvas.getBoundingClientRect()

    correccionX = posicion.x;

    correccionY = posicion.y;


    if (screen.availHeight < 780) {

        miCanvas.width = 300;

        miCanvas.height = 150;

    } else {

        miCanvas.width = 1100;

        miCanvas.height = 500;


    }

    //======================================================================

    // FUNCIONES

    //======================================================================


    /**

    * Funcion que empieza a dibujar la linea

    */

    function empezarDibujo() {

        pintarLinea = true;

        lineas.push([]);

    };



    if (screen.availHeight < 780) {

        var dependencia = 1

    } else {

        var dependencia = 5


    }




    function dibujarLinea(event) {

        event.preventDefault();

        if (pintarLinea) {

            let ctx = miCanvas.getContext('2d')

            // Estilos de linea

            ctx.lineJoin = ctx.lineCap = 'round';

            ctx.lineWidth = dependencia;

            // Color de la linea

            ctx.strokeStyle = 'black';

            // Marca el nuevo punto

            let nuevaPosicionX = 0;

            let nuevaPosicionY = 0;

            if (event.changedTouches == undefined) {

                // Versión ratón

                nuevaPosicionX = event.layerX;

                nuevaPosicionY = event.layerY;

            } else {

                // Versión touch, pantalla tactil

                nuevaPosicionX = event.changedTouches[0].pageX - correccionX;

                nuevaPosicionY = event.changedTouches[0].pageY - correccionY;

            }

            // Guarda la linea

            lineas[lineas.length - 1].push({

                x: nuevaPosicionX,

                y: nuevaPosicionY

            });

            // Redibuja todas las lineas guardadas

            ctx.beginPath();

            lineas.forEach(function(segmento) {

                if (segmento[0]) { //TODO: solucion fallo de no detectar la linea 

                    ctx.moveTo(segmento[0].x, segmento[0].y);

                } else {


                }


                segmento.forEach(function(punto, index) {

                    ctx.lineTo(punto.x, punto.y);

                });

            });

            ctx.stroke();

        }

    }


    /**

    * Funcion que deja de dibujar la linea

    */

    function pararDibujar() {

        pintarLinea = false;

    }


    //======================================================================

    // EVENTOS

    //======================================================================


    // Eventos raton

    miCanvas.addEventListener('mousedown', empezarDibujo, false);

    miCanvas.addEventListener('mousemove', dibujarLinea, false);

    miCanvas.addEventListener('mouseup', pararDibujar, false);


    // Eventos pantallas táctiles

    miCanvas.addEventListener('touchstart', empezarDibujo, false);

    miCanvas.addEventListener('touchmove', dibujarLinea, false);
</script>





<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

0

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.