問題タブ [jquery-svg]

私はsvg-edit、より具体的にはMark McKays Method draw: https://github.com/duopixel/Method-Drawの修正を行っています。

私が見つけたこの Raphael ライブラリを使用したい: https://github.com/poilu/raphael-booleanこれにより、キャンバス内のパスでブール (セット) 操作を実行できます。

これで、エディター内に関数を起動するボタンを実装しました。

さて、ボタンをクリックすると、エディターは楕円で結合された (結合された) パスを返すはずではありませんか?

または私はこれを間違っていますか？

var paper = Raphael("canvas", 250, 250); で何かを変更する必要があると考えています。svg-edit はキャンバスに別の名前を使用しているため、行ですが、どうすればよいかわかりません。

私はこれに苦労してきたので、どんな助けも深く感謝します.

更新: このライブラリは、複数オブジェクトの溶接、自己交差、およびその他の多くのケースを処理できません。2 つの単純なオブジェクトに対して操作を実行する場合にのみ機能します。これは当面の質問とは直接関係ないかもしれませんが、とにかく言及するのが賢明だと思いました.

SVG 要素に対するブール演算を探している場合は、この質問を参照してください: SVG パスに対するブール演算

jquery を使用して HTML 5 SVG 折れ線グラフを作成しました。以下のスクリーンショットを参照してください。

以下の SVG パスを参照してください。

パス アニメーション (つまり) 線を実行して、モーション効果のように描画したいと考えています。以下のリンクのように

http://www.highcharts.com/demo/

以下のリンクを参照しましたが、わかりません。

https://developer.mozilla.org/en-US/docs/SVG/Element/animateMotion

https://developer.mozilla.org/en-US/docs/SVG/Element/animateColor

https://developer.mozilla.org/en-US/docs/SVG/Element/animate

折れ線グラフのアニメーション化されたパスを作成するための解決策を教えてください。(つまり) 折れ線グラフのパス アニメーション

ありがとう、

シバ

以下のSVGを参照してください。

出力は次のようになります。

長方形全体を占めるように画像を作成するにはどうすればよいですか？

ありがとう、

シヴァ

SVG ライン/パス アニメーションを使用したシンプルな MVC3 アプリケーションを作成しました。以下のコード スニペットを参照してください。

JS-fiddle /JS-bin で動作しています。つまり、アニメーション化されたパスが結果になります。

以下のリンクを参照してください。

http://jsfiddle.net/XbzRX/2/

サンプル リンク:

サンプル

アニメーションが IE ブラウザーで機能しない。(10,9)

ありがとう、

シヴァ

以下のコードを参照してください。

SVg animate 要素が IE ブラウザーで機能しない。どうすればこれを修正できますか? IE10 ブラウザのバグなのか、IE ブラウザで動作するようにコードを追加する必要があるのか​​。

以下のリンクを参考にしました。

SVG アニメーションを ie9 と firefox で動作させることができません

ありがとう、

シヴァ

1 つの SVG 折れ線グラフを作成しました。以下のスクリーンショットを参照してください。

折れ線グラフについては、以下の SVG 要素を参照してください。

その折れ線グラフでアニメーションを実行したい。つまり、折れ線グラフは動的に表示され、実行時に描画されます。

以下のリンクを参照してください。

http://www.highcharts.com/demo/

私は<animate> and <animateMotion>SVGアニメーションに関連するものを使用したくありません。一部のアニメーションがすべてのブラウザで機能しないためです。

だから私は純粋なjqueryアニメーションを実行したい(つまり、jquery.animateメソッドを使用して)。jquery animate メソッドまたはその他の方法を使用して折れ線グラフでアニメーションを作成または適用するにはどうすればよいですか?

ありがとう、

シヴァ

45度の回転で移動する通常の移動ドラッグ機能を使用して、長方形を直線で移動しようとすると、長方形が45度回転します。これに関する投稿をたくさん見てきましたが、これはこのように機能することを目的としていますが、これを修正する簡単な方法は見つかりませんでした。

raphael.free_transform.jsプラグインについては知っていますが、スクリプトの90％は必要ありません。

他の投稿から、私はMath.atan2を使用することになっていることを知っていますが、残念ながら私の数学のスキルはそれほど優れていません。

私の現在の移動関数は次のようになります。

バウンティアップデート：私はこれにバウンティをかけているので、誰かが私のコードを変更するのとは異なる解決策を思いついた場合に備えて、もう少し情報を提供したいと思いました。HighCharts目的は、棒グラフと縦棒グラフの実際のカテゴリ位置をアニメーション化することです。実際の「バー/列」のアニメーションはHighChartsに組み込まれているようですが、ラベルの位置が問題になっています。JSFiddleについては以下を参照してください。また、この質問がSVGを扱っていることは知っていますが、IE8でもアニメーションのサポートが必要です。

私は現在、HighCharts棒グラフと縦棒グラフのカテゴリの再編成をアニメーション化する使命を帯びています。

棒グラフは正常に機能しており、カテゴリとラベルを再編成する機能があり、ラベルは次のコードでアニメーション化されています。

現在、列の作業を行っていますが、ラベルをアニメーション化するのに大きな問題があります。コードは比較的同じです：

私はSVG要素のアニメーションを許可するために使用しています。ここでjQuery SVG見つけることができます。

ここで私が取り組んでいるjsFiddleを見ることができます。各チャートの下にある[実行]ボタンをクリックするだけで、実際の動作を確認できます。

カテゴリのアニメーション化を可能にする実際の「ハック」はHighcharts.Series.prototype.update = function(changes, callback){関数です。

何かを機能させるために遊んでみたところsvgY、列ラベルをアニメーション化できることがわかりましたがsvgX、まったく機能していないようです。

実際のHighCharts.jsハッキングは大歓迎です。

シンプルな html5 キャンバス描画アプリの次のコードがあります (ここからのコード)。ただし、キャンバスをマウスダウンで描画できません。何か案は？

IEではなく、Firefoxでこれを試しました。

どんな助けでも感謝します。

私はこの構文を多くの場所で見てきましたが、この2行が何をするのか、インターネット上で説明を見つけることができません。誰か説明できますか?