7

この「The Scale of the Universe 2」を見たことがありますが、これが javascript や jQuery、または HTML5 Canvas で実行できるかどうかを知りたいだけです。

項目 (例: 「人間」) をクリックすると、その横に情報が表示されます。

誰かが同様の質問をしている場合、ここで3日間検索しました。しかし、地図のカーソル位置を拡大できるGoogleマップのような動作しか見ませんでした。

実際には、「タイムライン」のようなエフェクトを作成したり、Mac OS X の「タイム マシン」リカバリのようなものを作成したりしたいと考えています。

  • ズームの固定位置。Google マップのズームとは異なり、どこでもパンおよびズームできます。
  • div に画像やテキスト (例: "The human") を配置できますか?
  • これに関する利用可能な記事/チュートリアルはありますか?

オプション:

  • Javascript
  • jQuery
  • HTML5 キャンバスと CSS3 は、ズームイン/ズームアウトできるように、Z 軸に変換してスクロールします。
  • Flash/Flex (大きな解像度またはフルスクリーンで必要なので、CPU で多くのリソースを使用したくありません。
4

3 に答える 3

3

無限ズームはありません。ただし、HTML5 キャンバスで SVG 画像を拡大/縮小することはできます。

SVG はアフィン変換をサポートしています。アフィン変換で必要なズーム/パンを設定し、関連する領域を表示できます。動作/リスナーは Javascript で実装でき、SVG は HTML5 キャンバスでレンダリングできます。

出発点として、この例を見ることができます: http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/

于 2012-09-08T17:39:13.113 に答える
2

これは HTML5 で完全に実行可能です。実際には、画像を表示およびズームできるシステムであれば、できるはずです。ズームされるのは 1 つの大きな画像ではなく、大量の画像がズームされます (たとえば、最初の人間は画像であり、ズームインまたはズームアウトすると拡大および移動されます)。アイデアは素晴らしいですが、技術的なパフォーマンスはあまり見られません。サイズ変更およびビットマップされる画像の数を正しく制限している限り、適切な FPS レートが維持されるはずです。

于 2012-09-08T17:10:14.513 に答える