メソッドfromDataURL
は、ピクセル比1のないデバイス、たとえばDPIの高いモバイルデバイスでは奇妙に動作することがわかりました。
高DPI画面の処理について説明しているREADMEの
ただし、キャンバスのサイズが固定されている場合は、 fromDataURL
を使用して問題を再現できます。 この画像の拡大縮小がこの問題の原因います。
このJSFiddleを使用し
署名パッドは、手順2の後とまったく同じように表示されます。
署名パッドの変更は元に戻されますが、画像は拡大縮小されているため、手順2以降のパッドの変更とは異なって見えます。
こんにちは、
私もこの問題に出くわしました。 これは予期しない動作です。 そのような変更が必要かどうかを選択する必要があると思います(したがって、以前の動作をデフォルトにした2番目の引数で問題ありません)。 主な理由は、そのようなことが他の場所では自動的に行われないためです。
調査してくれた@siggifvに感謝します、あなたは私に時間を節約してくれました。
今のところ、キャンバスに手動でデータを入力する方法は次のとおりです。
var image = new Image();
signaturePad.clear();
image.src = dataURL;
image.onload = function () {
signatureCanvas = document.querySelector("#signature-pad");
signatureCanvas.getContext("2d").drawImage(image, 0, 0, width, height);
};
this.signaturePad._isEmpty = false;
こんにちはDurasj、
どうもありがとう...苦労していて、私の角度指令であなたの解決策を使用してきました。
こんにちは@durasjどうもありがとう、完璧に動作します
アクセサのwriteValue
私の例
writeValue(value: string): void {
if (!value) {
this.signaturePad.clear();
return;
}
this.value = value;
this._drawValueToCanvas();
this.cdr.markForCheck();
}
/** Draw from image according to retina or some devices */
_drawValueToCanvas() {
if (this.canvas != null) {
const image = new Image();
this.signaturePad.clear();
image.src = this.value;
image.onload = () =>
this.canvas
.getContext('2d')
.drawImage(image, 0, 0, 300, 120);
this.signaturePad._isEmpty = false;
}
}
最も参考になるコメント
こんにちは、
私もこの問題に出くわしました。 これは予期しない動作です。 そのような変更が必要かどうかを選択する必要があると思います(したがって、以前の動作をデフォルトにした2番目の引数で問題ありません)。 主な理由は、そのようなことが他の場所では自動的に行われないためです。
調査してくれた@siggifvに感謝します、あなたは私に時間を節約してくれました。
今のところ、キャンバスに手動でデータを入力する方法は次のとおりです。