私には問題があります.Googleには手を出せず、これは私の最初の投稿です。 2つのキャンバス要素を重ねて、私の会社のウェブサイトに宝くじタイプのスクラッチャー機能を作成しました。 問題は、Ipadで、ページをスクロールしてもピクセルであっても、タッチ位置がスクロールの高さと同じであることです。私は、このオフセット問題を無用に修正しようとするために、いくつかの異なるルートを試しました。HTML5キャンバスタッチイベントは、IpadまたはモバイルSafariブラウザでオフセットされます。
使用されるJSライブラリ：モバイルタッチイベント検出用のJquery1.6.4およびkinetic2d1.0.2 http://www.kineticjs.com/。
私はSafariモバイルではあまり働いていないので、わからないオフセットを特定するためのプロパティや方法があると思います。
私はJSの解決方法をこの問題にしたいと思いますが、私をフィニッシュラインに導くハックが勝ちます。
ありがとうございます。
ここにiPadをテストしていませんが、jQuery Offsetを見ましたか？ ブラウザウィンドウへのおcanvas要素の相対座標を取得し、そのようなあなたの計算にその補償するためにそれを使用することができます：
offset = $('#myCanvas').offset();
left = pageX - offset.left;
top = pageY - offset.top;
私がでiframe内にオフセット問題をキャンバスをロードすることがわかりましたミュートになった。したがって、スクラッチャーは月のスクロール、方向、重力に関係なく動作します。
ライブバージョンは、ウェブ、ipad、またはスマートフォンのFront Flipで確認できます。アプリもダウンロードしてください。それは揺れる！使用coord.xとcoord.y -
function touchMove_event(event){
var canvas = document.getElementById("yourCanvas");
var coors = {
x: event.targetTouches[0].pageX - canvas.clientLeft,
y: event.targetTouches[0].pageY- canvas.clientTop
};
touchHandler(coors);
}
その後、どんな機能を使用すると、現在のタッチイベントを処理しているにそれを渡し、この関数にtouchmoveリスナーを追加 -
これは巨大なハックです。実装して維持するには苦労しますが、魅力を発揮するようです – Kaiesh
使用この機能に自分のタッチ座標を包みます
私が最初に試したことの1つでした。オフセットの計算は問題ではありませんでした。 –