グラデーションする四角をいろいろ描いてみるサンプル

グラデーションする四角を描くには、Graphics#beginGradientFill()を設定したあと、Graphics#drawRect()で四角を描画します。

• グラデーションの種別(線or放射)とか色など、いろいろパラメータが指定できますが、まぁ、ドキュメントを参照ということで。(→Graphics#beginGradientFill())
• グラデーションの方向や、開始位置、終了位置は第五引数のmatrixで指定します。
  • Matrix#createGradientBox()というユーティリティが用意されていて、必要な属性を1発で設定できます。
  • グラデーションの開始位置(tx,ty)はキャンバス全体の位置で指定するものなので注意。(最初、drawRect()で四角を描画した座標からの位置だと思っていて、0,0を指定していてはまりました。)

package {
    
    import flash.display.*;
    import flash.geom.*;
  
    // グラデーションする四角をいろいろ描いてみるサンプル
    public class DrawRects extends Sprite  {

    public function DrawRects(){
      
      var g:Graphics = this.graphics;
      var x:int = 10;
      var y:int = 10;
      var matrix:Matrix = new Matrix();
      
      /// グラデーションタイプ
      // 線
      matrix.createGradientBox( 50, 50, 0, x, y);
      g.beginGradientFill( 
        GradientType.LINEAR, 
        [0xff2222, 0x2222ff], 
        [1, 1], 
        [0, 255], 
        matrix);
      g.drawRect( x, y, 50, 50 );
      
      x += 60;
      
      // 放射
      matrix.createGradientBox( 50, 50, 0, x, y);
      g.beginGradientFill( 
        GradientType.RADIAL, 
        [0xff2222, 0x2222ff], 
        [1, 1], 
        [0, 255], 
        matrix);
      g.drawRect( x, y, 50, 50 );
      
      x = 10;
      y += 60;
      
      
      /// グラデーション方向
      // 横方向グラデーション
      matrix.createGradientBox( 50, 50, 0, x, y);
      g.beginGradientFill( 
          GradientType.LINEAR, 
        [0xff2222, 0x2222ff], 
        [1, 1], 
        [0, 255], 
        matrix);
      g.drawRect( x, y, 50, 50 );
      
      x += 60;
      
      // 縦方向グラデーション
      matrix.createGradientBox( 50, 50, Math.PI / 2, x, y);
      g.beginGradientFill( 
          GradientType.LINEAR, 
        [0xff2222, 0x2222ff], 
        [1, 1], 
        [0, 255], 
        matrix);
      g.drawRect( x, y, 50, 50 );
      
      x += 60;
      
      // 斜め方向グラデーション
      matrix.createGradientBox( 50, 50, Math.PI / 4, x, y);
      g.beginGradientFill( 
          GradientType.LINEAR, 
        [0xff2222, 0x2222ff], 
        [1, 1], 
        [0, 255], 
        matrix);
      g.drawRect( x, y, 50, 50 );
      
      x = 10;
      y += 60;
      
      
      /// グラデーション開始位置
      // 下にずらす
      matrix.createGradientBox( 50, 50, Math.PI / 2, x, y+20);
      g.beginGradientFill( 
          GradientType.LINEAR, 
        [0xff2222, 0x2222ff], 
        [1, 1], 
        [0, 255], 
        matrix);
      g.drawRect( x, y, 50, 50 );
      
      x += 60;
      
      // 横にずらす
      matrix.createGradientBox( 50, 50, 0, x+20, y);
      g.beginGradientFill( 
          GradientType.LINEAR, 
        [0xff2222, 0x2222ff], 
        [1, 1], 
        [0, 255], 
        matrix);
      g.drawRect( x, y, 50, 50 );
      
    }
  }
}

確認はこちらから