Signature_pad: Durch Ändern der Größe wird das Pad gelöscht, aber isEmpty () gibt weiterhin false zurück

Ich bin mir nicht sicher, ob es möglich ist, Änderungen auf Leinwand zu sehen ... vielleicht mit MutationObserver, aber das würde in IE10 und früher nicht funktionieren. Vielleicht könnte es einfach eine Funktion verfügbar machen, die Sie aufrufen können, wenn Sie die Größe des Canvas-Elements ändern, um die Bibliothek darüber zu informieren, dass sich etwas geändert hat? Oder beides - machen Sie eine Funktion verfügbar und rufen Sie sie mit MutationObserver automatisch in unterstützten Browsern auf ...

Die Problemumgehung ist jedoch nicht allzu schwierig. Ich habe am Ende der Größenänderungsroutine einen SignaturePad.clear () -Aufruf hinzugefügt, der das Problem so gut wie löst.

Ich habe vergessen, dass #clear bereits isEmpty auf true setzt :) Wie auch immer, es ist wahrscheinlich eine gute Idee, #clear auf der Demoseite mit einem Kommentar zu nennen, warum es dort ist Ich werde es offen lassen, bis ich Zeit habe, es zu tun.

Alles in allem habe ich aus diesem Grund und aufgrund von Problem Nr. 32 die Hilfsvariable hasSignature wie folgt verwendet.

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

und

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

Damit könnte ich dann die Leinwand als klar markieren oder, wenn eine Signatur vorhanden ist, die Signatur kopieren und einfügen.

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

Wie in # 32 erwähnt, ist die Kopie etwas unscharf, aber es ist viel besser, als die Signatur insgesamt zu verlieren.

Wie auch immer, vielen Dank für eine großartige Software, Szymon!

Aus meiner Sicht sollte diese Größenänderung irgendwie intern gehandhabt werden. Ich meine, wenn die Größe der Seite geändert wird, sollte sich die Zeichenfläche automatisch selbst zeichnen.

Dies funktioniert viel besser, wenn Sie signatureCopy im onEnd -Rückruf speichern (zusammen mit der hasSignature oder noch besser mit signatureCopy, um festzustellen, ob Sie eine haben oder nicht, indem Sie sie in der Löschmethode auf Null setzen ). Da die Größenänderung in vielen Browsern mehrmals ausgelöst wird, erhalten Sie keine Signatur von sehr geringer Qualität, deren Größe mehrmals geändert wurde.

Das gleiche Problem: Wenn die Größe der Signatur verloren geht, kann sie unter http://szimek.github.io/signature_pad/ reproduziert werden.

Am Ende habe ich 2 Zeilen zu den resizecanvas () hinzugefügt (siehe unten) und es hat bisher reibungslos in IE / FF / Chrome- funktioniert.

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 Tritt dieses Problem auf, bei dem die Signatur beim

Vor dem Ändern der Größe

Nach der Größenänderung

@iamjoyce nein, es war ein anderes Problem, bei dem die gesamte Leinwand gelöscht wurde. nie auf verschwommenes Problem gestoßen :)

Vielleicht hilft dies: https://github.com/szimek/signature_pad/issues/33#issuecomment -298242020