Signature_pad: Tingkatkan kualitas gambar

Ini adalah eksperimen cepat dan kotor yang saya buat musim panas lalu. Idenya adalah untuk menghaluskan jalur dengan fungsi di atas jendela yang bergerak. Jendela diatur dalam kode tetapi dapat disesuaikan berdasarkan kecepatan. Untuk kesederhanaan saya menggunakan lebar pena tetap.
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

kl.

@claudiorivetti Itu benar-benar luar biasa! Saya akan mengeceknya. Saya ingat salah satu aplikasi menggambar Google menggunakan solusi yang sama. Namun, yang aneh dari iMessage adalah lag-nya tidak lebih lama dari pada library ini...

Jika Anda menggunakan jari untuk menggambar, alih-alih stylus, titik sentuhnya cukup lebar (pasti lebih lebar dari satu piksel) dan saya tidak begitu yakin bagaimana aplikasi seluler atau browser benar-benar mengetahui koordinat yang tepat dari peristiwa sentuh sedemikian rupa. kasus. Mungkin dimungkinkan untuk entah bagaimana menyesuaikan koordinat yang diterima oleh browser berdasarkan koordinat titik sebelumnya dan kecepatan saat ini dan tidak hanya menginterpolasi jalur di antara mereka. Saya tidak yakin apakah itu masuk akal atau apakah saya akan punya waktu untuk bereksperimen dengannya. Saya harus membuat titik-titik terlihat untuk melihat apakah kurva itu sendiri dapat ditingkatkan atau jika titik-titik tidak berada di sepanjang garis "ideal".

@claudiorivetti Itu indah, bagaimana saya bisa mendapatkan sihir seperti itu? :) Memang harus sedikit lebih realistis, baik sepenuhnya dinamis, atau mungkin hanya garis yang lebih tebal mungkin sudah cukup.

Kebanyakan orang yang saya amati menulis lambat untuk beberapa alasan dan sepertinya dari tahun 90-an. Saya tidak bisa menghilangkan sudut yang sulit dengan mengubah parameter input SignaturePad:

( PS: Tidak masalah apakah di Desktop, iPhone, dengan pena tablet atau hanya jari. Itu selalu terlihat sama. Kanvasnya berukuran 1200x600 piksel pada skala 3,3 (jadi, 400x400px). Saya rasa tidak penyelesaiannya adalah masalahnya)

Yang mengejutkan saya adalah bahwa perpustakaan lain tidak memiliki lebar dinamis sama sekali, tetapi umumnya tampak "lebih bersih" bagi saya. Misal dibandingkan dengan gambar yang saya posting di atas.

supersignature otomatis memperbaiki kurva

jSignature ) sedikit lebih goyah, tetapi masih tidak pixelish.

@halo Saya ingin menghindari pasca-pemrosesan/perbaikan otomatis, meskipun saya setuju bahwa hasilnya biasanya jauh lebih baik. Masalahnya adalah, setidaknya di iMessage, dimungkinkan untuk memiliki garis-garis halus tanpa pasca-pemrosesan yang terlihat. Ada beberapa hal yang ingin saya coba, misalnya melewatkan poin yang terlalu dekat satu sama lain. Pelambatan telah ditambahkan baru-baru ini, tetapi jika seseorang menggambar sangat lambat, itu tidak akan banyak membantu.

Hal lain adalah saya tidak menggunakan perpustakaan ini lagi, jadi kecuali saya menemukan beberapa contoh bagaimana memberikan garis yang lebih halus (seperti yang saya lakukan dengan posting oleh Square ) saya rasa saya tidak akan punya banyak waktu untuk menyelidikinya saya sendiri.

@halo Saya melakukan eksperimen cepat, di mana saya melewatkan satu poin jika terlalu dekat dengan yang sebelumnya. Tampaknya meningkatkan kualitas gambar saat seseorang menggambar sangat lambat, tetapi menimbulkan jeda yang nyata. Masih cukup jauh dari apa yang mungkin dilakukan di iOS iMessage atau aplikasi Notes:/ Demo tersedia di http://signature-pad.surge.sh/ dan Anda dapat mencoba mengubah nilai signaturePad.minDistance untuk melihat bagaimana dampaknya gambaran. Nilai default adalah 5, yang berarti bahwa jika titik sebelumnya lebih dekat dari 5px ke yang baru, yang baru akan dilewati.

Juga, saya menambahkan pengaturan waktu menggunakan fungsi performance.now ke #_updateStroke (tidak ada dalam demo) dan, kecuali ada sesuatu yang tidak sinkron atau saya mengacaukan sesuatu, sepertinya dibutuhkan kurang dari 1 milidetik untuk menambahkan titik dan menggambar kurva. Itu berarti ada banyak waktu untuk melakukan pemrosesan yang lebih mewah.

Saya akan sangat berterima kasih mencoba ini dalam produksi dengan pengguna nyata dan memberi Anda umpan balik. Apakah Anda memiliki cabang di Github atau file dist yang dapat saya gunakan?

Saya suka pendekatannya, terima kasih banyak telah mencobanya.

EDIT : Saya rasa saya bisa menggunakan http://signature-pad.surge.sh/js/signature_pad.js

@halo Jika Anda ingin membuat versi Anda sendiri (mis. diperkecil), saya baru saja mendorongnya ke https://github.com/szimek/signature_pad/tree/improve-drawing-quality branch.

Terima kasih, saya baru saja mengambil yang dikompilasi dari halaman demo dan menyebarkannya ke produksi. Akan memberi tahu Anda bagaimana penerimaannya dalam 1-3 minggu ke depan.

@halo & @szimek - lihat dua tautan ini, semoga bermanfaat

• http://paperjs.org/examples/path-simplification/
• http://thejosephturner.com/simpleline/

@fa-at-pulsit Terima kasih! Namun, kedua contoh menyederhanakan jalur setelah pengguna berhenti menggambarnya, yang ingin saya hindari. Mungkin saya akan menyerah di beberapa titik dan hanya menggunakan solusi ini, tetapi saya berharap ini mungkin untuk mendapatkan hasil yang lebih baik tanpa latensi yang nyata.

Saya ingin menghindari pasca-pemrosesan/perbaikan otomatis

Hanya karena penasaran, mengapa demikian?

• [ ] Menjaga kode tetap sederhana dan kuat, menghindari bug
• [ ] Tidak mengacaukan pengalaman pengguna akhir dengan gangguan visual
• [ ] Lock-in yang mencegah misalnya mengekspos aliran gambar saat menulis
• [ ] Solusi pasca-pemrosesan yang ada tidak cukup matang

Omong-omong, dari umpan balik subjektif yang saya terima dari pengguna akhir selama seminggu terakhir, saya dapat mengatakan bahwa kualitas gambar telah segera ditangkap sebagai "jelas meningkat" (oleh penandatangan berulang secara teratur). Saya akan melihat apakah saya bisa mendapatkan lebih banyak daging ke tulang, namun saya tidak akan dapat mengekspos tanda tangan dunia nyata di sini untuk perbandingan.

Yang bisa saya katakan adalah bahwa kebanyakan orang menulis dengan sangat lambat dan kecil, sekarang tidak peduli seberapa banyak Anda memberi tahu mereka. ;) Juga, saya menduga perangkat (Surface Pro) menjadi penyebab utama. Pada titik tertentu menggunakan iPad dengan salah satu pena baru yang mewah itu dapat memberi saya lebih banyak wawasan tentang itu.

@szimek contoh lain ini menyederhanakan jalur dengan cepat (saya pikir begitu)
lihat video ini https://www.youtube.com/watch?v=H79iUsai6uc
sumber -> https://github.com/eur00t/Effective-Curve-Fitting
dan saya mendapatkan efek yang jauh lebih baik pada retina dengan pengubahan ukuran kanvas seperti
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@fa-at-pulsit Terima kasih! Saya bermain sedikit lebih banyak dengan aplikasi iMessage dan (mungkin berkat iPhone 5) saya yang sangat lambat, saya perhatikan bahwa itu juga melakukan pasca-pemrosesan dengan cepat, tetapi sangat halus dan hampir tidak terlihat.

Saya harus merilis versi baru dengan beberapa perbaikan bug terlebih dahulu, tetapi kemudian saya akan mencoba untuk merilis versi baru dengan opsi melewatkan poin yang terlalu dekat satu sama lain dan kemudian melihat ini dengan cepat pasca-pemrosesan - ini terlihat sangat menjanjikan.

Jadi, setelah 1,5 bulan berproduksi, saya dapat dengan yakin mengatakan bahwa kualitasnya telah meningkat pesat dengan PR ini. Beberapa lusin orang telah menandatangani lagi dan lagi dan itu terlihat jauh lebih baik dibandingkan dengan apa yang tampak seperti tanda tangan mereka sebelumnya.

Saya harus merilis versi baru dengan beberapa perbaikan bug terlebih dahulu, tetapi kemudian saya akan mencoba untuk merilis versi baru dengan opsi melewatkan poin yang terlalu dekat satu sama lain

Hai! Apakah Anda akan membutuhkan kompatibilitas mundur? Atau hanya komit ini saja?

EDIT: Ya ampun, sudah digabung melalui komit ini kan? Terima kasih memang!!

Apakah ada cara untuk meningkatkan kecepatan menggambar?