FabricJS-Canvas-Koordinaten bei Berührung

Question

Ich verwende das Fabricjs-Paket mit Ereignissen, um zu versuchen, Benutzerkoordinaten zu erfassen, wenn sie auf die Zeichenfläche tippen.

Dies ist der Code:

Html

<div id="c-wrapper"> 
     <canvas id="c"></canvas> 
</div> 

Javascript

var canvas = new fabric.Canvas("c"); 
canvas.on({ 
    "mouse:down": function (o) { 
      var pointer = canvas.getPointer(o.e); 
      console.info("Mouse Coords: "+pointer.x+" "+pointer.y); 
    }, 
    "touch:longpress": function (ev) { 
      console.info("Touch Coords: "+ev.self.x+" "+ev.self.y); 
    }, 
}); 

Wenn ich die Seite in ansprechenden Modus (beide Chrome und Safari sowie Geräte-Emulator) und Prüflast Mit der Touch-Funktion bekomme ich unglaublich unterschiedliche Koordinaten.

z.B.

Console output: 
Canvas of size 2835 x 2004; 

Mouse Coords: 1475 x 1220 
Touch Coords: 470 x 388 

Sie sind sehr unterschiedliche Ergebnisse, wie Sie sehen können.

Wie kann ich die tatsächlichen Koordinaten des Stoff-Canvas-Objekts ermitteln, wenn der Benutzer ein Longpress-Touch-Ereignis ausführt?

Answer 1

Dadurch erhalten Sie die aktuelle Position.

let e = event.e.touches ? event.e.touches[0] : event.e; 
canvas.getPointer(e)