吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【Illustrator×JS】斜めのラインを描画してみた

2014年11月18日 / category : illustrator×js

今回は、斜めのラインを描画するスクリプトをいくつか作ってみました。

【Download】
http://tsudoi.org/illustrator_js/illustrator_js_1.zip

このzipの中には、

■斜線_均等.js
■斜線_ランダム.js
■斜線_交互.js

のjsファイルが格納されています。
全てillustratorで実行できます。これらを簡単に紹介してみます。

斜線_均等.js

ラインの幅が全て均等になって描画されます。
2行目のソースが実行文となっています。

set( 400,400,20 );

set関数の引数は次のようになっています。

set( width,height,length );

width : 新規ドキュメントの横幅
height : 新規ドキュメントの高さ
length : 斜線の数( length × 2 )
※描画される数は引数の2倍の数になります、40本描画したいときは、引数lengthは20となります。

また、引数lengthに対して、ドキュメントのサイズがちょうどよくならないときは、ドキュメントサイズが調整されます。

斜線_ランダム.js

ラインの幅がランダムになって描画されます。
2行目のソースが実行文となっています。

set( 400,400,10,60 );

set関数の引数は次のようになっています。

set( width,height,min,max );

width : 新規ドキュメントの横幅
height : 新規ドキュメントの高さ
min : 最小ライン幅
max : 最大ライン幅

ラインの幅はランダムですが、最小と最大の数値を指定することができます。
後は、ドキュメントのサイズに合わせて、ランダムに描画されます。

斜線_交互.js

2パターンの幅のラインが交互に描画されます。
2行目のソースが実行文となっています。

set( 20,[
{ weight:40, rgb:[255,0,0] },
{ weight:10, rgb:[0,255,0] }
] );

set関数の引数は次のようになっています。

set( length, line_data );

length : 斜線の数( length × 2 )
※描画される数は引数の2倍の数になります、40本描画したいときは、引数lengthは20となります。
line_data : ライン情報
→ weight属性 : ライン幅
→ rgb属性 : ラインカラー : [red, green, blue]
※2本交互のため、配列は2個限定です。
※rgb属性は省略することができます、省略するとカラーはランダムになります。

以上がzipに格納されているjsファイルの内容です。

ちなみに、検証環境はwindowsのillustratorCCのみです・・・
CC以前のillustratorで正しく動作するかは・・・保障できません、、、