Signature_pad: हस्ताक्षर काम नहीं कर रहा है गूगल क्रोम, मोबाइल डिवाइस (चौड़ाई>= 1080)

को निर्मित 18 मार्च 2019 · 7टिप्पणियाँ · स्रोत: szimek/signature_pad

नमस्ते,

पहले आपके काम के लिए धन्यवाद।

दूसरे, मुझे कुछ मोबाइल उपकरणों _(स्मार्ट फोन और टैबलेट)_ 1080 पिक्सल से अधिक या उसके बराबर चौड़ाई के साथ समस्या है (जैसे एचटीसी एम 9 प्लस, मोटो जी (6) और मोटो जी 5 प्लस, सैमसंग एसएम-टी 385 एम) _ . इन उपकरणों में हस्ताक्षर काम नहीं करता है, जब मैं हस्ताक्षर करने का प्रयास करता हूं, तो पृष्ठ स्क्रॉल _(ऊपर या नीचे)_ करता है और केवल कैनवास में एक बिंदु खींचता है (छवि देखें) । समस्या केवल Google क्रोम में होती है, फ़ायरफ़ॉक्स में ठीक काम करता है _ (एक या अधिक हस्ताक्षर के साथ) _। अन्य मामलों में एक से अधिक हस्ताक्षर के साथ, केवल पहला हस्ताक्षर काम करता है और अन्य काम नहीं करते हैं -गूगल क्रोम-।

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 26 अप्रैल 2019

👍3

सभी 7 टिप्पणियाँ

मुझे नहीं पता कि ऐसा क्यों हो रहा है। क्या आप scroll ईवेंट के लिए श्रोता जोड़ सकते हैं और देख सकते हैं कि क्या त्रुटि संदेश सही है, यानी "स्क्रॉलिंग प्रगति पर है"?

बीटीडब्ल्यू। क्या आप कहीं डेमो सेट अप कर सकते हैं? मेरे पास एंड्रॉइड टैबलेट है, जिसका शायद 1080 से अधिक रिज़ॉल्यूशन है।

szimek 18 मार्च 2019

विलंब के लिए क्षमा चाहते हैं।

हाँ मैं कर सकता हूं।

मुझे देखने दें कि क्या मैं आपके लिए एक डेमो सेट कर सकता हूं।

cristhianDt 20 मार्च 2019

@szimek ,

कोडपेन:

संपादक: https://codepen.io/cristhiandt/pen/bZmBQx?editors=1111
अपने टेबलेट में परीक्षण करें: https://codepen.io/cristhiandt/full/bZmBQx

मैंने scroll ईवेंट के लिए श्रोता जोड़ा, "स्क्रॉलिंग" ब्राउज़र कंसोल खोलें।

cristhianDt 20 मार्च 2019

@szimek

cristhianDt 26 मार्च 2019

नमस्ते,

क्या आप इसकी जांच कर पाए हैं? @szimek : सी

cristhianDt 28 मार्च 2019

नमस्ते,

$('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 26 अप्रैल 2019

👍3

@Steeveuk चीजों के अनुसार, बस SignaturePadInstance.off() का उपयोग करें और SignaturePadInstance.on() द्वारा पुनः सक्षम करें।

DvirH 14 मई 2019

👍1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Signature_pad: हस्ताक्षर काम नहीं कर रहा है गूगल क्रोम, मोबाइल डिवाइस (चौड़ाई&gt;= 1080)

सबसे उपयोगी टिप्पणी

सभी 7 टिप्पणियाँ

संबंधित मुद्दों

Signature_pad: हस्ताक्षर काम नहीं कर रहा है गूगल क्रोम, मोबाइल डिवाइस (चौड़ाई>= 1080)