Signature_pad: サイズを変更するとパッドはクリアされますが、isEmpty（）は引き続きfalseを返します

キャンバス上で変更を監視できるかどうかはわかりません...おそらくMutationObserverを使用しますが、IE10以前では機能しません。 たぶん、canvas要素のサイズを変更したときに呼び出すことができる関数を公開して、何かが変更されたことをライブラリに通知することができますか？ または両方-関数を公開し、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メソッドでnullにすることにより、存在するかどうかを判断する場合に、はるかにうまく機能します。 ）。 多くのブラウザでサイズ変更が複数回発生するため、これにより、複数回サイズ変更された超低品質の署名になってしまうのを防ぐことができます。

同じ問題があります：署名のサイズ変更が失われた場合、 http：//szimek.github.io/signature_pad/で再現できます

以下のようにresizecanvas（）に2行追加することになり、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 ：