Signature_pad: resizing limpa o pad, mas isEmpty () ainda retorna falso

Não tenho certeza se é possível observar as alterações na tela ... talvez com MutationObserver, mas isso não funcionaria no IE10 e anteriores. Talvez pudesse simplesmente expor uma função que você pode chamar ao redimensionar o elemento de tela para que a biblioteca saiba que algo mudou. Ou ambos - exponha uma função e use MutationObserver para chamá-la automaticamente em navegadores compatíveis ...

A solução alternativa não é muito difícil, no entanto. Eu adicionei uma chamada SignaturePad.clear () no final da rotina de redimensionamento e isso praticamente resolve o problema.

Eu esqueci que #clear já define isEmpty como verdadeiro :) De qualquer forma, é provavelmente uma boa ideia chamar #clear na página de demonstração também com um comentário por que está lá, então Vou deixar aberto até ter tempo para fazer isso.

Resumindo, por causa disso e do problema nº 32 , acabei usando uma variável auxiliar, hasSignature , da seguinte maneira.

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

e

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

Com isso, eu poderia prosseguir para marcar a tela como transparente ou, quando houver uma assinatura, copiar e colar a assinatura.

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

Conforme mencionado no item 32, a cópia acaba um pouco borrada, mas é muito melhor do que perder a assinatura por completo.

De qualquer forma, muito obrigado por um ótimo software, Szymon!

Do meu ponto de vista, esse redimensionamento deve ser tratado internamente de alguma forma, ou seja, quando a página é redimensionada, a tela deve se autodraw.

Isso funciona muito melhor se você armazenar signatureCopy no retorno de chamada onEnd (junto com o hasSignature, ou melhor ainda, use signatureCopy para determinar se você tem um ou não anulando-o no método clear ) Como o redimensionamento dispara várias vezes em muitos navegadores, isso impede que você termine com uma assinatura de qualidade extremamente baixa que foi redimensionada várias vezes.

Tendo o mesmo problema: ao perder o redimensionamento da assinatura, pode ser reproduzido em http://szimek.github.io/signature_pad/

Acabei adicionando 2 linhas ao resizecanvas () como abaixo e tem funcionado até agora bem no 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 Você encontra esse problema que faz com que a assinatura fique borrada ao ser redimensionada?

Antes de redimensionar

Após redimensionar

@iamjoyce não, era uma questão diferente de limpar a tela inteira. nunca encontrou o problema borrado :)

Talvez isso ajude: https://github.com/szimek/signature_pad/issues/33#issuecomment -298242020