グラデーションの線と塗りの作成

シェイプで使用するグラデーションを定義するには、flash.display.Graphics クラスの beginGradientFill() および lineGradientStyle() メソッドを使用します。グラデーションを定義する際、これらのメソッドのパラメーターでマトリックスを指定します。

マトリックスを最も簡単に定義するには、Matrix クラスの createGradientBox() メソッドを使用してグラデーション定義用のマトリックスを作成します。 createGradientBox() メソッドに指定するパラメーターでは、グラデーションの拡大／縮小、回転、および位置を定義します。 createGradientBox() メソッドは次のパラメーターを受け取ります。

• グラデーションボックスの幅：グラデーションが広がる幅（ピクセル単位）

• グラデーションボックスの高さ：グラデーションが広がる高さ（ピクセル単位）

• グラデーションボックスの回転：グラデーションに適用される回転角度（ラジアン単位）

• 水平移動：グラデーションが水平方向に移動する距離（ピクセル単位）

• 垂直移動：グラデーションが垂直方向に移動する距離（ピクセル単位）

例えば、次の性質を持つグラデーションを作成するとします。

• GradientType.LINEAR

• グリーンとブルーの 2 色、 ratios 配列を [0, 255] に設定

• SpreadMethod.PAD

• InterpolationMethod.LINEAR_RGB

次の例で示すグラデーションは、 createGradientBox() メソッドの rotation パラメーターが異なりますが、その他の設定はすべて同じです。

次の例で示す緑～青の線状グラデーション効果は、 createGradientBox() メソッドの rotation 、 tx 、 ty パラメーターが異なりますが、その他の設定はすべて同じです。

createGradientBox() メソッドの width 、 height 、 tx 、 ty パラメーターは、次の例で示すように、放射状グラデーションの塗りに関するサイズと位置にも影響します。

次のコードは、前の図の最後に示した放射状グラデーションを生成します。

import flash.display.Shape; 
import flash.display.GradientType; 
import flash.geom.Matrix; 
 
var type:String = GradientType.RADIAL; 
var colors:Array = [0x00FF00, 0x000088]; 
var alphas:Array = [1, 1]; 
var ratios:Array = [0, 255]; 
var spreadMethod:String = SpreadMethod.PAD; 
var interp:String = InterpolationMethod.LINEAR_RGB; 
var focalPtRatio:Number = 0; 
 
var matrix:Matrix = new Matrix(); 
var boxWidth:Number = 50; 
var boxHeight:Number = 100; 
var boxRotation:Number = Math.PI/2; // 90° 
var tx:Number = 25; 
var ty:Number = 0; 
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); 
 
var square:Shape = new Shape; 
square.graphics.beginGradientFill(type,  
                            colors, 
                            alphas, 
                            ratios,  
                            matrix,  
                            spreadMethod,  
                            interp,  
                            focalPtRatio); 
square.graphics.drawRect(0, 0, 100, 100); 
addChild(square);

グラデーションの塗りの幅と高さは、Graphics オブジェクトを使用して描画される幅と高さではなく、グラデーションマトリックスの幅と高さによって決定されます。 Graphics オブジェクトを使用して描画する場合、グラデーションマトリックスのその座標に存在するものが描画されます。 drawRect() などの Graphics オブジェクトのシェイプメソッドのいずれかを使用した場合でも、グラデーションは描画されるシェイプのサイズには伸縮されません。グラデーションのサイズはグラデーションマトリックス自体で指定する必要があります。

次のコードを使用して、グラデーションマトリックスのサイズと描画自体のサイズの視覚的な違いを説明します。

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); 
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 50, 40); 
myShape.graphics.drawRect(0, 50, 100, 40); 
myShape.graphics.drawRect(0, 100, 150, 40); 
myShape.graphics.endFill(); 
this.addChild(myShape);

このコードは、赤、緑、青の色配分を同ーに指定した塗りのスタイルを持つ 3 つのグラデーションを描画します。 グラデーションは、 drawRect() メソッドを使用して、それぞれピクセル幅 50、100、150 で描画されます。 beginGradientFill() メソッドで指定するグラデーションマトリックスは、100 ピクセルの幅で作成されます。つまり、最初のグラデーションはグラデーション領域の半分のみを占め、2 番目は領域全体を占め、3 番目は領域全体を占めて、さらに青を 50 ピクセル右に拡張します。

lineGradientStyle() メソッドは beginGradientFill() と同様に動作しますが、グラデーションを定義するだけでなく、描画の前に、 lineStyle() メソッドを使用して境界線の幅を指定する必要があります。次のコードは、赤、緑、および青のグラデーションの境界線でボックスを描画します。

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); 
myShape.graphics.lineStyle(5, 0); 
myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 200, 40); 
this.addChild(myShape);

Matrix クラスについて詳しくは、 Matrix オブジェクトの使用 を参照してください。