Signature_pad: يؤدي تغيير الحجم إلى مسح اللوحة ولكن يظل فارغ () يُرجع القيمة false

لست متأكدًا مما إذا كان من الممكن مشاهدة التغييرات على القماش ... ربما باستخدام 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 ، أو الأفضل من ذلك ، استخدم signatureCopy لتحديد ما إذا كان لديك واحد أم لا عن طريق إلغاءه في الطريقة الواضحة ). نظرًا لأن تغيير الحجم حرائق عدة مرات في العديد من المتصفحات ، فإن هذا يمنعك من الحصول على توقيع منخفض الجودة للغاية تم تغيير حجمه عدة مرات.

تواجه نفس المشكلة: عند فقدان التوقيع ، يمكن إعادة إنتاجه على http://szimek.github.io/signature_pad/

انتهى بي الأمر بإضافة سطرين إلى resizecanvas () على النحو التالي وقد عملت بسلاسة حتى الآن في 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 هل تواجه هذه المشكلة حيث يصبح التوقيع ضبابيًا عند تغيير الحجم؟

قبل تغيير الحجم

بعد تغيير الحجم

iamjoyce لا ، لقد كانت مشكلة مختلفة في إزالة القماش بالكامل. لم تواجه مشكلة ضبابية :)

ربما يساعد هذا: https://github.com/szimek/signature_pad/issues/33#issuecomment -298242020