Google マップのように動作<canvas>するHTML5 ベースのコンポーネントが必要です。
注- 明確にするために、私はマップ コンポーネントを探しているのではなく、Google マップのように動作する一般的な画像ズーム/注釈コンポーネントを探しています!
次のことを行う必要があります。
- 絵を描く
- 特定の座標で画像上にいくつかの形状を描く
- 画像をスムーズにピンチズームできます。理想的には、画面上のピンチの中心にあるスポットをズームインします
- ビューポートが見ている画像の領域を変更できるように、ズームイン時に画像をドラッグ可能にします
- 画像のズームされた部分の同じ座標で形状を再描画するため、ズームのレベルに関係なく同じサイズのままになります
私はこれをどのように達成するかを考え、おそらく次のようなことをすることに決めました:
- jGestures、Hammer.js、Sencha Touchなどのライブラリを使用して、ピンチ アンド ドラッグ ジェスチャを検出します
- 関数を使用し
context.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh)て、ドラッグ イベントとピンチ イベントに基づいて画像のズームと配置を実装します。 - ズーム レベルとビューポートの位置を追跡して、ドラッグ/ズームするたびに形状を画像の正しい座標に再描画できるようにします
- おそらくsetTimeout()でループを使用して、ズーム/ドラッグを一度にではなくスムーズにアニメーション化します
しかし、ライブラリを使用してタッチ ジェスチャを処理する場合でも、これをゼロから作成するのは非常に複雑であることにすぐに気付きました。
私はそのようなコンポーネントのオープンソース実装のためにグーグルを始めましたが、私が見つけたいくつかは完全な機能セットを持っておらず、十分にサポートされているか、または良いレビューを持っていました.
このようなコンポーネントの優れたオープンソース実装が存在しないとは信じがたいです。これは、モバイル Web アプリでは非常に一般的な要件であり、似たようなものを実装する方法について、すでにいくつかの SO の質問があります。これらのほとんどは少し前のものですが、当時は存在しなかった何かが現在存在している可能性がありますか?
誰かが私を正しい方向に向けることができますか?