4

壁/ドア/家具などをグリッドにドラッグ アンド ドロップして部屋をデザインできるようにするルーム デザイナー プロジェクトの作業を開始しようとしています。透明なPNGをドラッグアンドドロップして絶対に配置することはうまくいかず、フラッシュを使用したくないと判断したため、キャンバスまたはSVGです。

ME: Canvas や SVG を使用したことはありませんが、javascript と jQuery に関しては非常に有能です (OO Javascript、匿名関数、クロージャ、コールバックなどは問題ありません)。Douglas Crockford の「Javascript:良い部分」とそのほとんどを理解しました;-)

プロジェクト- コンポーネント ウィンドウからデザイナ ウィンドウへのドラッグ アンド ドロップが必要で、タブレット (携帯電話ではない) で作業する必要があるため、タッチ イベントが懸念されます。また、ツールチップ、オブジェクトのレイヤリングなども必要です。ベクター グラフィックスを使用した場合は、とにかくビットマップ テクスチャが必要になります (たとえば、壁パネルには壁紙テクスチャが含まれる場合があります)。

これまでのところ、キャンバスに関する本を読んで、次の結論に達しました...

キャンバス

  • 速い
  • キャンバス上のオブジェクトを再描画するのはかなり簡単です
  • マウスイベントについてはまだわかりません
  • EaselJS、FabricJS、KinectJS などのライブラリは良さそうです。

SVG

  • スケーラブル (ズーム機能の構築が容易)
  • illustrator などから簡単にグラフィックをインポートできます。
  • 描画ライブラリはそれほど豊富ではなく、見栄えもよくありません。
  • マウス/タッチイベントについてはわかりません。

だから、私はすぐにこれを行う方法を考え出す必要があります。現在、私は Canvas と優れたライブラリに傾倒しています。それらのいくつかは、とにかくスケーラビリティのために SVG をインポートできると信じているからです。

どの方向に進むべきかについてのアドバイスは大歓迎です。

4

3 に答える 3

5

私のお金では、可能であれば間違いなくSVGを選択します（ただし、SVGの経験は豊富です）。3D レンダリング アプリケーション用に作成されているようです。1 つには、これは DOM 全体であるため、(再描画などの必要なしに) レンダリングと z オーダーを処理し、最も重要なこととして、オブジェクト モデル自体の多くを提供します。キャンバスでは、すべてのレンダリングを処理するために、より多くのインメモリ モデルを作成する必要があります。SVG を使用すると、マスキング、移動、変換、ズーム、またはレンダリングについて心配する必要がなくなります。明らかに、オブジェクトが 3D 空間で交差/オーバーラップする場合はさらに複雑になりますが、それはどちらのアプローチにも当てはまります。少なくとも SVG が負担の大部分を負担します。

ただ、性能的には一概には言えません。アプリが何をしていたかによって異なります。タッチ イベントが決定的な要因であるべきではないと思います。透明なキャンバスを重ねることを意味するとしても、方法は見つかります。タッチ イベントが SVG でサポートされているかどうかは、デバイス/ブラウザーに依存する可能性もありますが、これについては調べていません。

しかし、キャンバス - それはあなたのために何をしていますか? それはビットマップです、それだけです。いつでも、メモリの塊ではなく、美しく強力な DOM をください。

しかし、それは私の意見です！:-)

于 2012-11-28T03:58:18.223 に答える
2

最良の解決策は、canvas を使用してグリッドと部屋を表すことだと思います。部屋のアイテムは、キャンバス上で svg を使用します。家具に透明な png ファイルを使用する場合、svg はまったく必要ありませんが、svg を使用する場合は、わずかに大きくするだけでなく、はるかに大きくすることができます。

モバイルで発生する問題の 1 つはメモリの問題です。ページに多数のアイテムがあり、それらが png である場合、問題になる可能性があります。

「ドラッグ アンド ドロップ」をキャンバス上で行う場合、JavaScript のドラッグ アンド ドロップ ライブラリは実際には必要なく、タッチ イベントを処理するだけです。

タッチ イベントのリンク: http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/

およびタッチ イベントに関するリンク:タッチ デバイス用の Javascript ドラッグ アンド ドロップ

于 2012-11-28T00:46:13.973 に答える
2

あなたのプロジェクトがどれほど複雑かはわかりませんが、iPad 2 で行ったいくつかのテストで見たように、css と javascript タッチ イベントを組み合わせた svg を使用すると、そうではないことが判明したため、タブレットでのパフォーマンスについて心配する必要があります。責任があり、目立った遅れがあります。

キャンバスの方がはるかに優れたパフォーマンスを発揮する可能性がありますが、マウスの座標やマップ オブジェクトを処理する位置を格納するなど、ほとんどすべての管理スクリプトを作成する必要があり、すべての変更を手動で再描画する必要があります。したがって、パフォーマンスは主にキャンバス管理スクリプトがどの程度最適化されるかに依存します。既にライブラリがあるかどうかはわかりません。答えはおそらくイエスです。

SGV は他の人が言ったように、通常は遅くなりますが、これは通常のビットマップとしてレンダリングされず、ベクター要素の DOM であるためです。また、イベントの処理も簡単で、イベントを任意の要素にアタッチでき (ブラウザーの実装によって異なります)、スタイルに CSS を適用でき、位置、サイズ、ストローク、塗りつぶしなどのプロパティを簡単に変更できます。

タブレットへ: svg を選択した場合、高解像度テクスチャの使用は避け、css3 box-shadow を使用して svg 要素を使用しないでください (iPad が非常に遅くなります)。jquery を使用して DOM を操作し、ドラッグ アンド ドロップするのではなく、タブレットでは、非常に最適化されたコードでプレーンな JavaScript を使用します。

于 2012-11-28T04:31:27.217 に答える