Signature_pad: Breite und Höhe

+1 habe dieses Paket gerade ausprobiert und Probleme mit der Größenanpassung. Idealerweise möchte ich, dass es sich auf Mobilgeräten über die volle Breite erstreckt und auf Desktops kleiner ist. @szimek irgendwelche Ideen?

Was genau sind diese Probleme mit der Dimensionierung?

Nehmen Sie dieses Beispiel. Beim Zeichnen ist die Position falsch http://jsfiddle.net/4qjwr06h/1/

Ok ich stell mich wahrscheinlich blöd an. Wenn ich möchte, dass es reagiert, sollte ich width: 100% nicht mit <canvas> machen, da es nicht die tatsächliche Breite der Leinwand ändert, sondern sie stattdessen dehnt. Sollte stattdessen feste Breiten verwenden.

Sie können die Methode resizeCanvas in der Demo-App überprüfen. Wenn Sie diese 2 Zeilen zu Ihrer Demo hinzufügen, funktioniert es einwandfrei:

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

Mein Code berücksichtigt auch devicePixelRatio , aber um ehrlich zu sein, bin ich mir nicht sicher, ob es 100% richtig ist.

Ich glaube, ich habe es funktioniert, danke Jungs

Vivat Jesus

Von: Szymon Nowak [mailto:[email protected]]
Gesendet: Mittwoch, 7. Oktober 2015, 10:14 Uhr
An: szimek/signature_pad [email protected]
Cc: crazzeto [email protected]
Betreff: Betreff: [signature_pad] Breite und Höhe (#118)

Sie können die Methode https://github.com/szimek/signature_pad/blob/master/example/js/app.js#L10 -L18 resizeCanvas in der Demo-App überprüfen. Wenn Sie diese 2 Zeilen zu Ihrer Demo hinzufügen, funktioniert es einwandfrei:

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

Mein Code berücksichtigt auch Retina-Displays, aber um ehrlich zu sein, bin ich mir nicht sicher, ob es 100% richtig ist.

—
Antworten Sie direkt auf diese E-Mail oder sehen Sie sie auf GitHub https://github.com/szimek/signature_pad/issues/118#issuecomment -146207233 an.

Darf ich vorschlagen, diese Zeilen zu setzen

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

in der Dokumentation/README? Ich habe einige Zeit gebraucht, um das herauszufinden, und ich denke, das könnte auch für andere gelten, die mit <canvas> unerfahren sind.

@ Boldewyn Danke für den Vorschlag. Es gibt eine PR, die dies nicht mehr nötig machen sollte. Bis Ende des Jahres werde ich es entweder zusammenführen und die Demo-App aktualisieren oder diese Informationen zur README hinzufügen.