二次ベジェのアンカーからハンドルまでを2/3した点をハンドルにすると三次ベジェになる。三次ベジェを二次ベジェに変換するのは、解析的には解けなさげ。
QuadraticBezierSegment.toCubic()に実装した。Sparkにコミット済み。

QuadraticBezierSegment/CubicBezierSegment の getTimeForX()/getTimeForY()/getTimes() メソッドで使ってる Polynomial.solve() の演算誤差が恐かったのでデバッガ作った。

Polynomial クラスとは

「ax^n + bx^(n-1) … + vx + w で表される実数の体から成る一変数多項式」っていう高校くらいで習うかなり限定された多項式を、高校くらいで習う公式+αな公式でいじるクラスで、グラフ描くとかそういうことが最終目的じゃなくて演算上必要な代数方程式をわりとさくっと扱えたらいいなくらいのクラス。
# 某ブログのコメント欄で見たけど、「flashでただ数学やってどうすんの？」とかいうコメントは自分の日記とかに書いてほしい。数学やるためにAS使ったわけじゃなくて、BezierSegmentを操作する過程で必要だったから数学使ったってだけの話。

このデバッガでやってること

1. 2つの一変数多項式をそれぞれ assign() メソッドで x = -17 ~ 17 を代入し、グラフを描画。
2. 2つの一変数多項式をそれぞれ solve() メソッドで実数解を求め、 x 軸との交点として点を描画。
3. 2つの一変数多項式を equals() メソッドで比較。
4. 2つの一変数多項式を add() メソッドで加算。
5. 2つの一変数多項式を subtract() メソッドで減算。
6. 2つの一変数多項式を multiplicate() メソッドで乗算。
7. 2つの一変数多項式をそれぞれ differentiate() メソッドで微分。
8. 2つの一変数多項式をそれぞれ integrateIndefinite() メソッドで不定積分。
9. 2つの一変数多項式をそれぞれ integrate() メソッドで体積分。
10. 2~9の結果を toString() メソッドでストリング表現にして textField に表示。

要は、 clone() メソッド以外全部。

ポイントは、楕円や円は二次ベジェだと4セグメントじゃ近似しきれないから8セグメントで近似するってことと、π/4の倍数でアンカーをとることにすると計算が簡単ってこと。]]> http://ferv.jp/blog/2009/10/28/graphicspath-drawellipse/feed/ 0 http://ferv.jp/blog/2009/10/28/graphicspath-drawroundrect/ http://ferv.jp/blog/2009/10/28/graphicspath-drawroundrect/#comments Tue, 27 Oct 2009 16:09:30 +0000 dsk http://ferv.jp/blog/?p=992 前々回のエントリで、楕円をベジェセグメントで描いたのの応用としてGraphicsPathでGraphics.drawRoundRect()みたいなパスを描いてみた。ついでにWonderflのアカウント忘れたから作ってみた。
例によって後ろの青い線がGraphics.drawRoundRect()で描いた線で、黒い線がGraphicsPathで描いた線。

このエントリとは関係ないけど、GraphicsPathの利点はGraphicsインスタンスをもってなくても描画データのみをインスタンスとして作れるってことだと勝手に思ってる。だから、QuadraticBezierSegmentやCubicBezierSegmentのgetGraphicsPath()メソッドの戻り値はGraphicsPathなの。

ベジェ曲線上をクリックして分割する。クリックした座標に対応する媒介変数をISegment.getTime()で取得して、結果の媒介変数からISegment.split()でベジェセグメントを分割する。

Spark Projectにコミット済み。ソースはBezierSegmentの「リポジトリブラウザで閲覧」から。

円をベジェ曲線で表すのはあくまでも近似なんだってことを念頭に、三次ベジェの場合は4セグメントで円に見えるけど、二次ベジェの場合は4セグメントじゃきついので8セグメントで近似することにする。後ろの青い線はGraphics.drawEllipse()で描いた線。一致してることが分かるでしょうか。

てことでベジェセグメントを分割するsplit()まだ実装してないけどSpark Projectに一旦コミットした。BezierSegmentの「リポジトリブラウザで閲覧」からソース見れますよっと。

三次ベジェで円や楕円とかも描画できるとよさそう。
前回と同じく、青いのがGraphics.drawCircle()とGraphics.drawEllipse()で描画したライン。 白いのが自作クラスで描画したライン。

fl.motion.BezierSegmentを描画に使おうとするとメソッドが色々足りない。例えば「三次ベジェはあるけど二次ベジェはない」とか「getYForX()はあるのにgetXForY()はない」とか「近似でいいから長さも求めたいな」とか「描画にもっていくためにはgetValue()叩きまくらないといけない」とか・・・
パッケージがfl.motionってことでモーションに使うんだろうから文句言えない。で、こんなのつくってみた。

左が二次ベジェで右が三次ベジェ。白いベジェを自作クラスで描画、後ろの青いベジェを二次はcureveToで三次はfl.motion.BezierSegmentで描画。媒介変数が0.5のときの傾きが赤い線。x=400の時のyの値が青い丸、y=300の時のxの値が赤い丸。

もうちょっとまとめてから、SparkProjectで公開する予定。需要はまだない。