Signature_pad: Lebar dan tinggi

+1 baru saja mencoba paket ini dan mengalami masalah dengan ukuran. Idealnya saya ingin itu menjangkau lebar penuh di perangkat seluler dan lebih kecil di desktop. @szimek ada ide?

Apa sebenarnya masalah dengan ukuran ini?

Ambil contoh ini. Ketika Anda menggambar posisinya salah http://jsfiddle.net/4qjwr06h/1/

Oke aku mungkin bodoh. Jika saya ingin responsif, saya tidak boleh melakukan width: 100% dengan <canvas> karena tidak mengubah lebar kanvas yang sebenarnya tetapi malah meregangkannya. Sebaiknya gunakan lebar tetap sebagai gantinya.

Anda dapat memeriksa metode resizeCanvas di aplikasi demo. Jika Anda menambahkan 2 baris ini ke demo Anda maka itu berfungsi dengan baik:

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

Kode saya juga memperhitungkan devicePixelRatio , tetapi sejujurnya saya tidak begitu yakin apakah itu 100% benar.

Saya pikir saya berhasil, terima kasih kawan

Hidup Yesus

Dari: Szymon Nowak [mailto:[email protected]]
Dikirim: Rabu, 7 Oktober 2015 10:14
Kepada: szimek/signature_pad [email protected]
Cc: crazzeto [email protected]
Perihal: Re: [signature_pad] Lebar dan Tinggi (#118)

Anda dapat memeriksa https://github.com/szimek/signature_pad/blob/master/example/js/app.js#L10 -L18 metode resizeCanvas di aplikasi demo. Jika Anda menambahkan 2 baris ini ke demo Anda maka itu berfungsi dengan baik:

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

Kode saya juga memperhitungkan tampilan retina, tetapi sejujurnya saya tidak begitu yakin apakah itu 100% benar.

—
Balas email ini secara langsung atau lihat di GitHub https://github.com/szimek/signature_pad/issues/118#issuecomment -146207233 .

Bolehkah saya menyarankan untuk meletakkan garis-garis ini

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

di dokumen/README? Butuh beberapa waktu bagi saya untuk mengetahuinya, dan saya pikir itu mungkin juga berlaku untuk orang lain yang tidak berpengalaman dengan <canvas> .

@Boldewyn Terima kasih atas sarannya. Ada PR yang seharusnya membuat ini tidak perlu lagi. Pada akhir tahun, saya akan menggabungkannya dan memperbarui aplikasi demo, atau menambahkan info ini ke README.