複合ベジェ曲線とは？わかりやすく解説

閉じた複合ベジェ曲線（ベジェゴン）の例 – ベジェゴン（赤）は頂点（青）を通る。制御点（緑）は接続するベジェ曲線の形状を決定する。

幾何モデリング（英語: geometric modelling）やコンピュータグラフィックスにおいて、複合ベジェ曲線（ふくごうベジェきょくせん、英語: composite Bézier curve）またはベジェスプライン（英語: Bézier spline）とは、複数のベジェ曲線から構成されるスプラインであり、少なくとも $C^{0}$

滑らかなベジェスプライン、つまり滑らかに結合されたベジェ曲線で近似されたsinc関数

滑らかな接続

→「滑らかな関数 § 連続性」も参照

一般的に、スプラインに求められる性質は、各曲線同士が所定のパラメトリックあるいは幾何学的連続性で接続されることである。スプライン内の個々の曲線は、それぞれの定義区間内では $C^{\infty }$

3次ベジェ曲線の連続性の例^[10]

円弧の近似

特定の環境で円弧のプリミティブがサポートされていない場合、ベジェ曲線で近似することができる ^[11]。一般的に、円を近似するには8つの2次（曲線）セグメント^[12]、または4つの3次セグメントが使用される。与えられた数の3次セグメントによる近似誤差が最小となる、制御点の長さ $\mathbf {k}$

円（黒）を近似する8セグメントの2次複合ベジェ曲線（赤）と制御点

円（黒）を近似する4セグメントの3次複合ベジェ曲線（赤）と制御点

フォント

TrueTypeフォントでは、2次ベジェ曲線（2次曲線）で構成される複合ベジェ曲線が使用されている。一般的な書体デザインをコンピュータフォントとして一定の精度で表現するには、3次ベジェ曲線の方が2次ベジェ曲線よりもデータ量が少なく、さらに3次ベジェ曲線は一連の直線よりもデータ量が少なくなる。これは、直線の1セグメントに必要なデータ量が放物線の1セグメントに必要なデータ量よりも少なく、さらに放物線の1セグメントに必要なデータ量が3次曲線の1セグメントに必要なデータ量よりも少ない場合であっても当てはまる。

複合ベジェ曲線の作図

3次ベジェ曲線からなる3次の複合ベジェ曲線は複雑な図形を描くためによく実利用されるため、様々な作図法が考案されている。またベジェ曲線の数学的理解無しで直感的に複合ベジェ曲線を描くために、いくつかの用語がしばしば導入されている。

アンカーポイント

アンカーポイント（英: anchor point）はセグメント端点にある制御点の別名である^[14]。頂点（英: vertex）、パスポイント（英: path point）、通過点とも^[15]。端点と端制御点の一致特性により、ベジェ曲線はアンカーポイント間を繋ぐ曲線とみなせる。セグメントが通らない制御点（=方向ハンドル）との区別を直感的にするためにこの用語が導入されている。

方向ハンドル

方向ハンドル （ほうこうハンドル、（英: direction handle）はセグメント端点の隣にある制御点の別名である。方向点とも^[16]。方向線の先端に位置する。アンカーポイントと区別することで直接曲線は通らないが曲がり方を決定づけるということを直感的に理解できる。

方向線

方向線 （ほうこうせん、（英: direction line）はセグメント端点から隣の制御点へ伸びる直線である^[17]。3次ベジェ曲線では端点での接線ベクトルが隣の制御点へ伸びるベクトルと同じ向きであるため（詳細: 3次ベジェ曲線）、方向線の概念を導入すれば端点での傾きと隣接制御点（=方向ハンドル）の位置を同時に視認できる。

アンカーポイントと方向線による滑らかさ制御

複合ベジェ曲線は滑らかさの保証に制約を要する（⇒3次ベジェ曲線の滑らかな接続）。これは各アンカーポイントから伸びる2つの方向線のあいだにどのような制約を課すかで表現できる。

方向線が左右対称であれば接線が一致するため必ず滑らかになる。この制約が課されたアンカーポイントはスムーズポイント（英: smooth point）^[18]、設定そのものはシンメトリック（英: symmetric）^[19]、曲線^[20]、スムーズ（英: smooth）^[21]^[19] などと呼称される。

多くのソフトウェアでは「mousedown でアンカーポイント設定、drag で方向ハンドル調整、mouseup で確定」を繰り返すことで滑らかな複合ベジェ曲線を作図できる。2ハンドルの連動（smooth 状態）を alt で切り離す、といった操作もしばしば実装されている。

画像から複合ベジェ曲線への変換

→詳細は「画像トレース」を参照

フォントやロゴデータの作成、紙図面からのCADデータ逆生成など、多くの場面で画像からベクターデータへの変換が行われる。変換にはAdobe Illustratorなどの商用ソフトウェアのほか、AutoTrace ^[22] ^[23] やPotrace（英語版）などのオープンソースソフトウェアも利用される ^[24]。
以下は、AutoTraceを用いたEPSへの変換例で、画像の輪郭が複数の3次ベジェ曲線と直線から成る図形表現に変換されている。ベジェ曲線間の接続はおおむね滑らかだが、急峻な屈曲ではそうならない場合もある。

入力画像

変換出力（図形表現のみ抜粋）

プロット

/bd { bind def } bind def
/m { moveto } bd
/l { lineto } bd
/c { curveto } bd
/f { closepath F } bd

10 33 m
69 12 l
69.001 22.404  73.966 29.253  75.671 39  c 
77.152 47.465  74.308 54.539  77.615 63  c 
81.189 72.144  92.085 83.964  90 94  c 
73.095 89.729  64.067 70.828  48 64.999  c 
36.198 60.718  35.831 77.911  27.042 79.079  c 
22.311 79.707  21.762 71.011  20.783 68  c 
19.157 62.996  15.176 59.040  13.843 54  c 
12.046 47.209  12.019 40.076  10 33  c 
f

脚注

[脚注の使い方]

訳注

^ 穴がない文字。C、E、F、G など。参照：en:Typeface anatomy、en:Counter (typography)
^ 穴がある文字。A、B、D、O など。

出典

^ Eugene V. Shikin; Alexander I. Plis (14 July 1995). Handbook on Splines for the User. CRC Press. p. 96. ISBN 978-0-8493-9404-1
^ Microsoft polybezier API
^ Papyrus béziergon API reference
^ "A better box of crayons". InfoWorld. 1991.
^ Rebaza, Jorge (2012-04-24) (英語). A First Course in Applied Mathematics. John Wiley & Sons. ISBN 9781118277157
^ (Firm), Wolfram Research (1996-09-13) (英語). Mathematica ® 3.0 Standard Add-on Packages. Cambridge University Press. ISBN 9780521585859
^ Goodman, T.N.T (1983-12-09). “Properties of β-splines” (英語). Journal of Approximation Theory 44 (2): 132–153. doi:10.1016/0021-9045(85)90076-0.
^ DeRose, Anthony D. (1985年8月1日). “Geometric Continuity: A Parametrization Independent Measure of Continuity for Computer Aided Geometric Design” (英語). 2025年6月14日閲覧。
^ DeRose (1985), pp.15-19
^ Farin, Gerald (1988). Curves and Surfaces for Computer Aided Geometric Design: A Practical Guide. pp. 77-90. ISBN 0-12-249050-9
^ Stanislav, G. Adam. “Drawing a circle with Bézier Curves”. 2010年4月10日閲覧。
^ “Digitizing letterform designs”. Apple. 2014年7月26日閲覧。
^ DeVeneza, Richard. “Drawing a circle with Bézier Curves”. 2010年4月10日閲覧。
^ "頂点は、パスの各セグメントの開始点と終了点です。他の Adobe アプリケーションでは、頂点のことをアンカーポイントまたはパスポイントと呼ぶ場合もあります。" Adobe. ベクトルグラフィックとラスター画像について. After Effects ユーザーガイド. 2024-10-13閲覧.
^ "[3次ベジェ]は、複数の通過点と方向点で構成される曲線を描画できます。... 1つ目の曲線を終了したい位置からドラッグを開始すると、ドラッグの開始位置に通過点が作成される" CLIP STUDIO PAINT. 連続曲線サブツール・ベジェ曲線サブツール. User Guide. 2024-10-13閲覧.
^ "[3次ベジェ]は、複数の通過点と方向点で構成される曲線を描画できます。... 方向点が表示されます。マウスを動かすと曲線の曲がり具合を調整できます。曲線の位置を決めたらマウスのボタンを離します。" CLIP STUDIO PAINT. 連続曲線サブツール・ベジェ曲線サブツール. User Guide. 2024-10-13閲覧.
^ "各頂点の方向線（すなわち接線）" Adobe. ベクトルグラフィックとラスター画像について. After Effects ユーザーガイド. 2024-10-13閲覧.
^ "スムーズポイントでは、パスセグメントは連続する曲線として連結されます。つまり、入ってくる方向と出て行く方向が同じ線上にあります。... スムーズポイントで方向線を移動すると、ポイントの両側の曲線が同時に調整されます。" Adobe. ベクトルグラフィックとラスター画像について. After Effects ユーザーガイド. 2024-10-13閲覧.
^ ^a ^b "Krita has several node-types that allow you control the side handles more efficiently. These are the corner, smooth and symmetric modes. ... Symmetric ... the symmetric node will force handles to always point in opposite directions and have the same length." Krita. Tools » Shape Edit Tool. Krita Reference Manual. 2024-10-13閲覧.
^ "通過点の状態を角と曲線のいずれかに変更できます。... 通過点を曲線にすると、2つの方向点が連動した状態で操作できます。" CLIP STUDIO PAINT. 連続曲線サブツール・ベジェ曲線サブツール. User Guide. 2024-10-13閲覧.
^ "smooth curveto ... Draws a cubic Bézier curve from the current point ... The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point." 以下より引用。W3C (2018年10月). “Scalable Vector Graphics (SVG) 2”. World Wide Web Consortium. 2024年9月9日閲覧。
^ “autotrace / autotrace” (英語). 2025年7月2日閲覧。
^ “AutoTrace - converts bitmap to vector graphics（旧サイト）” (英語). 2025年7月2日閲覧。
^ 例：“FontForge でビットマップを自動トレースする方法”. 2025年7月2日閲覧。

複合ベジェ曲線とは？わかりやすく解説