Signature_pad: 调整大小可清除填充，但isEmpty（）仍返回false

我不确定是否可以在画布上观看更改...也许可以使用MutationObserver，但是在IE10和更早版本中将无法使用。 也许它可以简单地公开一个函数，当您调整canvas元素的大小以使库知道发生了某些变化时可以调用该函数？ 或两者-公开一个函数并使用MutationObserver在受支持的浏览器上自动调用它...

不过，解决方法也不太困难。 我在调整大小例程的末尾添加了一个SignaturePad.clear（）调用，这几乎解决了这个问题。

我忘记了#clear已经将isEmpty为true ：)无论如何，在演示页面中调用#clear以及注释为什么会出现是一个好主意，所以我会一直打开它，直到我有时间去做。

总而言之，由于这个问题和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/复制

我最终向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 :