rufen Sie das gleiche offsetX auf Berührung wie Mausereignis

Question

Hallo Ich versuche, das offsetX, Y des Berührungsereignisses zu erhalten, das mit offsetX des Mausereignisses identisch sein sollte. Um dies zu tun habe ich diesen Code verwendet:

ev.offsetX = ev.targetTouches[0].pageX- canvasName.offsetLeft 

Ich habe sogar versucht, das Berührungsereignis in Maus-Ereignis zu simulieren, aber zu diesem Zweck muß ich die offsetX/Y, die in Kontakt Ereignisse nicht verfügbar ist. Gibt es eine Möglichkeit, Offset X/Y für Touch berechnet werden? Bitte helfen

Answer 1

Sie sollten clientX/clientY Eigenschaften von Maus-Ereignisse (oder pageX/pageY), wenn Sie auf Ihrer Seite haben, scrollen.

Wie für Ihre Lösung. Es kann durch die Verwendung getElementById(canvasName).clientX

ev.offsetX = ev.targetTouches[0].pageX - getElementById(canvasName).clientX 

canvasName.offsetLeft versetzt von canvasName bezüglich korrigiert werden, um es Eltern. Also, wenn Sie offsetLeft verwenden möchten, sollten Sie so etwas wie die folgenden

var left = 0, 
elem = getElementById(canvasName); 

while(elem) { 
    left = left + parseInt(elem.offsetLeft); 
    elem = elem.offsetParent;   
} 

ev.offsetX = ev.targetTouches[0].pageX - left 

Answer 2

verwende ich dieses

var rect = e.target.getBoundingClientRect(); 
var x = e.targetTouches[0].pageX - rect.left; 
var y = e.targetTouches[0].pageY - rect.top; 

Answer 3

Ich weiß, dass dies eine alte Frage ist aber der erste in einer Google von „offsetX berühren event“ .. Ich habe hier nach der Recherche die Funktion beendet.

function normalizePosition(evt, parent){ // Simple adoptation 
 
var position = {}; 
 

 
position.x = (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX; 
 
position.y = (evt.targetTouches) ? evt.targetTouches[0].pageY : evt.clientY; 
 

 
while(parent.offsetParent){ 
 
    position.x -= parent.offsetLeft - parent.scrollLeft; 
 
    position.y -= parent.offsetTop - parent.scrollTop; 
 

 
    parent = parent.offsetParent; 
 
} 
 

 
return position; 
 
} 
 

 
function normalizePosition(evt, parent, gridSize, offset){ // With some extra stuffs 
 
var position = {}; 
 

 
position.x = (evt.targetTouches) ? evt.targetTouches[0].pageX : evt.clientX; 
 
position.y = (evt.targetTouches) ? evt.targetTouches[0].pageY : evt.clientY; 
 

 
while(parent.offsetParent){ 
 
    position.x -= parent.offsetLeft - parent.scrollLeft; 
 
    position.y -= parent.offsetTop - parent.scrollTop; 
 

 
    parent = parent.offsetParent; 
 
} 
 

 
if(gridSize){ 
 
    position.x = Math.floor(position.x/gridSize); 
 
    position.y = Math.floor(position.y/gridSize); 
 
} 
 

 

 
if(offset){ 
 
    position.x -= offset.x; 
 
    position.y -= offset.y; 
 
} 
 

 
return position; 
 
}

Answer 4

Dies ist für mich auf 10. Die layerX und layerY Attribute Mobile Safari Arbeit bieten die relativen x und y, nehmen aber nicht in das Konto umwandeln. Also habe ich die Transformation manuell angewendet, indem ich die transform scale-Werte aus der CSS genommen habe.

e = das Berührungsstartereignis

parent = das Mutterelement in dem die "Transform" angewandt wird. Für mich war es const parent = $(e.target.parentNode);

const layerX = e.originalEvent.layerX; 
const layerY = e.originalEvent.layerY; 
const currentScaleX = parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[0]); 
const currentScaleY = parseFloat(parent.css('transform').match(/-?[\d\.]+/g)[3]); 
if (currentScaleX < 1){ 
    currentScaleX += 1; 
    } 
    if (currentScaleY < 1){ 
    currentScaleY +=1; 
    } 
const offsetX = layerX * currentScaleX; 
const offsetY = layerY * currentScaleY; 

Um die letzten beiden Zeilen kompatibel mit Touch zu machen und Veranstaltungen klicken:

const offsetX = e.offsetX || layerX * currentScaleX; 
const offsetY = e.offsetY || layerY * currentScaleY; 

Referenz für Werte verwandeln sich ziehen: Fetch the css value of transform directly using jquery