このページの本文へ

IllustratorもJavaScriptで自由自在に! (3/4)

2009年08月25日 12時55分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

Illustratorで四角形を描いてみる

 ドキュメントが作成できたら、次はドキュメント上に四角形(矩形)を描いてみましょう。通常、コンピューター上で扱われる座標は左上が原点で右下に行くに従って座標値が大きくなりますが、Illustratorでは数学座標系と同じく左下が原点になっており、右上に行くに従って座標値が大きくなります。Illustratorで座標を指定する際には覚えておきましょう。

fig3-1

Illustratorでは右上に行くに従って座標値が大きくなります

 Illustratorで四角形を描くには、描画対象とするレイヤーを指定します。新規ドキュメントを作成した直後に存在するレイヤーは1つだけで、このレイヤーがすでにアクティブ(図形が描かれるレイヤー)な状態になっています。アクティブレイヤーには以下のように activeLayer を使ってアクセスできます。


var doc = app.documents.add(DocumentColorSpace.RGB, 595.28, 841.89);
var layerObj = doc.activeLayer;


 レイヤー上に四角形を描くには rectangle() を使います。rectangle() には描画する座標とサイズを指定します。


rectangle(Y座標, X座標, 横幅, 縦幅)


 座標は、一般的なX, YではなくY, Xの順番になっているので注意してください。Illustratorの座標系は先ほど説明したとおり右上に行くに従って座標値が大きくなりますが、rectangle() では指定した座標を起点として下方向に四角形が描かれます。意図しない場所に四角形が描かれてしまった場合は、座標の指定方法に問題がないか、見直してみましょう。

 実際のスクリプトはサンプル02です。

fig3-2

指定した座標に四角形が描かれます


●サンプル02のソースコード


var doc = app.documents.add(DocumentColorSpace.RGB, 595.28, 841.89);
var layerObj = doc.activeLayer;
var pObj = layerObj.pathItems.rectangle(400, 50, 100, 20);


 サンプル02を実行すると、デフォルトでは黒枠に白で塗りつぶされた四角形が描かれます。今回作成する百ます計算ではこのままでも使えますが、ほとんどの場合、線の太さや塗りの有無、線の表示/非表示などの設定が必要です。これらは rectangle() で作成したオブジェクトのプロパティにフラグや値を指定します。

 塗りの有無は filledプロパティに指定します。trueなら塗りつぶし有り、falseなら塗りつぶし無し(透明)になります。線の表示/非表示はstrokedプロパティにフラグを指定します。trueなら線を表示し、falseなら線を表示しません。線の幅は、strokeWidthプロパティにポイントで指定します。Illustratorでの線は、指定した座標を中心にして上下左右に広がる形になります。

 ここまでをまとめたものがサンプル03です。

fig3-3

指定した線幅や塗りで四角形が表示されます


●サンプル03のソースコード


var doc = app.documents.add(DocumentColorSpace.RGB, 595.28, 841.89);
var layerObj = doc.activeLayer;
var pObj = layerObj.pathItems.rectangle(400, 50, 100, 20);
pObj.filled = true; // 塗りあり
pObj.stroked = true; // 線あり
pObj.strokeWidth = 4; // 線幅4ポイント


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています