« エッジ検出・エッジ強調・ぼかし | トップページ | アンチエイリアシングとClear Type »

アウトラインフォント


リンク
画像の変換(目次ページ)
アウトラインフォントとアンチエイリアシング
・アウトラインフォント
アンチエイリアシングと Clear Type

アウトラインフォントには「2次 B-スプライン曲線」や「ベジェ曲線」と
呼ばれるものを使います。

実は、
・2次ベジェ曲線 (Quadratic Bezier Curve)
・2次 B-スプライン曲線 (Quadratic B-Spline Curve)
の2つは同じものです。

・2次ベジェ曲線 (Quadratic Bezier Curve)
・3次ベジェ曲線 (Cubic Bezier Curve)
の2つは次数が違いますが考え方は同じです。

PostScriptフォント3次ベジェ曲線 (Cubic Bezier Curve)
True Typeフォント2次ベジェ曲線 (Quadratic Bezier Curve)
(2次 B-スプライン曲線 ( Quadratic B-Spline Curve) )

2次ベジェ曲線

下記のように3点(Q1,Q2,Q3)が与えられたとします。
Q1F1:F1Q2 = 1:(1-t) となるように点 F1 を定めます。
同様に、点 F2 と G1 を定めます。
0≦t≦1 の範囲で t を動かすと G1 の軌跡がカーブを描きます。
このカーブを 2次ベジェ曲線と呼びます。


このカーブを直観的に理解するには、
(英語版 Wiki)のモーションGIF が秀逸です。

2次ベジェ曲線の数式による定義
次の2次多項式で与えられます。
P = (1-t)2*Q1 + 2t(1-t)*Q2 + t2*Q3
(0≦t≦1)

2次ベジェ曲線への再帰的アプローチ
実は、
上記の数式を用いてコンピュータで曲線の座標をプロットしていくことは
簡単です。
しかしながら、プロットした点を隙間の無い連続した線にするのは
コンピュータにとってはちょっと大変なのです。

フォントの展開では別の手法を取ります。
同じ事を繰り返す事を『再帰(さいき)』と呼びますが、
再帰という方法でベジェ曲線を引く方法です。


まず、Q1 と Q2 の中間点(まん中の点) R1 を求めます。
同様に R2 を求めます。

次に R1 と R2 の中間点 S1 を求めます。

Q1-R1-S1 の3点に対して
Q1-Q2-Q3 でやった事と同じ事を繰り返します。

これを何回か繰り返すと、ある曲線に収束していく事がわかります。
通常は数回で収束します。

この曲線は、フォントデータでは縁取り(境界線)になる部分です。

フォントでは、目で見て区別が付かない程度に収束すればよいので、
たとえば Q2 と S1 の距離が 1 ピクセル以下になれば、
再帰を中止して、あとは、その3点を線で結べば完成です。

最後に得られた曲線の内側を、べったりと塗りつぶします。
(この塗りつぶしの際に、線に隙間が無い方が都合が良いのです。)
こうしてフォントの完成です。

2次ベジェ曲線では次のような特徴があります。
・端点 Q1 におけるカーブの傾きは Q2 を向いている。
・端点 Q3 におけるカーブの傾きは Q2 を向いている。
・Q1、Q3 の中間点を A1 とすると
 A1S1:S1Q2 = 1:1 となる。
 (A1 と Q2 の中間点 S1 にカーブが接する)


3次ベジェ曲線
考え方は 2次ベジェ曲線と同じです。(点を増やしただけ)

下記の図で
0≦t≦1 の範囲で t を動かすと H1 が曲線を描きます。
この軌跡が 3次ベジェ曲線です。


3次ベジェ曲線の数式による定義
次の3次多項式で与えられます。
P = (1-t)3*Q1 + 3t(1-t)2*Q2 + 3t2(1-t)*Q3 + t3*Q4
(0≦t≦1)


3次ベジェ曲線への再帰的アプローチ
Q1, Q2, Q3, Q4 の中点 R1, R2, R3
R1, R2, R3 の中点 S1, S2
S1, S2 の中点 T1 を求めます。

Q1-R1-S1-T1 の4点が得られます。

この4点に対して、Q1-Q2-Q3-Q4 の4点と同じ事をします。

2次ベジェ曲線の時と同様に、これを数回繰り返すと曲線に収束します。

フォントの場合はこの内側を塗りつぶします。


3次ベジェ曲線では次のような特徴があります。
・端点 Q1 におけるカーブの傾きは Q2 を向いている。
・端点 Q4 におけるカーブの傾きは Q3 を向いている。
・Q1、Q4 の中間点を A1 とすると
 A1T1:T1R2 = 3:1 となる。  (T1 にカーブが接する)


アウトラインフォント
ベジェ曲線の基点となる点(上記の Q1~Q4(or Q3) )
でデータが構成されています。

ドローソフト(Adobe の Illustrator とか MS Office の power point とか)で
下記のような曲線を描く事ができます。

アンカーポイント(曲線上の制御点)と方向線の制御点が 3次ベジェの端点に
なっているようです。

この様なカーブでフォントの境界線が作れるであろう事は想像がつくかと思います。

パソコンなんかでフォント1文字を表示するたびに、
ベジェ曲線の展開と塗りつぶしを行っているわけです。
(もちろん、よく使う文字は高速化のため作り置きしていると思いますが。)

ビットマップフォントに比べたアウトラインフォントの利点ですが、
このように基点によってデータを管理する事によって
【元データ】から


フォントの【拡大】


【伸ばし】


【回転】


【傾け】

などが自在にできるわけです。

(注)通常のフォントはイタリック用のフォントを別データとして持っていたはずです。
 (上記のように基点を傾けてその都度作成しているわけではありません。)

|

« エッジ検出・エッジ強調・ぼかし | トップページ | アンチエイリアシングとClear Type »

画像フォーマット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: アウトラインフォント:

« エッジ検出・エッジ強調・ぼかし | トップページ | アンチエイリアシングとClear Type »