Signature_pad: Anchura y altura

+1 acaba de probar este paquete y tiene problemas con el tamaño. Idealmente, quiero que abarque todo el ancho en dispositivos móviles y que sea más pequeño en computadoras de escritorio. @szimek alguna idea?

¿Cuáles son exactamente estos problemas con el tamaño?

Toma este ejemplo. Cuando dibujas, la posición es incorrecta http://jsfiddle.net/4qjwr06h/1/

Ok, probablemente estoy siendo estúpido. Si quiero que responda, no debería hacer width: 100% con <canvas> ya que no cambia el ancho real del lienzo sino que lo estira. Debería usar anchos fijos en su lugar.

Puede verificar el método resizeCanvas en la aplicación de demostración. Si agrega estas 2 líneas a su demostración, entonces funciona bien:

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

Mi código también tiene en cuenta devicePixelRatio , pero para ser honesto, no estoy seguro de si es 100% correcto.

Creo que lo hice funcionar, gracias chicos.

viva jesus

De: Szymon Nowak [mailto:[email protected]]
Enviado: miércoles, 7 de octubre de 2015 10:14
Para: szimek/signature_pad [email protected]
CC: crazzeto [email protected]
Asunto: Re: [firma_pad] Ancho y Alto (#118)

Puede consultar el método https://github.com/szimek/signature_pad/blob/master/example/js/app.js#L10 -L18 resizeCanvas en la aplicación de demostración. Si agrega estas 2 líneas a su demostración, entonces funciona bien:

lienzo.altura = lienzo.alturadesplazamiento;
lienzo.ancho = lienzo.offsetWidth;

Mi código también tiene en cuenta las pantallas de retina, pero para ser honesto, no estoy seguro de si es 100% correcto.

—
Responda a este correo electrónico directamente o véalo en GitHub https://github.com/szimek/signature_pad/issues/118#issuecomment -146207233 .

¿Puedo sugerir poner estas líneas

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

en los documentos/README? Me tomó bastante tiempo darme cuenta de eso, y creo que eso también podría ser cierto para otras personas sin experiencia con <canvas> .

@Boldewyn Gracias por la sugerencia. Hay un PR que debería hacer que esto ya no sea necesario. Para fin de año, la fusionaré y actualizaré la aplicación de demostración, o agregaré esta información al LÉAME.