0

ここで紙人形ゲームの新しいバージョンの作成に取り組んでいます。

今はフラッシュです。HTML5にアップデートしたいのですが、SVGにするか、Canvasで描いた画像にするか、Canvasに取り込んだpngにするか迷っています。技術的な観点からはどれでもうまくいくと思いますが、パフォーマンスを考慮したいと思います。

いくつかの事実/要件:

  1. 画像編集用の Adob​​e Illustrator と Photoshop があります。また、価値がある場合は、Adobe Edge Animate。
  2. シャツなどの新しい画像を追加するときは、「シャツ」というラベルの付いたフォルダーにドロップして、ファイル名を配列に入力することなくプログラムに統合できると便利です。ページ。PHPを使用すると、このディレクトリから読み取ることができると思いますが、SVGまたはキャンバスの描画をそのような別のファイルに保存できるかどうかはわかりません
  3. 各アイテムの色を調整できるようにする必要があります。これにCSSフィルターを使用すると思いますか？
  4. 一部のアイテムでは、アイテムの一部のみの色を変更できるようにしたいと考えています (花の色のように、葉の色は変更できません)。Flash では、要素の 1 つのレイヤーだけにカラー フィルターを適用することでこれを行っていました。ここでそれをどのように処理できるかわかりません。おそらく、互いに重なり合う別々の関連する画像を含む2つの配列を持ち、カラーフィルターを1つだけに適用することによって.
  5. ユーザーの変更の最後に、画像を自分のコンピューターに保存できる必要があります。または、作成したものをサーバー上のディレクトリに保存できる必要があります。これは Flash バージョンで動作していましたが、現時点では壊れています。理由はわかっており、新しいシステムでも同じプロセスを使用できますが、もっと簡単な方法があるかもしれません。キャンバスの内容を簡単に保存できると聞きました。
  6. 重なり合う形状は、エイリアシングではなく、エッジが滑らかでなければなりません。
  7. iPad と iPhone で作業する必要があります。私が見たキャンバスと SVG のサンプルの多くは、私の iPhone では正しく動作しませんでしたが、これに似た動作する SVG 人形プログラムを見つけました。

これらのいくつかはおそらく複数の質問であったはずですが、うまくいけば、正しい方向に私を向けることができます. どの方法を試しても、コードを理解できると確信していますが、SVG と Canvas の知識がまだ限られているため、間違った方向から始めて時間を無駄にしたくありません。

ありがとうございました。

4

1 に答える 1

3

私の2セント：

...

アドビイラストレーター：

新しい画像の保存:

  • 画像のサブコンポーネントを操作しているため、画像ファイルではなく、パスとして画像を保存することをお勧めします。SVG パスと Canvas パスの両方で、データは単純なテキストであり、保存と提供が簡単です。

コンポーネントの色を調整する:

  • SVG は、コンポーネントの「塗りつぶし」属性を変更することで、これを直接行うことができます。
  • キャンバスは、合成機能を使用してこれを行うことができます。これはセットアップが少し複雑で、レイヤリングが必要です。シャツの色を変更するには、シャツの色を含む別のレイヤーを作成する必要があります。次に、そのレイヤーに新しい色を合成できます。その後は簡単で効果的です。または、少しプログラミング作業を行うだけで、色を変更するパスを特定し、そのパスを別の「fillStyle」で再描画できます。

ユーザーがイメージをローカル ファイル システムに保存できるようにします。

  • セキュリティ上の理由から、SVG も Canvas もこれをネイティブに行いません。
  • 簡単な解決策: 新しいブラウザー ウィンドウを開き、右クリックして名前を付けて保存することができます。
  • より複雑な解決策: Web サーバーから画像をバウンスし、ユーザーがサーバーから画像をダウンロードできるようにする

アンチエイリアシングなし:

  • アンチエイリアスを無効にできるのは SVG だけです。
  • Canvas はアンチエイリアシングの素晴らしい仕事をしますが、アンチエイリアシングを止めることはできません。

iPad/iPhone で動作する必要があります:

  • SVG と Canvas の両方がサポートされているため、アプリが動作するはずです。
  • いつものように、必ずマイクロアプリをテストしてください!!

結論：

SVG と Canvas の両方に、探している機能がありますが、SVG の方が少し適しているようです。

  • SVG は、svg 形式にエクスポートされた AI 画像をネイティブに使用できます。
  • 多くのオブジェクトを描画すると SVG は遅くなりますが、描画するコンポーネントはほんのわずかです (問題ありません)。
  • SVG では、パスの色を変更できます。
  • SVG ではアンチエイリアスをオフにできます (ただし、私の経験では、これは悪い考えです。オンのままにしておいてください!)
  • Canvas は何千もの図形をすばやく描画することに優れています— アニメーション! （あなたの場合は必要ありません）
于 2013-06-06T18:02:47.100 に答える