Signature_pad: التوقيع لا يعمل Google Chrome والأجهزة المحمولة (العرض> = 1080)

تم إنشاؤها على ١٨ مارس ٢٠١٩ · 7تعليقات · مصدر: szimek/signature_pad

مرحبا،

أولا أشكرك على عملك.

ثانيًا ، لدي مشكلة مع بعض الأجهزة المحمولة _ (الهواتف الذكية والأجهزة اللوحية) _ بعرض أكبر من أو يساوي 1080 بكسل _ (مثل HTC M9 Plus و Moto g (6) و Moto g5 Plus و Samsung SM-T385M) _ . في هذه الأجهزة ، لا يعمل التوقيع ، عندما أحاول التوقيع ، تقوم الصفحة بالتمرير _ (لأعلى أو لأسفل) _ وترسم نقطة فقط في اللوحة القماشية (انظر إلى الصورة) . المشكلة تحدث فقط في Google Chrome ، في Firefox يعمل بشكل جيد _ (بتوقيع واحد أو أكثر) _. في حالة أخرى مع أكثر من توقيع واحد ، يعمل التوقيع الأول فقط ولا يعمل الآخرون - Google Chrome-.

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 في ٢٦ أبريل ٢٠١٩

👍3

ال 7 كومينتر

ليس لدي أي فكرة عن سبب حدوث ذلك. هل يمكنك إضافة مستمع لحدث scroll ومعرفة ما إذا كانت رسالة الخطأ صحيحة ، أي أن هناك "جارٍ التمرير"؟

بالمناسبة. هل يمكنك إعداد عرض توضيحي في مكان ما؟ لدي جهاز لوحي يعمل بنظام Android ، والذي من المحتمل أن يكون بدقة أعلى من 1080.

szimek في ١٨ مارس ٢٠١٩

آسف للتأخير.

نعم أستطيع.

دعني أرى ما إذا كان بإمكاني إعداد عرض توضيحي لك.

cristhianDt في ٢٠ مارس ٢٠١٩

szimek ،

كودبين:

المحرر: https://codepen.io/cristhiandt/pen/bZmBQx؟
اختبار في جهازك اللوحي: https://codepen.io/cristhiandt/full/bZmBQx

أضفت مستمعًا لحدث scroll ، "التمرير" افتح وحدة تحكم المتصفح.

cristhianDt في ٢٠ مارس ٢٠١٩

تضمين التغريدة

cristhianDt في ٢٦ مارس ٢٠١٩

مرحبا،

هل تمكنت من التحقق من ذلك؟ szimek : ج

cristhianDt في ٢٨ مارس ٢٠١٩

مرحبا،

$('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 في ٢٦ أبريل ٢٠١٩

👍3

وفقًا لأشياء Steeveuk ، ما عليك