Signature_pad: 高DPI画面デバイスのfromDataURLのバグ

作成日 2016年03月10日  ·  3コメント  ·  ソース: szimek/signature_pad

説明

メソッドfromDataURLは、ピクセル比1のないデバイス、たとえばDPIの高いモバイルデバイスでは奇妙に動作することがわかりました。
高DPI画面の処理について説明しているREADME
ただし、キャンバスのサイズが固定されている場合は、 fromDataURLを使用して問題を再現できます。 この画像の拡大縮小がこの問題の原因います
このJSFiddleを使用し

再現する手順

  1. ピクセル比が1でないデバイスで、上記の説明にリンクされているJSFiddledを開き、署名パッドに何かを書き込みます。
  2. [保存]をクリックします。
    1_after_save
  3. [編集]をクリックします。
  4. パッドにもう少し書いてください。
    2_before_cancel
  5. [キャンセル]をクリックします

    期待される結果

署名パッドは、手順2の後とまったく同じように表示されます。

実際の結果

署名パッドの変更は元に戻されますが、画像は拡大縮小されているため、手順2以降のパッドの変更とは異なって見えます。
3_after_cancel

最も参考になるコメント

こんにちは、

私もこの問題に出くわしました。 これは予期しない動作です。 そのような変更が必要かどうかを選択する必要があると思います(したがって、以前の動作をデフォルトにした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;

全てのコメント3件

こんにちは、

私もこの問題に出くわしました。 これは予期しない動作です。 そのような変更が必要かどうかを選択する必要があると思います(したがって、以前の動作をデフォルトにした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;
    }
  }
このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

derUli picture derUli  ·  3コメント

davidosuna1987 picture davidosuna1987  ·  11コメント

Sparticuz picture Sparticuz  ·  7コメント

Zuldra picture Zuldra  ·  4コメント

50l3r picture 50l3r  ·  3コメント