Signature_pad: 署名が機能しないGoogleChrome、モバイルデバイス（幅> = 1080）

作成日 2019年03月18日 · 7コメント · ソース: szimek/signature_pad

こんにちは、

まずはお仕事ありがとうございます。

次に、幅が1080ピクセル以上の一部のモバイルデバイス_（スマートフォンおよびタブレット）_（HTC M9 Plus、Moto g（6）およびMoto g5 Plus、Samsung SM-T385Mなど）_に問題があります。。これらのデバイスでは、署名が機能しません。署名しようとすると、ページは_（上または下）_スクロールし、キャンバスにポイントを描画するだけです（画像を見てください） 。この問題はGoogleChromeでのみ発生し、Firefoxでは_（1つ以上の署名で）_正常に動作します。複数の署名がある他のケースでは、最初の署名のみが機能し、他の署名は機能しません-GoogleChrome-。

Signature-pad Error

ブラウザコンソールを見ると、次のエラーが見つかりました。
[Intervention] Ignored attempt to cancel a touch event with cancelable = false, for example because scrolling is in progress and cannot be interrupted signature-pad.js:63

この行で：
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched) { event.preventDefault(); self._strokeEnd(event); } };

私はそれを次のように変更しました：
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched && event.cancelable) { event.preventDefault(); self._strokeEnd(event); } };

コンソールのエラーは表示されなくなりましたが、署名はまだ機能していません。バージョン2.3.0で試しましたが、どちらも機能しません。

多分あなたはそれについて何か考えがありますか？ありがとう。

ソース

cristhianDt

最も参考になるコメント

こんにちは、

私はこれと同じ問題を抱えていました。ウィンドウの読み込みとウィンドウのサイズ変更機能（私もjQueryを使用しています）内に以下を実装することで修正したと思います。

$('canvas.sig_canvas').each(function(){
  var id = $(this).attr('id'); //Get the ID of signature
  var width = $(this).closest('.sig_container').width(); //Get the width of the signature container
  sig_pads[id].off(); //Unbind all events on signature pad (I have an array of them)

  if(!$(this).data('prev_width') || Math.abs(width - $(this).data('prev_width')) > 30){ //Resize threshold 30px, only resize if previous width has changed by 30 pxs
    var ctx = $(this)[0].getContext('2d'); //Get context
    $(this).attr('width', width); //Set canvas width
    ctx.canvas.width  = width; //Set context width
    $(this).data('prev_width', width); //Update prev_width for threshold
  }
  sig_pads[id].on(); //Rebind all signature events
});

バインドを解除して再バインドしたのか、それともキャンバスの幅とそれを修正したと思われるコンテキストの幅を設定していたのかはわかりません。

これがお役に立てば幸いです。

Steeveuk 2019年04月26日

👍3

全てのコメント7件

なぜそれが起こっているのか分かりませんでした。 scrollイベントのリスナーを追加して、エラーメッセージが正しいかどうか、つまり「スクロール中」があるかどうかを確認できますか？

ところで。どこかにデモを設置してもらえますか？私はAndroidタブレットを持っています。これはおそらく1080より高い解像度を持っています。

szimek 2019年03月18日

遅れて申し訳ありません。

はい、できます。

デモを設定できるかどうか見てみましょう。

cristhianDt 2019年03月20日

@szimek 、

Codepen：

編集者： https ：
タブレットでテストする： https ：

scrollイベントのリスナーを追加し、ブラウザコンソールを「スクロール」して開きます。

cristhianDt 2019年03月20日

@szimek

cristhianDt 2019年03月26日

こんにちは、

確認できましたか？ @szimek ：C

cristhianDt 2019年03月28日

こんにちは、

$('canvas.sig_canvas').each(function(){
  var id = $(this).attr('id'); //Get the ID of signature
  var width = $(this).closest('.sig_container').width(); //Get the width of the signature container
  sig_pads[id].off(); //Unbind all events on signature pad (I have an array of them)

  if(!$(this).data('prev_width') || Math.abs(width - $(this).data('prev_width')) > 30){ //Resize threshold 30px, only resize if previous width has changed by 30 pxs
    var ctx = $(this)[0].getContext('2d'); //Get context
    $(this).attr('width', width); //Set canvas width
    ctx.canvas.width  = width; //Set context width
    $(this).data('prev_width', width); //Update prev_width for threshold
  }
  sig_pads[id].on(); //Rebind all signature events
});

これがお役に立てば幸いです。

Steeveuk 2019年04月26日

👍3

@Steeveukによると、SignaturePadInstance.off（）を使用し、SignaturePadInstance.on（）で再度有効にするだけです。

DvirH 2019年05月14日

👍1

このページは役に立ちましたか？

0 / 5 - 0 評価

Signature_pad: 署名が機能しないGoogleChrome、モバイルデバイス（幅&gt; = 1080）

最も参考になるコメント

全てのコメント7件

関連する問題

Signature_pad: 署名が機能しないGoogleChrome、モバイルデバイス（幅> = 1080）