Signature_pad: Signatur funktioniert nicht Google Chrome, mobile Geräte (Breite >= 1080)

Erstellt am 18. März 2019  ·  7Kommentare  ·  Quelle: szimek/signature_pad

Hallo,

Danke erstmal für deine Arbeit.

Zweitens habe ich ein Problem mit einigen Mobilgeräten _(Smartphones und Tablets)_ mit einer Breite größer oder gleich 1080 Pixel _(wie HTC M9 Plus, Moto g (6) und Moto g5 Plus, Samsung SM-T385M)_ . Bei diesen Geräten funktioniert die Signatur nicht, wenn ich versuche zu signieren, scrollt die Seite _(nach oben oder unten)_ und zeichnet nur einen Punkt in die Leinwand (siehe Bild) . Das Problem tritt nur in Google Chrome auf, in Firefox funktioniert _(mit einer oder mehreren Signaturen)_. In anderen Fällen funktioniert bei mehr als einer Signatur nur die erste Signatur und die anderen nicht -Google Chrome-.

Signature-pad Error

Beim Betrachten der Browserkonsole habe ich diesen Fehler gefunden:
[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

In dieser Zeile:
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched) { event.preventDefault(); self._strokeEnd(event); } };

Ich habe es geändert in:
this._handleTouchEnd = function (event) { var wasCanvasTouched = event.target === self._canvas; if (wasCanvasTouched && event.cancelable) { event.preventDefault(); self._strokeEnd(event); } };

Der Fehler in der Konsole wurde nicht mehr angezeigt, aber die Signatur funktioniert noch nicht. Ich habe es mit Version 2.3.0 versucht und funktioniert auch nicht.

Hast du vielleicht eine Ahnung davon?. Danke.

picture cristhianDt

Hilfreichster Kommentar

Hallo,

Ich hatte das gleiche Problem, ich glaube, ich habe es behoben, indem ich das Folgende in einer Funktion zum Laden und Ändern der Fenstergröße implementiert habe (ich verwende auch 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
});

Ich bin mir nicht sicher, ob es sich um eine Aufhebung und erneute Bindung handelt oder ob eine Leinwandbreite sowie eine Kontextbreite festgelegt wurden, die das Problem behoben zu haben scheint.

Hoffe das hilft dir.

picture Steeveuk am 26. Apr. 2019
👍3

Alle 7 Kommentare

Ich habe keine Ahnung, warum es passieren könnte. Könnten Sie einen Listener für das Ereignis scroll hinzufügen und sehen, ob die Fehlermeldung richtig ist, dh es wird "gescrollt"?

Übrigens. Könntest du irgendwo eine Demo einrichten? Ich habe ein Android-Tablet, das wahrscheinlich eine Auflösung von mehr als 1080 hat.

szimek picture szimek am 18. März 2019

Entschuldigung für die Verspätung.

Ja, ich kann.

Lassen Sie mich sehen, ob ich eine Demo für Sie einrichten kann.

cristhianDt picture cristhianDt am 20. März 2019

@szimek ,

Codepen:

Ich habe einen Listener für das Ereignis scroll hinzugefügt, "scrollen" die Browserkonsole.

cristhianDt picture cristhianDt am 20. März 2019

@szimek

cristhianDt picture cristhianDt am 26. März 2019

Hallo,

Hast du es überprüfen können? @szimek :C

cristhianDt picture cristhianDt am 28. März 2019

Hallo,

Ich hatte das gleiche Problem, ich glaube, ich habe es behoben, indem ich das Folgende in einer Funktion zum Laden und Ändern der Fenstergröße implementiert habe (ich verwende auch 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
});

Ich bin mir nicht sicher, ob es sich um eine Aufhebung und erneute Bindung handelt oder ob eine Leinwandbreite sowie eine Kontextbreite festgelegt wurden, die das Problem behoben zu haben scheint.

Hoffe das hilft dir.

Steeveuk picture Steeveuk am 26. Apr. 2019
👍3

Laut @Steeveuk Dingen verwenden Sie einfach die SignaturePadInstance.off() und aktivieren Sie sie erneut durch SignaturePadInstance.on()

DvirH picture DvirH am 14. Mai 2019
👍1
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

auam88 picture auam88  ·  4Kommentare
Sparticuz picture Sparticuz  ·  7Kommentare
50l3r picture 50l3r  ·  3Kommentare
siggifv picture siggifv  ·  3Kommentare
davidosuna1987 picture davidosuna1987  ·  11Kommentare