コンピュータ基礎II 通信授業課題2C 参考ページ



2. 基本的な線や図形の描画

サンプルをテキストエディタで入力して、ファイル名は任意、拡張子はepsとして保存します。Adobe IllustratorなどEPSファイルが開けるアプリケーションソフトウェアなどで開いてみましょう。

○サンプル1 線を描く

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
100 100 moveto
200 100 lineto
stroke
showpage
PostScriptサンプル1

1行目は、このファイルがEPSファイル(Encapsulated Post Script:PostScript形式のファイル)であることを示すために必要な行です。
2行目は、このファイルが描画する範囲(バウンディングボックス)を指定するために必要な行で、サンプル1は横300point×縦300pointの大きさを指定しています。とりあえずは描画するグラフィックより大きい値であれば任意で構いません。ただし、サンプルでは0〜300の値を指定していますが、描くグラフィックの座標がマイナスの値を取る場合は、バウンディングボックスの範囲もマイナスにする必要があります。PostScriptはデフォルトでpointという単位が使われます。1pointは約0.3528mmです。

4行目からが実際に描画を開始する行です。
4行目 newpath
新しいパスの描画を開始します。PostScriptでは(Illustratorでも)直線や曲線を描いていき、その線や線で囲まれた図形の塗りの状態を決めることでグラフィックを描画しますが、その線のことをパスといいます。

5行目 100 100 moveto
パスの開始位置をx座標:100、y座標:100の地点へ移動させます。movetoは実際にパスの作成は行いません(例えるなら紙からペンを浮かして移動させることになります)。PostScriptでは、今現在パスを作成しようとしている(あるいは作成し終った地点の)座標のことを、「カレントポイント」と呼びます。ここでmovetoはカレントポイントを(100, 100 ) の点に移動させています。

6行目 200 100 lineto
カレントポイント(この場合はx:100、y:100の地点)から、x座標:200、y座標:100の地点まで線を引きます。linetoは実際にパスの作成を行います(例えるなら紙にペンを着けた状態で移動させることになります)。描画の後、カレントポイントは ( 200, 100 ) に移動することになります。

7行目 stroke
パスをlinetoで作成しても、まだ実際の線の描画は行われず、stroke命令で初めてパスが実体として描画されます。特に指定をしないと線幅1point、黒色の線が描かれます。

8行目 showpage
描かれた全ての図形などを表示するのに必要な命令です。

PostScriptの命令をオペレータ、オペレータに渡される数字をオペランドと言います。
例えば5行目の
100 100 moveto
はmovetoオペレータに数値のオペランドを2つ渡しています。

a b moveto
点(a, b)にカレントポイントを移動

a b lineto
カレントポイントから点(a, b)に直線を引く

○サンプル2 線をつなげて描く1

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
100 100 moveto
200 100 lineto
100 200 lineto
200 200 lineto
stroke
showpage
PostScriptサンプル2

使用しているオペレータはサンプル1と同じですが、点(100,100)→(200, 100)→(100, 200)→(200, 200)と繋げて線を描いています。

○サンプル3 線をつなげて描く2

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
100 100 moveto
100 0 rlineto
-100 100 rlineto
100 0 rlineto
stroke
showpage
PostScriptサンプル3

描かれる図形はサンプル2と同じです。linetoと異なり、rlinetoを使用すると、現在の座標の位置から相対的な位置の座標へ線を描くことができます。

a b rlinto
カレントポイントからx軸方向にa、y軸方向にbの位置まで直線を引く

movetoに対してもrmovetoという相対的な座標へ移動するオペレータもあります。

a b rmoveto
カレントポイントからx軸方向にa、y軸方向にb、カレントポイントを移動

○サンプル4 四角形を描く

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
100 100 moveto 
100 0 rlineto
0 100 rlineto
-100 0 rlineto
closepath
stroke
showpage
PostScriptサンプル4

closepathはパスの描き初めの座標と、線を書き進んでいった現在の座標の位置をつないで図形を閉じます。closepathを使用しないで、rlinetoで初めの座標に戻ると、線と線の重なりがきちんとパスとして閉じません(実際にやってみるとよく分かります)。

○サンプル5 グレースケールの値と図形の線の太さを指定する

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
100 100 moveto 
100 0 rlineto
0 100 rlineto
-100 0 rlineto
closepath
.5 setgray
10 setlinewidth
stroke
showpage
PostScriptサンプル5

.5 setgrayで描画色のグレースケールの値を設定しています。0が黒、1が白でその間の実数地でグレースケールの値が設定できます。.5(0.5)は50%の濃度のグレーを描画色とするということになります。
10 setlinewidthで描く線の太さを指定しています。単位はpointですので10point(約3.528mm)の太さの線が描かれることになります。

a setgray
aの値のグレースケールを描画カラーをする。(0<=c<=1)

a setlinewidth
線の太さをaに設定する。

○サンプル6 サンプル5に加えて図形の塗りも指定する

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
100 100 moveto 
100 0 rlineto
0 100 rlineto
-100 0 rlineto
closepath
gsave
.3 setgray
fill
grestore
.5 setgray
10 setlinewidth
stroke
showpage
PostScriptサンプル6

一度、線などを描画してから、図形を塗りつぶそうとしてもパスを使用することができなくなります(PostScriptとはそういうものです)。図形を塗りつぶし、かつ線を描こうとする場合、塗りつぶす前に現在のパスの状態を保存しておき、図形を塗りつぶしたあと、保存したパスの状態に復元させ、線を描く必要があります。
gsaveが現在のパスの状態を保存するオペレータ、fillがパスを塗りつぶすオペレータ、grestoreが保存したパスの状態に復元させるオペレータです。

○サンプル7 色を使用する1

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
100 100 moveto 
100 0 rlineto
0 100 rlineto
-100 0 rlineto
closepath
gsave
1 1 .5  setrgbcolor
fill
grestore
.5 1 .0 setrgbcolor
10 setlinewidth
stroke
showpage
PostScriptサンプル7

色はRGBカラーで指定できます。 r g b setrgbcolor
r、g、b、にはそれぞれRGB各色の値を0~1の間で指定します。
1 1 .5 setrgbcolorとはR:100%、G:100%、B:50%の色を指定することになります。

a b c setrgbcolor
Rの値がa、Gの値がb、Bの値がcのRGBカラーを描画カラーにする。
(0<=a<=1、0<=b<=1、0<=c<=1)

○サンプル8 色を使用する2

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
100 100 moveto 
100 0 rlineto
0 100 rlineto
-100 0 rlineto
closepath
gsave
1 .7 .0 0  setcmykcolor
fill
grestore
0 .3 1 .0 setcmykcolor
10 setlinewidth
stroke
showpage
PostScriptサンプル8

色はCMYKカラーでも指定できます。
1 .7 .0 0 setcmykcolorとはC:100%、M:70%、Y:0%、K:0%の色を指定することになります。

a b c d setcmykcolor
Cの値がa、Mの値がb、Yの値がc、Kの値がdのCMYKカラーを描画カラーにする。
(0<=a<=1、0<=b<=1、0<=c<=1、0<=d<=1)

○サンプル9 曲線を描く

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
0 100 moveto 
100 50 150 50 250 0 rcurveto
100 -50 150 -50 250 0 rcurveto
0 .3 1 .0 setcmykcolor
2 setlinewidth
stroke
showpage
PostScriptサンプル9

curvetoが曲線を描くオペレータですが、rcuvetoはその座標を相対的に指定できます。
PostScriptで描く曲線は、ベジエ曲線と言われます。
ベジエ曲線はコンピュータで曲線を描く方法の一つで、曲線の始点と終点、曲線を制御する点(通常は2点)の4点の座標を指定し、曲線を描く方式です。

a b c d e f curveto
カレントポイントから点 ( e, f ) まで、点 ( a, b )、( c, d ) を制御点とするベジエ曲線を描く。

a b c d e f rcurveto
カレントポイントからx軸方向にe、y軸方向にf の位置までベジエ曲線を描く。制御点は、カレントポイントからx軸方向にa、y軸方向にbの点と、カレントポイントからx軸方向にc、y軸方向にdの点の2点。

○サンプル10 曲線を描く2

%!PS-Adobe-3.1 EPSF-3.0
%%BoundingBox: 0 0 300 300

newpath
0 100 moveto 
50 25 75 25 125 0 rcurveto
50 -25 75 -25 125 0 rcurveto
-25 50 -25 75 0 125 rcurveto
25 50 25 75 0 125 rcurveto
-50 -25 -75 -25 -125 0 rcurveto
-50 25 -75 25 -125 0 rcurveto
25 -50 25 -75 0 -125 rcurveto
-25 -50 -25 -75 0 -125 rcurveto
closepath
0 .3 1 .0 setcmykcolor
2 setlinewidth
stroke
showpage
PostScriptサンプル10

直線同様、曲線もつなげて描くことが可能です。