Signature_pad: изменение размера очищает панель, но isEmpty () по-прежнему возвращает 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, чтобы определить, есть ли у вас один или нет, обнуляя его в методе clear. ). Поскольку изменение размера запускается несколько раз во многих браузерах, это не дает вам получить подпись сверхнизкого качества, размер которой был изменен несколько раз.

Имеет ту же проблему: при изменении размера подпись теряется, ее можно воспроизвести на http://szimek.github.io/signature_pad/

В итоге я добавил 2 строки в 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