Signature_pad: Largeur et hauteur

+1 vient d'essayer ce package et rencontre des problèmes de dimensionnement. Idéalement, je veux qu'il s'étende sur toute la largeur sur les appareils mobiles et qu'il soit plus petit sur les ordinateurs de bureau. @szimek des idées?

Quels sont exactement ces problèmes de dimensionnement ?

Prenons cet exemple. Lorsque vous dessinez, la position est incorrecte http://jsfiddle.net/4qjwr06h/1/

Ok je suis probablement stupide. Si je veux qu'il soit réactif, je ne devrais pas faire width: 100% avec <canvas> car cela ne change pas la largeur réelle de la toile mais l'étire à la place. Devrait utiliser des largeurs fixes à la place.

Vous pouvez vérifier la méthode resizeCanvas dans l'application de démonstration. Si vous ajoutez ces 2 lignes à votre démo, cela fonctionne bien :

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

Mon code prend également en compte devicePixelRatio , mais pour être honnête, je ne suis pas vraiment sûr qu'il soit correct à 100 %.

Je pense que je l'ai fait fonctionner, merci les gars

Vivat Jésus

De : Szymon Nowak [mailto:[email protected]]
Envoyé : mercredi 7 octobre 2015 10:14
À : szimek/signature_pad [email protected]
Cc : crazzeto [email protected]
Objet : Re : [signature_pad] Largeur et hauteur (#118)

Vous pouvez vérifier la méthode https://github.com/szimek/signature_pad/blob/master/example/js/app.js#L10 -L18 resizeCanvas dans l'application de démonstration. Si vous ajoutez ces 2 lignes à votre démo, cela fonctionne bien :

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

Mon code prend également en compte les écrans Retina, mais pour être honnête, je ne suis pas vraiment sûr qu'il soit correct à 100 %.

—
Répondez directement à cet e-mail ou consultez-le sur GitHub https://github.com/szimek/signature_pad/issues/118#issuecomment -146207233 .

Puis-je suggérer de mettre ces lignes

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

dans la documentation/README ? Il m'a fallu un certain temps pour comprendre cela, et je pense que cela pourrait également être vrai pour les autres inexpérimentés avec <canvas> .

@Boldewyn Merci pour la suggestion. Il y a un PR qui devrait rendre cela plus nécessaire. D'ici la fin de l'année, je vais soit le fusionner et mettre à jour l'application de démonstration, soit ajouter ces informations au README.