問題タブ [raphael]

I've been looking for a good vector solution, and have heard good things about Raphaël. But all over its docs it talks about defining canvases, which just made me confused.

Is Raphaël a canvas or SVG library?

Raphael を使用して、div に複数のポリゴンを SVG イメージとして表示しようとしています。Raphael が用紙オブジェクトを作成するための引数として取得する div のサイズを設定しましたが、div 要素のサイズは考慮されず、画像は div 境界の外側に描画されます (これは、ポリゴン座標は div 境界を超えています)。

SVG を通常の画像のように動作させ、ブラウザ ウィンドウのサイズが変更されると自動的に拡大縮小し、SVG が div 境界の外側に描画されないようにする方法はありますか (動作のように)?

乾杯、マックス

Raphaelライブラリを使用していくつかの図形を描画し、それらをアニメーション化してブラウザ内に表示しています。

これらのアニメーションの1つがいつ完了したかを確認して、別の機能をトリガーする方法はありますか？

Raphael JS でディベート グラフをプログラミングしています。ユーザーはノードをグラフに追加できます。最終的にグラフは非常に大きくなり、キャンバスは同じサイズのままです。キャンバス (raphael js: paper) は、"overflow: scroll;" を使用して別の div 内にあるため、画面の領域を無視します。

(新しい X/Y 値を割り当てるために) ページをリロードせずにキャンバスのサイズを変更する方法はありますか? または、2 つ目の大きなキャンバスを並行して作成し、すべての要素をコピーすることはできますか? 方法はありますか？

Raphael を介して表示したい SVG ファイルがあります (各 SVG ファイルは、描画しようとしているツリーのノードであり、ツリーの実際の接続は Raphael によって行われます)。私は次のようなものを試しました：

しかし、サイコロはありません。png や jpeg などの「実際の」画像ファイルのみが受け入れられるようですか? Raphael 自体が Scalable Vector Graphics を使用しているため、これは非常に奇妙に感じます。

とにかく (SVG ファイルを JavaScript スニペットに解析して HTML ドキュメントに貼り付けること以外に)、Raphael (または他のベクトル ベースの JavaScript グラフィカル エンジン?) を使用して既存の SVG ファイルを表示する方法はありますか?

解析する必要がある場合、ファイルを手動でスクレイピングする以外に、これを行う簡単な方法はありますか? 私はこのコードを Ruby on Rails サーバーで実行しているので、可能であれば、このフレームワーク外のソリューションは避けたいと思います (このサイトで PHP ソリューションについて聞いたことがあります...私はむしろ手動でコーディングしたいと思いますこのプロジェクトに別の言語を追加します)。

-ジェニー

Raphael ライブラリを使用して SVG オブジェクトを作成しています。

SVG 形状を初期化し、内部のすべてのキャンバスを作成するために、ドキュメントに記載されているように次の行を使用しました。

次の方法で紙に追加された形状をアニメーション化するのと同じように、紙とその中のすべてをアニメーション化したいと思います。

次のような紙で似たようなことをしようとすると：

エラー「paper.animate is not a function」が表示されます。

ここで何が起こっていますか? どうすれば回避できますか?

Raphael ライブラリを使用して SVG テキスト ボックスを作成し、XML ドキュメントから抽出された動的文字列を入力しています。

時々、この文字列はテキストボックスを配置しているキャンバスよりも長いため、ボックスの幅を制限して改行を強制する必要があります (これが可能であるという証拠は見つかりません) または一定量の文字の後に '\n' 改行が挿入されること。

では、(1) これが最善の選択肢でしょうか? そして（2）どうすればこれを行うことができますか？

Raphael ライブラリを使用して、長方形の不透明度を 0 から 1 にアニメーション化しようとしています。

ここに私が書いたコードがあります：

これは機能しません。初期属性をより低い値に設定でき、スクリプトを実行すると目立つので、これはアニメーション ラインが間違っていると思います。

何か案は？

inkscape では、座標系は下/上隅です (つまり、0,0 は左下隅です)。Adobe Illustrator も同様です。しかし、ラファエルでこのパス文字列を使用しようとすると、上/下 (つまり、0,0 は上/左隅) アプローチが使用されます。ブラウザの座標またはラファエルの座標に従ってこのパス文字列を変換する方法は?

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

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

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

ありがとう