Signature_pad: le redimensionnement efface le pad mais isEmpty () retourne toujours false

Je ne sais pas s'il est possible de regarder les changements sur canvas ... peut-être avec MutationObserver, mais cela ne fonctionnerait pas dans IE10 et les versions antérieures. Peut-être que cela pourrait simplement exposer une fonction que vous pouvez appeler lorsque vous redimensionnez l'élément canvas pour informer la bibliothèque que quelque chose a changé? Ou les deux - exposez une fonction et utilisez MutationObserver pour l'appeler automatiquement sur les navigateurs pris en charge ...

La solution de contournement n'est cependant pas trop difficile. J'ai ajouté un appel SignaturePad.clear () à la fin de la routine de redimensionnement et cela résout à peu près le problème.

J'ai oublié que #clear définit déjà isEmpty sur true :) Quoi qu'il en soit, c'est probablement une bonne idée d'appeler #clear dans la page de démonstration également avec un commentaire pourquoi il est là, alors Je vais le laisser ouvert jusqu'à ce que j'aie le temps de le faire.

Dans l'ensemble, à cause de cela et du problème # 32, j'ai fini par utiliser une variable d'assistance, hasSignature comme suit.

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

et

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

Avec cela, je pourrais ensuite marquer le canevas comme clair ou, lorsqu'une signature est présente, copier-coller la signature.

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

Comme mentionné dans le n ° 32, la copie finit par être un peu floue, mais c'est beaucoup mieux que de perdre complètement la signature.

Quoi qu'il en soit, merci beaucoup pour un excellent logiciel, Szymon!

De mon point de vue, ce redimensionnement doit être géré en interne d'une manière ou d'une autre, je veux dire lorsque la page est redimensionnée, le canevas doit se dessiner automatiquement.

Cela fonctionne beaucoup mieux si vous stockez signatureCopy dans le rappel onEnd (avec le hasSignature, ou mieux encore, utilisez signatureCopy pour déterminer si vous en avez un ou non en l'annulant dans la méthode clear ). Étant donné que le redimensionnement se déclenche plusieurs fois dans de nombreux navigateurs, cela vous empêche de vous retrouver avec une signature de très mauvaise qualité qui a été redimensionnée plusieurs fois.

Ayant le même problème: lors du redimensionnement de la signature est perdue, peut être reproduite à http://szimek.github.io/signature_pad/

J'ai fini par ajouter 2 lignes au resizecanvas () comme ci-dessous et cela a fonctionné jusqu'à présent sans problème dans 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 Rencontrez -vous ce problème où la signature devient floue lors du redimensionnement?

Avant de redimensionner

Après redimensionnement

@iamjoyce non, c'était une question différente de nettoyer toute la toile. jamais rencontré de problème flou :)

Peut-être que cela aide: https://github.com/szimek/signature_pad/issues/33#issuecomment -298242020