2012-02-25 7 views
5

最後に、http://www.crystal.ch/abb/power_systems_landscape/のようなアプリをhtml5を使って実装することを目標にしています。HTML5の大きなキャンバス - 背景を含む全体のコンテンツを移動してズームする

ご覧のとおり、大きな(2000 * 600)キャンバスが必要な場合がありますが、わかりません。

誰でも私に上記のリンクの次の動作のためのアイデアを与えることができますか?背景を含む

  • 全体キャンバスコンテンツが左右移動することができる滑らか左右円滑
  • アウトズームにおけるズーム
  • 電源システムの選択に応じて、バックグラウンド動きなどのMouseMoveとマウスダウン操作
  • 全体キャンバスの内容を使用して

      プラスアイコンサークルのようにフェードアウト効果

    アイデアの任意の種類をいただければ幸いです。

  • 答えて

    3

    基本的にあなたがスクロールしたいとき、あなたは

    document.getElementById('wrapper').scrollTo(x, y); 
    

    ような何かをするだろうし、ズームがあなたの周りに再生することができます

    document.getElementById('canvas').style.width = 2000 * zoom; 
    document.getElementById('canvas').style.height = 600 * zoom; 
    

    だろうこの

    <div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;> 
        <canvas id='canvas' width='2000' height='600'></canvas> 
    <div> 
    

    ような何かをしたいですsetIntervalを使用してスクロールしたり、ズームしたりするのは、すばらしく滑らかですが、それは間違いありません再描画が必要ないので、大きなキャンバスでその効果を得るための最速の方法になります。

    +0

    ご回答いただきありがとうございます。テストごとに、スクロールの概念を実装することができます。まだズームと混同しています。キャンバスの幅と高さを変更しても、キャンバス内のコンテンツの描画には影響しません。幅と高さに基づいてすべてを再描画する必要があるかもしれません。とにかく、アイデアを探していても、キャンバスのCSSの幅/高さを変更することで、「+アイコンの円のような効果を弱める」 – Shahdat

    +0

    を考えて、再描画せずにズームインします。ちょっとプラスの場合は、いくつかのdivや小さなキャンバスを大きなキャンバスに配置するのが最も良い方法です。フェードイン/アウトやエキスパンド/折りたたみエフェクトを実現するには、標準のjavascript/CSSプロパティtweensを使用できます。この種のものには豊富なリソースがあります。 – hobberwickey

    +0

    キャンバスのCSSの幅/高さを変更すると、オーバーフローがクリップされ、残りのコンテンツが見えなくなります。私はそれをズームしないことを意味します。私は小さなキャンバスで大きなキャンバスの方法でテストしたいと思います。ありがとう – Shahdat

    0

    ズームを使用しないキャンバスjやキャンバス要素や他のhtml要素を移動する2Dキャンバスで作業する場合は、描画関数内にアルゴリズムを記述することをお勧めします。ズームは画質とスピードの欠如であり、ズームインからズームアウトまで複雑になる可能性があります(キャンバスに表示されているすべてのデータが単なる画像であることを忘れないでください)。 13000ピクセルの画像とマルチプレイヤーのアバターをアップロードして、描画/更新機能内のすべてのアルゴリズムを表示することができました。

    2キャンバスを使用すると、コードの大きな画像から切り抜いてビジュアルマップに合成できます。

    画像幅が大きすぎる場合は、3000psを下位レベルで分割する必要があります(画像が〜3000pxの場合はiOS端末でマイナススケールになります - 画像は小さくなります)。

    関連する問題