1

モバイル デバイス用の HTML5 Canvas 要素を使用して一種のインタラクティブ マップを表示する "Web アプリ" (より適切な用語がないため) を開発しようとしています。マップには、さまざまな形状とサイズの約 30 の建物 (半透明の PNG 画像から作成) があります。ユーザーが建物のいずれかをタップして、それらに関する情報を取得できるようにしたいと考えています。多くの場合、建物は他の建物と同じ理論上の境界ボックス内にあるため、ユーザーが境界ボックスをタップしたことを検出するだけでは簡単ではありません (U 字型の建物と別の建物が U の内側にあることを想像してください)。したがって、ある種のラスタ ピクセル検出を使用する必要があります。さらに複雑なことに、ユーザーがマップ上でズームイン/ズームアウトしたり、パンしたりできるようにする必要があります (30 の建物とマップは、小さな携帯電話の画面でユーザーに表示するには多すぎるためです)。

これらの機能をサポートできる JavaScript ライブラリを探しています。

  1. 画像ピクセル検出
  2. モバイルタッチイベント
  3. キャンバス (またはステージ?) のスケーリング
  4. モバイルデバイスで使用可能

これまでのところ、これらすべての機能をサポートする KineticJS を見つけました。しかし、ステージ上に 4 つ以上の建物があるマップを移動しようとすると、あまりにもビクビクします。Fabric.js にチェックインしようとしましたが、ピクセル検出がないようです (実際の画像自体ではなく、境界ボックス内をクリックすると画像が選択されるため)。

これらのことを実行できる JavaScript ライブラリは他にありますか?

助けてくれてありがとう！

4

1 に答える 1

0

KineticJS はかなり良いです (これまでに見つけた最高のライブラリ)

私はそれでpng画像を使用しようとしたことはありませんが、数百のプリミティブオブジェクトでのズームとパンは非常にスムーズです（ピクセル検出なし-ピクセル検出はかなりCPUの費用がかかる操作だと思います）。

おそらく、標準のポリゴン (1 つの建物に対していくつか) をオーバーレイして、同じクリック/タップ イベントにアタッチすることができます。

また、キャンバス上でオブジェクトを移動する必要はありません。大きなキャンバスを小さな div (overflow:hidden を使用) に配置し、キャンバス要素全体をドラッグするだけです。

于 2012-07-18T16:07:28.010 に答える