Signature_pad: आकार बदलने से पैड साफ़ हो जाता है लेकिन अभी भी खाली है () अभी भी गलत है

मुझे यकीन नहीं है कि अगर कैनवास पर बदलाव देखना संभव है ... शायद MutationObserver के साथ, लेकिन वह IE10 और इससे पहले काम नहीं करेगा। हो सकता है कि यह केवल एक फ़ंक्शन को उजागर कर सकता है जिसे आप कॉल कर सकते हैं जब आप कैनवास तत्व का आकार बदलकर लाइब्रेरी को बताएंगे कि कुछ बदल गया है? या दोनों - एक फ़ंक्शन को उजागर करें और समर्थित ब्राउज़र पर इसे स्वचालित रूप से कॉल करने के लिए MutationObserver का उपयोग करें ...

वर्कअराउंड हालांकि, बहुत मुश्किल नहीं है। मैंने एक नियमित रूटीन के अंत में SignaturePad.clear () कॉल जोड़ा है और यह समस्या को हल करता है।

मैं भूल गया कि #clear पहले से ही isEmpty true पर सेट है :) वैसे भी, डेमो पेज में #clear कॉल करना एक अच्छा विचार है और साथ ही एक टिप्पणी भी है कि ऐसा क्यों है, इसलिए मैं इसे तब तक खुला छोड़ता हूँ जब तक कि मेरे पास इसे करने का समय नहीं है।

सभी, इस वजह से और # 32 के कारण मैं एक सहायक चर का उपयोग कर समाप्त हो गया, hasSignature इस प्रकार है।

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

तथा

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

उसके बाद मैं कैनवास को स्पष्ट रूप से चिह्नित करने के लिए आगे बढ़ सकता हूं, या जब कोई हस्ताक्षर मौजूद हो, तो हस्ताक्षर को कॉपी-पेस्ट करें।

        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(); 
            }
        }

जैसा कि # 32 में उल्लेख किया गया है, प्रतिलिपि थोड़ी सी धुंधली हो जाती है, लेकिन यह पूरी तरह से हस्ताक्षर खोने से बेहतर है।

वैसे भी, सॉफ्टवेयर का एक बड़ा टुकड़ा के लिए एक टन धन्यवाद, Szymon!

मेरे दृष्टिकोण से, इस आकार को किसी भी तरह से आंतरिक रूप से संभाला जाना चाहिए, मेरा मतलब है कि जब पृष्ठ आकार बदलता है, तो कैनवास को अपने आप ऑटोड्रॉव होना चाहिए।

यदि आप signatureCopy onEnd कॉलबैक (hasSignature के साथ, या बेहतर अभी तक) संग्रहीत करते हैं, तो यह बहुत बेहतर काम करता है, यह निर्धारित करने के लिए कि क्या आपके पास एक है या नहीं, यह स्पष्ट विधि से nulling करके सिग्नेचर कॉपी का उपयोग करें। )। चूंकि कई ब्राउज़रों में कई बार आग लग जाती है, यह आपको एक सुपर कम गुणवत्ता वाले हस्ताक्षर के साथ समाप्त होने से रोकता है जिसे कई बार बदल दिया गया है।

समान समस्या होने पर: जब हस्ताक्षर का आकार बदल जाता है, तो उसे http://szimek.github.io/signature_pad/ पर पुन: प्रस्तुत किया जा सकता है

मैंने रिज़ेज़ेकेनवास () के लिए नीचे के रूप में 2 लाइनें जोड़ दीं और यह 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 क्या आप इस मुद्दे का सामना कर रहे हैं जिसके तहत हस्ताक्षर को आकार बदलने पर धुंधला हो जाता है?

आकार बदलने से पहले

आकार बदलने के बाद

@ डायमोजस नं, यह पूरे कैनवास के अलग होने का मुद्दा था। धुंधली समस्या का सामना कभी नहीं किया :)

शायद इससे मदद मिलती है: https://github.com/szimek/signature_pad/issues/33#issuecomment -298242020