3

私はHTML/javascriptでモバイルアプリケーションを作成しています。このアプリケーションでは、ある時点でユーザーが画像をピンチイン（ズームイン）して、画像の特定の部分を表示できます。ズームの結果、画像の一部のみが表示され（ご存知のとおり）、画像全体は表示されません。タッチアップイベントが発生したとき（ユーザーが指をつまんで離したとき）に、その表示部分（ユーザーがズームインした量と画像のどの部分）を取得したいと思います。

いろいろ考えてきましたので、ご意見をお聞かせください。

  • pageXOffsetとpageYOffsetを使用します（ただし、ユーザーが行ったズームの量がわかりません）
  • キャンバスを使用して、ピンチ効果を手動で処理します
  • 拡大された部分のスクリーンショット（可能な場合）を撮り、それを元の部分と比較して、表示されている部分を見つけます。

アプリケーションをPhoneGapでラップしているので、何らかの形で役立つ場合は、ネイティブコードを記述できます...

4

1 に答える 1

0

ズームは2本の指でのジェスチャーであるため、event.targetTouches.length == 2でtouchmoveをリッスンしてから、各指からX座標とY座標を読み取る必要があります。

画像のズーム中心は、スクロール位置または画像位置に関連して、event.targetTouches [0] .pageX --event.targetTouches1.pageXおよびevent.targetTouches[0].pageY --event.targetTouches 1.pageYになります（+または-）

スケールファクターはvectorLengthCurrent-vectorLengthStartである必要があります

http://www.html5rocks.com/en/mobile/touch/を参照してください

画像：概要

例：

画像：左：-100px | startFinger [0] .pageX：50px | currentFinger [0] .pageX：55px | startFinger 1 .pageX：150px | currentFinger 1 .pageX：140px

したがって、中心は次のようになります。startFinger 1 .pageX-startFinger [0] .pageX-左（同じようにstartFinger 1.pageXが大きい|Yの場合のみ）

ベクトルの長さ：sqrt（x ^ 2 + y ^ 2）;

于 2012-05-21T18:01:03.080 に答える