問題タブ [raphael]

私は、画像を利用するのではなく、純粋な描画に基づいてFlicrMapやGoogleMapのような同様のコンポーネントを開発するために、raphaeljs （SVG / VML）を評価しています。flickrマップやgoogleマップとは異なり、私たちのマップはユーザーとの相互作用が多く、多くの描画が含まれます。

SVG / VMLの使用にFlashではなく問題がある場合、誰かが私にアドバイスできますか？SVGの使用経験が少ない場合は、SVGを除外するのに役立ちます。

注：ライブで実行されているSVGの巨大な実装を知っている人がいれば、SVGでのPOCを回避するのに役立ちます。

ありがとう ..

ラファエルのパスにテキストを添付する方法を知っている人はいますか? http://www.w3.org/TR/SVG11/images/text/toap02.svgのようなもの jQuery SVG でそれができることは知っていますが、Raphaël js を使用してこれを行う簡単な方法が見つかりません。このテキストをベジエ曲線にアタッチして移動したい。

SVGアニメーションに関してかなり興味深い問題があります。

Raphaelを使用して円形のパスに沿ってアニメーション化しています

circlePathメソッドは、SVGパス表記でサークルパスを生成するために自分で作成したメソッドです。

これまでのところ、とても良いです-すべてが機能します。オブジェクト（obj）を円形のパスに沿ってアニメートしています。

しかし：

アニメーションは、パス自体と同じX、Y座標でオブジェクトを作成した場合にのみ機能します。

他の座標（たとえば、パスの途中）からアニメーションを開始すると、オブジェクトは正しい半径の円でアニメーション化されますが、パスに沿ってではなく、オブジェクトのX、Y座標からアニメーションが開始されます。視覚的に表示されます。

理想的には、アニメーションを停止/開始できるようにしたいと思います。同じ問題が再起動時に発生します。停止してからアニメーションを再開すると、停止したX、Yから円を描くようにアニメーション化されます。

アップデート

問題を示すページを作成しました：http： //infinity.heroku.com/star_systems/48eff2552eeec9fe56cb9420a2e0fc9a1d3d73fb/demo

「開始」をクリックしてアニメーションを開始します。アニメーションを停止して再開すると、現在の円の座標から正しい寸法の円に続きます。

RaphaelJSを使用して長方形の境界内にテキストを含めることが可能かどうかを判断しようとする過程で(そして、多くの作業のように見えることをせずに)、興味をそそられたこの質問(およびその回答) に出くわしました。 .

私は、答えを読む前でも読んだ後でも、ラファエルがこのようなことをできるという兆候を見たことがありません。したがって、私の感覚では、それはぎこちない答えですが、コンセプトは説得力があり、私はラファエルの仕事に割り込んでいるだけなので、その答えにスポットライトを当てて、誰かができるかもしれない説明を求める価値があると思いました.与える。

ありがとう。

私はその上に円をプロットしている raphael.js 形状を持っています。円がプロットされている形状の境界から外れていない場合にのみ、円を表示したいです。

これをより明確にするために、私が起こりたくないことの例を次に示します。

例 http://img682.imageshack.us/img682/4168/shapeh.png

灰色の領域の外側の円が表示されないようにしたい。円が灰色の形状の内側にあるか外側にあるかをどのように検出しますか?

つまり、Raphael JSを使用して基本的な軌道シミュレーターを実行しているところです。ここでは、1つの円を「星」として、別の円を「惑星」として描画します。シミュレーションが続行されると、軌道の動きが滑らかでなくなるまでフレームレートが徐々に遅くなるという1つの問題があり、問題なく機能しているようです。コードは次のとおりです（注：ページを初期化するためにのみjQueryを使用します）：

とにかく、そのコードのどの部分でもアニメーションが徐々に遅くなってクロールするようには見えないので、問題を解決するための助けをいただければ幸いです。

inkscape から Raphael (個々の国) にパスをコピーしようとしています。問題は moveTo がかなりずれていることです。キャンバス上の比較的正しい位置に表示するにはどうすればよいですか?

( Raphaelライブラリを使用して) 初めて SVG をいじる過程で、キャンバス内に完全に含まれるような方法で動的要素をキャンバスに配置するという問題に遭遇しました。私がやろうとしているのは、ランダムにn個の単語/短いフレーズを配置することです。

テキストは可変であるため、その位置も可変である必要があるため、私がやっていることは次のとおりです。

1. 最初0,0に、不透明度のないポイントでテキストを作成します。
2. を使用して、描画されたテキスト要素の幅を確認しますtext.getBBox().width。
3. 新しいx座標を として設定しMath.random() * (canvas_width - ( text_width/2 ) - pad)ます。
4. テキストのx座標を新しく設定した値に変更します ( text.attr( 'x', x ))。
5. テキストの不透明度属性を 1 に設定します。

私の数学の洞察力が限られていることを最初に認めますが、これはかなり簡単に思えます。どういうわけか、テキストがキャンバスの右端からはみ出してしまいます。上記を簡単にxするために、結果に追加することで最小値も設定するビットを削除しましたMath.random()。しかし、それはそこにあり、キャンバスの前縁にも同じ問題が見られます.

私の理解では（そのように）、Math.random()ビットは0から1の間の数値を生成し、それを何らかの数値（私の場合、キャンバス幅-テキスト幅の半分-任意のパディング）で乗算して取得できるということです外側の境界。グリッド上のテキストの位置が中央に設定されているため、テキストの幅を半分に分割しています。

あまりにも長い間これを見つめていたことを願っていますが、私の数学はMath.random()さびているのでしょうか、それとも、このソリューションのフードの下にある 、SVG、テキスト、またはその他の動作について誤解しているのでしょうか?

私はSVGをいじっています.IllustratorでSVGファイルを作成し、Javascriptで要素にアクセスできることを望んでいました.

これがIllustratorが追い出すSVGファイルです（私が削除したファイルの先頭に大量のジャンクが追加されているようです）

ご覧のとおり、各要素には ID があり、Javascript を使用して個々の要素にアクセスできるようにして、Fill 属性を変更し、クリックなどのイベントに応答できるようにしたいと考えていました。

HTMLは基本的なものです

これは本当に2つの質問だと思います。

1. Raphael や jQuery SVG などを使用するのではなく、このようにすることは可能ですか。

2. できるとすれば、どのようなテクニックですか？

アップデート

現時点では、Illustrator を使用して SVG ファイルを作成し、Raphaël JSを使用してパスを作成し、単純に SVG ファイルからポイント データをコピーして関数に貼り付けていpath()ます。ポイント データを手動でコーディングして、マップに必要なような複雑なパスを作成することは、(私の知る限り) 非常に複雑です。

IE7（実際に試したIEの唯一のバージョン）のパスに沿って単純な形状を移動させるのに問題があります。次のコードは、Chrome と Firefox では正常に機能しますが、IE では機能しません。明らかな理由が見つかりませんでした。似たようなものを見た人はいますか?

私の rPath 変数には、パスと開始点の座標があります。

Microsoft スクリプト デバッガーは、コードが壊れる場所として次の行を指します。

何か案は？IE7 で raphael の animateAlong を使用した経験 (良いか悪いか) はありますか?

ティア、アンドレイ