古籏一浩のJavaScriptラボ ― 第8回

IllustratorもJavaScriptで自由自在に！

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

文● 古籏一浩

塗りや線の色を設定する

　四角形の線幅や塗りの有無は設定できましたが、肝心の色がまだ指定できていませんでした。塗りつぶす色は fillColorプロパティに、線の色は strokeColorプロパティに、カラーオブジェクトを設定します。指定するカラーオブジェクトは、カラーモード（RGB／CMYK）によって異なります。

●RGBカラーの場合

　RGBカラーオブジェクトはnew RGBColor()で生成できます。生成したオブジェクトのred, green, blueプロパティに、それぞれRGB値を設定します。RGB値は0～255までの整数になります。

●CMYKカラーの場合

　CMYKカラーで指定する場合はnew CMYKColor()を使います。生成したオブジェクトのcyan, magenta, yellow, blackの各プロパティにCMYKの値を設定します。設定できるCMYKの値は0～100までの小数値で、Illustrator上のカラーパレット（カラーパネル）で指定できる値と同じです。なお、ドキュメントのカラーモードをCMYKモードにしておかないと指定した値になりません。

　カラーの指定は関数を作っておくと便利です。サンプル04はsetRGBColor() が、サンプル05は setCMYKColor()がカラーを設定する関数になっています。


RGBカラーを指定して四角形が描かれます		CMYKカラーを指定して四角形が描かれます

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


// RGBカラー設定
function setRGBColor(r,g,b){
    var tmpColor = new RGBColor();
    tmpColor.red = r;
    tmpColor.green = g;
    tmpColor.blue = b;
    return tmpColor;
}
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ポイント
pObj.fillColor = setRGBColor(255,0,0); //　塗りの色を指定
pObj.strokeColor = setRGBColor(0,0,255); //　線の色を指定

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


// CMYKカラー設定
function setCMYKColor(c,m,y,k){
    var tmpColor = new CMYKColor();
    tmpColor.cyan = c;
    tmpColor.magenta = m;
    tmpColor.yellow = y;
    tmpColor.black = k;
    return tmpColor;
}
var doc = app.documents.add(DocumentColorSpace.CMYK, 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ポイント
pObj.fillColor = setCMYKColor(100,0,0,0); //　塗りの色を指定
pObj.strokeColor = setCMYKColor(0,53,91,0); //　線の色を指定

いよいよマス目を描く

　前編の最後に、百ます計算表で使うマス目を描いてみましょう。マス目を描くには for() を使って縦と横に繰り返し四角形を描く関数を呼び出します。サンプル06では drawBox() という四角形を描く関数を用意し、10×10の青く塗りつぶされたマス目を描いています。


10×10の青いマス目が描かれます

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


// RGBカラー設定
function setRGBColor(r,g,b){
    var tmpColor = new RGBColor();
    tmpColor.red = r;
    tmpColor.green = g;
    tmpColor.blue = b;
    return tmpColor;
}
// 任意の色の四角形を描く
function drawBox(x,y,w,h, bgColor){
    var layerObj = app.activeDocument.activeLayer;
    pObj = layerObj.pathItems.rectangle(y, x, w, h);
    pObj.filled = true; //　塗りあり
    pObj.stroked = true; //　線あり
    pObj.strokeWidth = 1; //　線幅1ポイント
    pObj.fillColor = bgColor; //　塗りの色を指定
    pObj.strokeColor = setRGBColor(0,0,0); //　線の色を指定（黒色）
}
// マス目を描く
var doc = app.documents.add(DocumentColorSpace.RGB, 595.28, 841.89);
for(var y=0; y<10; y++){
    for(var x=0; x<10; x++){
        drawBox(y*50,x*50, 50,50, setRGBColor(0,0,255));
    }
}