
使用した言語はActionScript3.0です。
図形を構成するのに必要な描画点(X,Y)は、ユーザより任意に取得します。(クリック操作etc)
取得した描画点(X,Y)を相互に連結することによって、図形を描画していきます。
ActionScript3.0では、graphicsクラスのmoveTo(),lineTo()メゾットによって点の連結を実行出来ます。
Figure.graphics.moveTo(X,Y) ← The first point
Figure.graphics.lineTo(X,Y) ← The second point
Figure.graphics.lineTo(X,Y) ← The third point
・・・・
・・・
↓
Figure.graphics.lineTo(X,Y) ← The last point
X = radius * cosθ
Y = radius * sinθ
X = radius1 * cosθ
Y = radius2 * sinθ
ド・カステリョ (Paul de Casteljau)やピエール・ベジェ (Pierre Bezier)らが設計した以下の公式を用いる。(3次ベジェ曲線の場合)
X = (1-t)³x1 + 3(1-t)²tx2 + 3(1-t)t²x3 + t³x4
Y = (1-t)³y1 + 3(1-t)²ty2 + 3(1-t)t²y3 + t³y4
(0 ≦ t ≦ 1)
figure1にあるように制御点を4点(x1,y1),(x2・・・)とり、その線分をtの割合で分割する点から線分を引く
事を繰返し、最後に引いた線分の、tの割合の位置にある点を描画点として取得します。
図形の変換に際しては、
linear transformationを実行する。
これは以下の性質を保持しているので、ベクトルの延長はMatrix計算の後でも先でも可能。
例として、図形を回転させる場合は次のMatrixを用いる。
これに(x,y)を乗じて変換後の(X,Y)を求める。
X =
(cosθ)x + (-sinθ)y
Y =
(sinθ)x + (cosθ)y
ActionScript3.0に於いて配色の指定は、Red、Green、Blueの各成分を其々2桁の16進数で指定していきます。
例、AA11FF
(
r, g, b)
これを実際に、カラーパレットとして画面に表示させるには、其々の色指定をした1pixel×1pixelの正方形を描画して、
それを対象範囲にタイルのように並べます。
どのように並べるかは、「RGB」と「HSB」とで相違があります。
RGBではfigure2のように、XY平面に軸としてBlue・Greenをとり、そこにRed成分を混ぜるようにして作成します。
HSBは、XY平面の軸をsaturation(彩度)とBrightness(明度)にします。
ここに色相(Hue)を設定する事で、該当色を表示させていきます(figure3
)。
色相は0-360までの間で設定され、Red、Green、Blueの各成分の増減が異なる領域に6分割します(figure4)。
localPCのDevice FontsをBitmapデータからVectorに変換します。
これに際しては、2段階に分けて処理していきます。
①Bitmapの状態から対象文字を構成するのに必要な外枠(border)の座標値を取得し、
その位置に1pixel×1pixelの正方形を描画する(figure5)。
②並べられた正方形から、ベジェ曲線の描画に必要な制御点を取得して図形を曲線化する(figure6)。
①を具体的に実装する一つの例として、外枠(border)認識と取得に際しての方向変換を、条件として捉えていく事が考えられます。
外枠(border)の認識は、文字色が黒色なら黒以外の色が接している位置になります(figure7)。
取得の方向についてですが、例えば下が黒色で上が黒色以外の条件で、右側から進行してborder認識していた場合、
その条件から外れたら、どのように進行するかを左右上下で其々規定します(figure8)。
②の曲線化に際しては、borderが斜めの箇所からベジェ曲線の制御点を抽出します。
borderが斜になる場合は、figure9のように左右上下及び時計(反時計)回りかを考慮した8箇所です。
制御点の長さや角度等の調整は、斜線の縦横比の不均衡性(1:1でない)を反映するように行います。