Signature_pad: 크기를 조정하면 패드가 지워지지 만 isEmpty ()는 여전히 false를 반환합니다.

캔버스에서 변경 사항을 볼 수 있는지 확실하지 않습니다. 아마도 MutationObserver를 사용하여 변경 사항을 볼 수 있지만 IE10 및 이전 버전에서는 작동하지 않습니다. 캔버스 요소의 크기를 조정할 때 호출 할 수있는 함수를 노출하여 라이브러리에 변경 사항이 있음을 알릴 수 있습니까? 또는 둘 다-함수를 노출하고 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에 감사드립니다!

내 관점에서이 크기 조정은 어떻게 든 내부적으로 처리되어야합니다. 즉, 페이지 크기가 조정되면 캔버스가 자동으로 그려 져야합니다.

onEnd 콜백에 signatureCopy 을 저장하면 훨씬 더 잘 작동합니다 (hasSignature와 함께 또는 더 좋은 방법은 clear 메서드에서 null을 지정하여 하나가 있는지 확인하려면 signatureCopy를 사용하는 것입니다). ). 크기 조정은 많은 브라우저에서 여러 번 실행되기 때문에 여러 번 크기가 조정 된 매우 낮은 품질의 서명으로 끝나지 않습니다.

동일한 문제가 있습니다. 서명 크기 조정이 손실되면 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://github.com/szimek/signature_pad/issues/33#issuecomment -298242020