マウスイベントのようなタッチで同じoffsetXを取得する

Question

こんにちは私はマウスイベントのoffsetXと同じでなければならないtouchイベントのoffsetX、Yを取得しようとしています。私はこのコードを使用しているこれを行うには：私もマウスイベントに私はタッチイベントでは使用できませんoffsetX/Yを、必要とするその目的のためにタッチイベントをシミュレートしようとしてい

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

。オフセットX/Yをタッチで計算する方法はありますか？あなたのページにスクロールしている場合は、clientX/clientYマウスイベントのプロパティ（またはpageX/pageY）を使用する必要があります

Answer 1

を助けてください。

あなたの解決策については、それはそれの親に対するcanvasNameのオフセットされgetElementById(canvasName).clientX

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

canvasName.offsetLeftを用いて補正することができます。あなたがoffsetLeft使用したいのであれば、あなたは、私はこれが古い質問です知っているが、「offsetXタッチイベント」のグーグルの最初のこの

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

Answer 2

ような何かを行う必要があります私が研究した後、私はここでこの機能を終了しました。

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 3

を使用し、次の

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

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

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

Answer 4

これは私のために働いているのモバイルサファリ10. layerXとlayerY属性は、相対的なxとyを提供していますが、変換考慮されません。だから私は手動でCSSから変換スケール値を取得して変換を適用しました。

E = touchstartイベント

親= "変換" が適用される親要素。変換値を取得するため

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

参考：私にとっては、タッチで最後の2行は、互換性を持たせるとイベントをクリックし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; 

たFetch the css value of transform directly using jquery