投稿者 tel | 2010年3月8日

ベジェ曲線で楕円を描く(3)

続き。HTML5のCanvasで楕円を何とかして描く。まず楕円の持ってるパラメータは以下のようなかんじ。aがx方向の軸の長さ、bがy方向の軸の長さ。

楕円の方程式を媒介変数を用いて表すと、

この式を前回の円の式と同様にt=0.5としてベジェ曲線の式と連立させて解くことで制御点の座標を求める。制御点のパラメータは円の場合はxとyともに同じだったが楕円の場合は別々に求める。

前回と同様にしてmとnを求めると

この値を使ってベジェ曲線で楕円を描いてみる。

右の楕円は直線で100分割して近似して描いたもの。ほとんど同じなので多分あっている。でも直線で100分割程度で十分きれいな楕円が描けるならわざわざベジェ曲線で描く意味がなかったかも。ちなみにSketchpadの楕円は直線で描いてるみたい。

とりあえずソースコード載せときますね。CanvasのstrokeRectライクに使えるようにCanvasRenderingContext2Dに追加。context.strokeEllipse(0,0,100,200)みたいにして楕円がはいる矩形のの左上の座標と右下の座標を指定して使う。

CanvasRenderingContext2D.prototype.strokeEllipse = function(left, top, right, bottom) {
  var halfWidth = (right - left) / 2.0;
  var halfHeight = (bottom - top) / 2.0;
  var x0 = left + halfWidth;
  var y1 = top + halfHeight;
  this.beginPath();
  var cw = 4.0 * (Math.sqrt(2.0) - 1.0) * halfWidth / 3.0;
  var ch = 4.0 * (Math.sqrt(2.0) - 1.0) * halfHeight / 3.0;
  this.moveTo(x0, top);
  this.bezierCurveTo(x0 + cw, top, right, y1 - ch, right, y1);
  this.bezierCurveTo(right, y1 + ch, x0 + cw, bottom, x0, bottom);
  this.bezierCurveTo(x0 - cw, bottom, left, y1 + ch, left, y1);
  this.bezierCurveTo(left, y1 - ch, x0 - cw, top, x0, top);
  this.stroke();
};

Responses

  1. 3次ベジェ曲線では2次曲線(円、楕円、双曲線など)は近似的にしか表現できないとCGの本に書いてあった

  2. こんにちは。

    楕円を書く方法を検索していて見つけました。
    この関数を、ライブラリにまとめて配布してもよろしいですか?
    その際、いくつか編集します。
    著作権表記が必要ならばなにを書けばいいかお願いします。

    • こんにちは。
      3次ベジェ曲線では楕円は近似でしか表せないことをふまえた上で、常識の範囲内で利用する分には自由に使ってくださってかまいません。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。