Signature_pad: mengubah ukuran membersihkan pad tetapi isEmpty () masih mengembalikan false

Saya tidak yakin apakah mungkin untuk menonton perubahan di kanvas ... mungkin dengan MutationObserver, tetapi itu tidak akan berfungsi di IE10 dan sebelumnya. Mungkin itu bisa dengan mudah mengekspos fungsi yang bisa Anda panggil saat Anda mengubah ukuran elemen kanvas untuk memberi tahu perpustakaan bahwa ada sesuatu yang berubah? Atau keduanya - tampilkan fungsi dan gunakan MutationObserver untuk memanggilnya secara otomatis di browser yang didukung ...

Namun, penyelesaiannya tidak terlalu sulit. Saya telah menambahkan panggilan SignaturePad.clear () di akhir rutinitas pengubahan ukuran dan itu cukup banyak menyelesaikan masalah.

Saya lupa bahwa #clear sudah menetapkan isEmpty menjadi true :) Bagaimanapun, mungkin ide yang bagus untuk memanggil #clear di halaman demo juga dengan komentar mengapa itu ada, jadi Saya akan membiarkannya terbuka sampai saya punya waktu untuk melakukannya.

Semua dalam semua, karena ini dan masalah # 32 saya akhirnya menggunakan variabel pembantu, hasSignature sebagai berikut.

        signaturePad = new SignaturePad(canvas, {
            onEnd: function() {
                hasSignature = true;
            }
        });

dan

clearButtonAction = function () {
    hasSignature = false;
    signaturePad.clear();
}

Dengan itu saya kemudian dapat melanjutkan untuk menandai kanvas sebagai jelas, atau, ketika ada tanda tangan, salin-tempel tanda tangan tersebut.

        var resizeCanvas = function () {
            if (hasSignature) {
                signatureCopy = signaturePad.toDataURL();
            }

            var ratio = window.devicePixelRatio || 2;

            // Note fixed width:height ratio. No need for dynamic height.       
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = Math.floor(canvas.offsetWidth/3) * ratio; 
            canvas.getContext("2d").scale(ratio, ratio);

            // Line width is relative to canvas size to prevent different
            // width after orientation changes.
            signaturePad.minWidth = canvas.offsetWidth / 1000;
            signaturePad.maxWidth = signaturePad.minWidth * 5;

            if (hasSignature) {
                signaturePad.fromDataURL(signatureCopy);
            } else {
                // signaturePad doesn't watch canvas and needs to be told it's clear now
                signaturePad.clear(); 
            }
        }

Seperti disebutkan di # 32, salinan akhirnya sedikit kabur tetapi jauh lebih baik daripada kehilangan tanda tangan sama sekali.

Ngomong-ngomong, terima kasih banyak untuk perangkat lunak yang hebat, Szymon!

Dari sudut pandang saya, pengubahan ukuran ini harus ditangani secara internal, maksud saya saat halaman diubah ukurannya, kanvas harus menggambar otomatis sendiri.

Ini bekerja jauh lebih baik jika Anda menyimpan signatureCopy dalam callback onEnd (bersama dengan hasSignature, atau lebih baik lagi, gunakan signatureCopy untuk menentukan apakah Anda memilikinya atau tidak dengan membatalkannya di metode yang jelas ). Karena pengubahan ukuran diaktifkan beberapa kali di banyak browser, hal ini menghentikan Anda untuk mendapatkan tanda tangan berkualitas sangat rendah yang telah diubah ukurannya beberapa kali.

Memiliki masalah yang sama: ketika mengubah ukuran tanda tangan hilang, dapat direproduksi di http://szimek.github.io/signature_pad/

Saya akhirnya menambahkan 2 baris ke resizecanvas () seperti di bawah ini dan sejauh ini telah bekerja dengan lancar di IE / FF / Chrome-

function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.

    var data = signaturePad.toDataURL(); //Added

    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);

    signaturePad.fromDataURL(data); //Added
}

@niteshluharuka Apakah Anda mengalami masalah saat tanda tangan menjadi kabur saat diubah ukurannya?

Sebelum mengubah ukuran

Setelah mengubah ukuran

@iamjoyce tidak, itu adalah masalah berbeda dari seluruh kanvas yang dibersihkan. tidak pernah mengalami masalah buram :)

Mungkin ini membantu: https://github.com/szimek/signature_pad/issues/33#issuecomment -298242020