Signature_pad: Tanda tangan tidak berfungsi Google Chrome, perangkat seluler (lebar >= 1080)

Dibuat pada 18 Mar 2019 · 7Komentar · Sumber: szimek/signature_pad

Hai,

Pertama terima kasih atas pekerjaan Anda.

Kedua, saya memiliki masalah dengan beberapa perangkat seluler _(ponsel pintar dan tablet)_ dengan lebar lebih besar atau sama dengan 1080 piksel _(seperti HTC M9 Plus, Moto g (6) dan Moto g5 Plus, Samsung SM-T385M)_ . Di perangkat ini tanda tangan tidak berfungsi, ketika saya mencoba masuk, halaman melakukan gulir _(atas atau bawah)_ dan hanya menggambar satu titik ke kanvas (lihat gambar) . Masalahnya hanya terjadi di Google Chrome, di Firefox berfungsi dengan baik _(dengan satu atau lebih tanda tangan)_. Dalam kasus lain dengan lebih dari satu tanda tangan, hanya tanda tangan pertama yang berfungsi dan yang lainnya tidak berfungsi -Google Chrome-.

Signature-pad Error

Menonton konsol browser saya menemukan kesalahan ini:
[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

Di baris ini:
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched) { event.preventDefault(); self._strokeEnd(event); } };

Saya mengubahnya menjadi:
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched && event.cancelable) { event.preventDefault(); self._strokeEnd(event); } };

Kesalahan di konsol berhenti muncul, tetapi tanda tangannya belum berfungsi. Saya mencoba dengan versi 2.3.0 dan tidak berhasil juga.

Mungkin Anda punya ide tentang itu?. Terima kasih.

Sumber

cristhianDt

Komentar yang paling membantu

Hai,

Saya memiliki masalah yang sama, saya pikir saya telah memperbaikinya dengan menerapkan yang berikut ini dalam fungsi pemuatan jendela & pengubahan ukuran jendela (saya juga menggunakan 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
});

Saya tidak yakin apakah itu tidak mengikat dan mengikat ulang atau apakah itu mengatur lebar kanvas serta lebar konteks yang tampaknya telah memperbaikinya.

Semoga ini membantu Anda.

Steeveuk pada 26 Apr 2019

👍3

Semua 7 komentar

Saya tidak tahu mengapa itu bisa terjadi. Bisakah Anda menambahkan pendengar untuk acara scroll dan melihat apakah pesan kesalahannya benar, yaitu ada "pengguliran sedang berlangsung"?

OMONG-OMONG. Bisakah Anda mengatur demo di suatu tempat? Saya memiliki tablet Android, yang mungkin memiliki resolusi lebih tinggi dari 1080.

szimek pada 18 Mar 2019

Maaf atas keterlambatannya.

Ya saya bisa.

Biarkan saya melihat apakah saya dapat menyiapkan demo untuk Anda.

cristhianDt pada 20 Mar 2019

@szimek ,

pena kode:

Editor: https://codepen.io/cristhiandt/pen/bZmBQx?editors=1111
Uji di tablet Anda: https://codepen.io/cristhiandt/full/bZmBQx

Saya menambahkan pendengar untuk acara scroll , "menggulir" membuka konsol browser.

cristhianDt pada 20 Mar 2019

@szimek

cristhianDt pada 26 Mar 2019

Hai,

Apakah Anda sudah bisa memeriksanya? @szimek :C

cristhianDt pada 28 Mar 2019

Hai,

Saya memiliki masalah yang sama, saya pikir saya telah memperbaikinya dengan menerapkan yang berikut ini dalam fungsi pemuatan jendela & pengubahan ukuran jendela (saya juga menggunakan 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
});

Saya tidak yakin apakah itu tidak mengikat dan mengikat ulang atau apakah itu mengatur lebar kanvas serta lebar konteks yang tampaknya telah memperbaikinya.

Semoga ini membantu Anda.

Steeveuk pada 26 Apr 2019

👍3

Menurut hal-hal @Steeveuk , Cukup gunakan SignaturePadInstance.off() dan aktifkan kembali dengan SignaturePadInstance.on()