9

ピンチ ズーム インとズーム アウトに関連する Javascript または jQuery または jQuery モバイル イベントは何ですか? これらのイベントをキャプチャして、ウェブサイトのレイアウト全体に影響を与えることなく、div 内にある画像をズームインおよびズームアウトしようとしています。ピンチを検出する最も簡単な方法は、iPad では機能しますが、Android では機能しません。

Web 用の Android プラットフォームで同じものを検出する同等の方法は何ですか?

どんな助けでも大歓迎です。

編集: touchy.jsを試してみましたが、画像のズームインとズームアウトには機能しますが、画像の一部に指のスワイプなどでアクセスできない場合、画像のズームインは役に立ちません。

たとえば、次のコードを考えてみましょう。

    <div style=" border: 1px solid blue; width: 560px; overflow:scroll;">
      <p>&nbsp;</p>
      <img id="image" src="images/tux.png" alt="my image" style=" border: 1em solid gray;" />
    </div>

画像が div 内にとどまるようにする必要があり、ユーザーはズームインした後に画像内を移動できる必要があります。水平方向に画像の別の部分に移動します。垂直方向にも同じことが起こります (画像を縦方向に表示するには、Web ページの空のスペースで指をスワイプする必要があります)。私が言おうとしているのは、ユーザーが画像をズームインした後にそれを行うことを期待している間、画像内のスワイプモーションは何の効果も持たないということです.

例なしで説明するのは非常に難しく、http://jsfiddle.net/Debarupa/8peaf/を作成しようとしましたが、メタを頭で編集できないため、思い通りに機能しません。追加する必要がありました：

     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1" />

ウェブページ全体をズームできないようにします。

4

1 に答える 1

10

ユーザーのジェスチャーを監視し、指の接触点を追跡することで、独自のスケールを計算できます。

何かのようなもの：

var tracks = [];
$myElement.on("touchmove", function (event) {

    //only run code if the user has two fingers touching
    if (event.originalEvent.touches.length === 2) {

        //track the touches, I'm setting each touch as an array inside the tracks array
        //each touch array contains an X and Y coordinate
        tracks.push([ [event.originalEvent.touches[0].pageX, event.originalEvent.touches[0].pageY], [event.originalEvent.touches[1].pageX, event.originalEvent.touches[1].pageY] ]);
    }
}).on("touchstart", function () {
    //start-over
    tracks = [];
}).on("touchend", function () {
    //now you can decide the scale that the user chose
    //take the track points that are the closest and determine the difference between them and the points that are the farthest away from each other
});

ただし、事前に作成されたものを使用する場合は、Touchy をチェックアウトすることをお勧めします: https://github.com/HotStudio/touchy

于 2012-10-15T20:11:39.333 に答える