4

単純な形状を作成した後、ユーザーが形状を互いにクリッピングすることでより複雑な形状を作成できるように、形状操作用のアプリを作成しています (つまり、2 つの円を組み合わせて、グループではなく単一のパスを使用して格納された 8 の字にします。または、2 つの円を交差させて「バイト」マークを作成するなど)、使用するグラフィック ライブラリを決定しようとしています。

SVG は、すぐに必要な機能 (形状の保存、移動、回転、スケーリング) の 80% を処理しているようです。問題は、残りの 20% (クリッピングを使用して複雑なポリゴンの新しいセットを作成する) は、自分のモジュールで SVG 機能を再作成しないと達成できないように思われることです (SVG 内で描画するために 1 回、形状を保存するために 1 回保存する必要があります)。クリッピングを自分で処理します）。SVGについては間違っている可能性がありますが、Raphaelライブラリ（SVGに基づく）について読むと、長方形を使用したクリッピングのみを処理しているように見えます.クリッピングでさえ一時的です（形状の一部のみをレンダリングしますが、形状全体を保存しますクリッピング四角形が移動されると再レンダリングされます)。おそらく、私はSVG標準について混乱しているだけです。

その結果、Canvas は、独自のクリッピング実装を機能させるために既に追跡しなければならない形状を追跡することによって余分なオーバーヘッドを導入しないため、より良い代替手段のように思えます。それだけでなく、移動、回転、スケーリングが可能なポリゴン クラスを既に実装しています。ただし、キャンバスには他にもいくつかの問題があります (独自の redraw メソッドを実装する必要があります。これは、Chrome および Firefox のブラウザー固有のフレームワークを利用する SVG ほど効率的ではないと確信しています。 Raphael のようなライブラリで無料で処理される IE の非互換性を受け入れるため)。

ありがとう

4

4 に答える 4

2

これはあなたが言及していることに対処するかもしれません。

クリッピングは、'clipPath' 要素を使用して非長方形オブジェクトを使用して行うことができます。

たとえば、何を切り取るかを定義する 'clipper' の id を持つ要素と、クリッピングの対象となるパスがあります。このスニペットで交差するかどうかはわかりません。

<g clip-rule="nonzero">
  <clipPath id="clipper">
    <ellipse rx="70" ry="95" clip-rule="evenodd"/>
  </clipPath>

  <!-- stuff to be clipped -->
  <path clip-path="url(#clipper)" d="M-100 0 a100 50"/>
</g>

これは私が持っているもののほんの一部です。それが役に立てば幸い。

于 2010-06-30T18:00:53.013 に答える
2

2D 構成的幾何学を実行しようとしているように思えます。SVG は保持モードで実行されるため、描画したオブジェクトは保存され、さまざまな操作が実行されます。Canvas では、ビット マップに対して実行しているため、変更はすぐに反映されます。ユーザーは単純な形状に対してより多くの操作を実行して、より複雑な形状を作成するため、長期的には Canvas の方が適しているはずです。

唯一の未解決の問題は、ユーザーがそれらのオブジェクトを使い終わったら、それらのオブジェクトをどうするかということです。画像をズームすると、ジャギーが発生します。SVG はその問題を回避しますが、複雑さとパフォーマンスへの影響が大きくなるというトレードオフがあります。

于 2011-05-02T23:38:34.913 に答える
1

その通りです。SVG を使用するかキャンバスを使用するかに関係なく、クリッピングと新しい形状の作成を数学的に実行する必要があります。私は偏見があります.SVGを使用する方が便利だと思われます.形状のDOMイベント（マウス、ドラッグ）やグラフィカル形式へのシリアル化なども無料で取得できるからです.

于 2010-06-30T19:34:38.740 に答える