パッケージflash.display
クラスpublic final class Graphics
継承Graphics Inheritance Object

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

Graphics クラスには、ベクターシェイプの作成に使用できる一連のメソッドがあります。描画をサポートする表示オブジェクトには、Sprite および Shape オブジェクトがあります。これらの各クラスには、Graphics オブジェクトである graphics プロパティがあります。以下は、簡単に使用できるように用意されているヘルパー関数の一例です。drawRect()drawRoundRect()drawCircle()、および drawEllipse()

ActionScript コードから直接 Graphics オブジェクトを作成することはできません。new Graphics() を呼び出すと、例外がスローされます。

Graphics クラスは final クラスであるため、サブクラス化できません。

例を表示

関連項目

描画 API の使用の基礎


パブリック プロパティ
 プロパティ定義元
 Inheritedconstructor : Object
特定のオブジェクトインスタンスのクラスオブジェクトまたはコンストラクタ関数への参照です。
Object
 Inheritedprototype : Object
[static] クラスまたは関数オブジェクトのプロトタイプオブジェクトへの参照です。
Object
パブリック メソッド
 メソッド定義元
  
beginBitmapFill(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void
描画領域をビットマップイメージで塗りつぶします。
Graphics
  
beginFill(color:uint, alpha:Number = 1.0):void
オブジェクトの他の Graphics メソッド (lineTo() や drawCircle() など) に対する今後の呼び出しに使用する単純な単色塗りを指定します。
Graphics
  
beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void
オブジェクトの他の Graphics メソッド (lineTo() や drawCircle() など) に対する今後の呼び出しに使用するグラデーション塗りを指定します。
Graphics
  
この Graphics オブジェクトに描画されているグラフィックをクリアし、塗りと線のスタイルの設定をリセットします。
Graphics
  
curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number):void
(controlX, controlY) で指定されたコントロールポイントを使用し、現在の描画位置から (anchorX, anchorY) まで、現在の線のスタイルで曲線を描画します。
Graphics
  
円を描画します。
Graphics
  
drawEllipse(x:Number, y:Number, width:Number, height:Number):void
楕円を描画します。
Graphics
  
drawRect(x:Number, y:Number, width:Number, height:Number):void
矩形を描画します。
Graphics
  
drawRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number):void
角丸矩形を描画します。
Graphics
  
beginFill()、beginGradientFill()、または beginBitmapFill() メソッドへの最後の呼び出し以降に追加された線と曲線に塗りを適用します。
Graphics
 Inherited
オブジェクトに指定されたプロパティが定義されているかどうかを示します。
Object
 Inherited
Object クラスのインスタンスが、パラメータとして指定されたオブジェクトのプロトタイプチェーン内にあるかどうかを示します。
Object
  
lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void
オブジェクトの他の Graphics メソッド (lineTo() や drawCircle() など) に対する今後の呼び出しに使用する線スタイルのグラデーションを指定します。
Graphics
  
lineStyle(thickness:Number, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false, scaleMode:String = "normal", caps:String = null, joints:String = null, miterLimit:Number = 3):void
オブジェクトの他の Graphics メソッド (lineTo() や drawCircle() など) に対する今後の呼び出しに使用する線のスタイルを指定します。
Graphics
  
現在の描画位置から (x, y) まで、現在の線のスタイルを使用して線を描画します。その後で、現在の描画位置は (x, y) に設定されます。
Graphics
  
現在の描画位置を (x, y) に移動します。
Graphics
 Inherited
指定されたプロパティが存在し列挙できるかどうかを示します。
Object
 Inherited
ループ処理に対するダイナミックプロパティの可用性を設定します。
Object
 Inherited
指定されたオブジェクトのストリング表現を返します。
Object
 Inherited
指定されたオブジェクトのプリミティブな値を返します。
Object
メソッドの詳細
beginBitmapFill()メソッド
public function beginBitmapFill(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

描画領域をビットマップイメージで塗りつぶします。ビットマップを繰り返すか、タイリング表示して、領域を塗りつぶすことができます。beginFill()beginBitmapFill()、または beginGradientFill() メソッドを呼び出すまで、塗りは有効のままです。clear() メソッドを呼び出すと、塗りがクリアされます。

endFill() メソッドが呼び出されるまで、塗りはレンダリングされません

パラメータ

bitmap:BitmapData — 表示されるビットを含む透明または不透明ビットマップイメージです。
 
matrix:Matrix (default = null) — flash.geom.Matrix クラスのマトリックスオブジェクトです。これを使用してビットマップ上に変形を定義できます。たとえば、次のマトリックスを使用すると、ビットマップを 45 度 (π/4 ラジアン) 回転できます。
  matrix = new flash.geom.Matrix(); 
  matrix.rotate(Math.PI/4);
  
 
repeat:Boolean (default = true)true の場合、ビットマップイメージが一定のパターンでタイル状に表示されます。false の場合、ビットマップイメージは繰り返されません。ビットマップからはみ出す塗り領域にはビットマップのエッジが使用されます。

たとえば、次のビットマップ (20 x 20 ピクセルのチェッカーボードのパターン) があるとします。

次の例のように repeattrue に設定されている場合、ビットマップの塗りでビットマップが繰り返されます。

repeatfalse に設定されている場合、エッジのピクセルがビットマップの外側の塗り領域に使用されます。

 
smooth:Boolean (default = false)false の場合、拡大ビットマップイメージは最近傍アルゴリズムを使用してレンダリングされ、ピクセル化されたように見えます。true の場合、拡大ビットマップイメージは双線形アルゴリズムを使用してレンダリングされます。通常は、最近傍アルゴリズムを使用したレンダリングの方が高速です。

関連項目




次の例では、イメージ (image1.jpg) を使用し、回転させながら繰り返して矩形を塗りつぶします。
  1. イメージファイル (image1.jpg) は、Loader オブジェクトおよび URLRequest オブジェクトを使用してロードされます。ここでは、ファイルは SWF ファイルと同じディレクトリにあります。SWF ファイルは、[ローカルでの再生に関するセキュリティ] を [ローカルファイルにのみアクセスする] に設定してコンパイルする必要があります。
  2. イメージをロード (イベントが完了) すると、drawImage() メソッドが呼び出されます。イメージが適切にロードされなかった場合、ioErrorHandler() メソッドがトレースコメントを書き出します。
  3. drawImage() メソッドで、BitmapData オブジェクトがインスタンス化され、その幅と高さがイメージ (image1.jpg) に設定されます。その後、ソースイメージが BitmapData オブジェクトに描画されます。次に、矩形が mySprite Sprite オブジェクトに描画され、BitmapData オブジェクトを使用して塗りつぶされます。Matrix オブジェクトを使用して、beginBitmapFill() メソッドがイメージを 45 度回転し、イメージによる矩形の塗りつぶしを開始し、完全に塗りつぶします。
package {
    import flash.display.Sprite;
    import flash.display.BitmapData;
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    import flash.geom.Matrix;

    public class Graphics_beginBitmapFillExample extends Sprite {
 
        private var url:String = "image1.jpg";
        private var loader:Loader = new Loader();

        public function Graphics_beginBitmapFillExample() {

            var request:URLRequest = new URLRequest(url);
            
            loader.load(request);
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, drawImage);
            loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
        }

        private function drawImage(event:Event):void {

            var mySprite:Sprite = new Sprite();
            var myBitmap:BitmapData = new BitmapData(loader.width, loader.height, false);
  
            myBitmap.draw(loader, new Matrix());
            
            var matrix:Matrix = new Matrix();
            matrix.rotate(Math.PI/4);
            
            mySprite.graphics.beginBitmapFill(myBitmap, matrix, true);
            mySprite.graphics.drawRect(100, 50, 200, 90);
            mySprite.graphics.endFill();
            
            addChild(mySprite);
        }
 
         private function ioErrorHandler(event:IOErrorEvent):void {
            trace("Unable to load image: " + url);
        }
    }   
}
beginFill()メソッド 
public function beginFill(color:uint, alpha:Number = 1.0):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

オブジェクトの他の Graphics メソッド (lineTo()drawCircle() など) に対する今後の呼び出しに使用する単純な単色塗りを指定します。beginFill()beginBitmapFill()、または beginGradientFill() メソッドを呼び出すまで、塗りは有効のままです。clear() メソッドを呼び出すと、塗りがクリアされます。

endFill() メソッドが呼び出されるまで、塗りはレンダリングされません

パラメータ

color:uint — 塗りのカラーです (0xRRGGBB)。
 
alpha:Number (default = 1.0) — 塗りのアルファ値です (0.0 ~ 1.0)。

関連項目



例の使用法
このメソッドの使用方法の詳細については、このクラスの末尾のを参照してください。
beginGradientFill()メソッド 
public function beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

オブジェクトの他の Graphics メソッド (lineTo()drawCircle() など) に対する今後の呼び出しに使用するグラデーション塗りを指定します。beginFill()beginBitmapFill()、または beginGradientFill() メソッドを呼び出すまで、塗りは有効のままです。clear() メソッドを呼び出すと、塗りがクリアされます。

endFill() メソッドが呼び出されるまで、塗りはレンダリングされません

パラメータ

type:String — 使用するグラデーションのタイプを指定する GradientType クラスの値は、次のとおりです。GradientType.LINEAR または GradientType.RADIAL
 
colors:Array — グラデーションで使用する RGB 16 進カラー値の配列 (赤 0xFF0000、青 0x0000FF など)。最大 15 色まで指定できます。各色について、alphas パラメータと ratios パラメータで対応する値を必ず指定してください。
 
alphas:Array — colors 配列内の各色に対応するアルファ値の配列。有効な値は 0 ~ 1 です。0 未満の値を指定した場合は、デフォルトで 0 が適用されます。1 より大きい値を指定した場合は、デフォルトで 1 が適用されます。
 
ratios:Array — 色分布比率の配列です。0 ~ 255 の範囲の値を指定できます。この値は、100% でサンプリングされる色の幅の割合をパーセントで定義します。値 0 はグラデーションボックスの左の位置を表し、255 はグラデーションボックスの右の位置を表します。

メモ : この値は、グラデーションボックス内の位置を表すもので、最終グラデーションの座標空間を表すものではありません。最終グラデーションは、グラデーションボックスより広くなったり狭くなったりする場合があります。colors パラメータの値ごとに、値を指定してください。

たとえば、青と緑の 2 色を含む線状グラデーションの場合、次の例は、ratios 配列のさまざまな値に基づいて配置される色を示します。

ratiosグラデーション
[0, 127]
[0, 255]
[127, 255]

配列内の値は、[0, 63, 127, 190, 255] のように順に増やしていく必要があります。

 
matrix:Matrix (default = null) — flash.geom.Matrix クラスで定義される変換マトリックスです。flash.geom.Matrix クラスには、createGradientBox() メソッドがあります。このメソッドを使用すると、beginGradientFill() メソッドで使用できるマトリックスを容易に設定できます。
 
spreadMethod:String (default = "pad") — 使用する spread メソッドを指定する SpreadMethod クラスの値は、次のいずれかです。SpreadMethod.PADSpreadMethod.REFLECT、または SpreadMethod.REPEAT

たとえば、2 つの色の間にシンプルな線状グラデーションがあるとします。

  import flash.geom.*
  import flash.display.*
  var fillType:String = GradientType.LINEAR;
  var colors:Array = [0xFF0000, 0x0000FF];
  var alphas:Array = [1, 1];
  var ratios:Array = [0x00, 0xFF];
  var matr:Matrix = new Matrix();
  matr.createGradientBox(20, 20, 0, 0, 0);
  var spreadMethod:String = SpreadMethod.PAD;
  this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);  
  this.graphics.drawRect(0,0,100,100);
  

この例では spread メソッドに SpreadMethod.PAD を使用しているため、グラデーションの塗りは次のようになります。

spread メソッドに SpreadMethod.REFLECT を使用する場合、グラデーションの塗りは次のようになります。

spread メソッドに SpreadMethod.REPEAT を使用する場合、グラデーションの塗りは次のようになります。

 
interpolationMethod:String (default = "rgb") — 使用する値を指定する InterpolationMethod クラスの値は、次のとおりです。InterpolationMethod.linearRGB または InterpolationMethod.RGB

たとえば、2 つの色の間に、spreadMethod パラメータが SpreadMethod.REFLECT に設定されたシンプルな線状グラデーションがあるとします。それぞれの補間方法で、外観に次のような影響があります。

InterpolationMethod.LINEAR_RGBInterpolationMethod.RGB
 
focalPointRatio:Number (default = 0) — グラデーションの焦点の位置を制御する数値です。0 は焦点が中央にあること、1 は焦点がグラデーション円のいずれかの境界にあること、-1 は焦点がグラデーション円のもう一方の境界にあることを示します。-1 未満または 1 より大きい値は、-1 または 1 に丸められます。たとえば、次の例では focalPointRatio が 0.75 に設定されていることを示しています。


例外
ArgumentError type パラメータが有効でない場合

関連項目

clear()メソッド 
public function clear():void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

この Graphics オブジェクトに描画されているグラフィックをクリアし、塗りと線のスタイルの設定をリセットします。

curveTo()メソッド 
public function curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

(controlX, controlY) で指定されたコントロールポイントを使用し、現在の描画位置から (anchorX, anchorY) まで、現在の線のスタイルで曲線を描画します。その後、現在の描画位置は (anchorX, anchorY) に設定されます。描画先のムービークリップに Flash の描画ツールで作成したコンテンツが含まれている場合は、curveTo() メソッドへの呼び出しの結果はこのコンテンツの下に描画されます。curveTo() メソッドを呼び出してから moveTo() メソッドを呼び出すと、現在の描画位置はデフォルトで (0,0) になります。いずれかのパラメータを省略すると、このメソッドは失敗し、現在の描画位置は変更されません。

描画される曲線は、二次ベジェ曲線です。二次ベジェ曲線は、2 つのアンカーポイントと 1 つのコントロールポイントで構成されています。曲線は、2 つのアンカーポイントを補間し、コントロールポイントに向かいます。

パラメータ

controlX:Number — 親表示オブジェクトの基準点からの相対的なコントロールポイントの水平座標を指定する数値です。
 
controlY:Number — 親表示オブジェクトの基準点からの相対的なコントロールポイントの垂直座標を指定する数値です。
 
anchorX:Number — 親表示オブジェクトの基準点からの相対的な次のアンカーポイントの水平座標を指定する数値です。
 
anchorY:Number — 親表示オブジェクトの基準点からの相対的な次のアンカーポイントの垂直座標を指定する数値です。




次の例では、幅と高さが 100 ピクセル、Sprite 表示オブジェクトの基準点 (0, 0) から右に 250 ピクセルの緑の丸いオブジェクトを描画します。

4 本の曲線を描いて円を作成し、緑で塗りつぶします。

二次ベジェ方程式の性質上、これは完全な円ではありません。円を描画する最善の方法は、Graphics クラスの drawCircle() メソッドを使用することです。

package {
    import flash.display.Sprite;
    import flash.display.Shape;
    
    public class Graphics_curveToExample1 extends Sprite
    {
        public function Graphics_curveToExample1():void
        {
            var roundObject:Shape = new Shape();

            roundObject.graphics.beginFill(0x00FF00);
            roundObject.graphics.moveTo(250, 0);
            roundObject.graphics.curveTo(300, 0, 300, 50);
            roundObject.graphics.curveTo(300, 100, 250, 100);
            roundObject.graphics.curveTo(200, 100, 200, 50);
            roundObject.graphics.curveTo(200, 0, 250, 0);
            roundObject.graphics.endFill();
            
            this.addChild(roundObject);
        }
    }
}

次の例では、curveTo() メソッドを使用して新月を描画します。

1 ピクセルの 2 本の曲線を描画し、その曲線の間のスペースを白で塗りつぶします。moveTo() メソッドを使用して、現在の描画位置を座標 (100, 100) に配置します。最初の曲線の描画位置がターゲットポイント (100, 200) に移動します。2 番目の曲線の描画位置がターゲットポイントである開始位置 (100, 100) に戻ります。水平方向のコントロールポイントで、異なる曲線サイズが指定されています。

package {
    import flash.display.Sprite;
    import flash.display.Shape;

    public class Graphics_curveToExample2 extends Sprite
    {
        public function Graphics_curveToExample2() {
            var newMoon:Shape = new Shape();
            
            newMoon.graphics.lineStyle(1, 0);
            newMoon.graphics.beginFill(0xFFFFFF);
            newMoon.graphics.moveTo(100, 100); 
            newMoon.graphics.curveTo(30, 150, 100, 200);    
            newMoon.graphics.curveTo(50, 150, 100, 100);
            graphics.endFill();
            
            this.addChild(newMoon);
        }
    }
}
drawCircle()メソッド 
public function drawCircle(x:Number, y:Number, radius:Number):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

円を描画します。drawCircle() メソッドを呼び出す前に、linestyle()lineGradientStyle()beginFill()beginGradientFill()、または beginBitmapFill() メソッドを呼び出して、線のスタイルまたは塗り、あるいはその両方を設定する必要があります。

パラメータ

x:Number — 親表示オブジェクトの基準点からの円の中心の相対 x 座標 (ピクセル単位)。
 
y:Number — 親表示オブジェクトの基準点からの円の中心の相対 y 座標 (ピクセル単位)。
 
radius:Number — 円の半径です (ピクセル単位)。

関連項目



例の使用法
このメソッドの使用方法の詳細については、このクラスの末尾のを参照してください。
drawEllipse()メソッド 
public function drawEllipse(x:Number, y:Number, width:Number, height:Number):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

楕円を描画します。drawEllipse() メソッドを呼び出す前に、linestyle()lineGradientStyle()beginFill()beginGradientFill()、または beginBitmapFill() メソッドを呼び出して、線のスタイルまたは塗り、あるいはその両方を設定する必要があります。

パラメータ

x:Number — 親表示オブジェクトの基準点からの楕円の中心の相対×座標 (ピクセル単位) です。
 
y:Number — 親表示オブジェクトの基準点からの楕円の中心の相対 y 座標 (ピクセル単位) です。
 
width:Number — 楕円の幅です (ピクセル単位)。
 
height:Number — 楕円の高さです (ピクセル単位)。

関連項目




次の例では、drawEgg() 関数を使用し、eggSize パラメータに応じて 3 つの異なるサイズの卵 (3 種類のサイズの楕円) を描画します。
  1. コンストラクタが drawEgg() 関数を呼び出し、卵を描画する領域に対する水平方向および垂直方向のパラメータと卵の種類 (eggSize) を渡します。卵 (楕円) の高さと幅は、描画する領域を決定するために使用できます。
  2. drawEgg() 関数が、それぞれのサイズの楕円を描画し、beginFill() メソッドを使用して白く塗りつぶします。この関数に対して事前に記述されたエラー処理はありません。
package {
    import flash.display.Sprite;
    import flash.display.Shape;

    public class Graphics_drawEllipseExample extends Sprite
    {
        public static const SMALL:uint = 0;
        public static const MEDIUM:uint = 1;
        public static const LARGE:uint = 2;

        public function Graphics_drawEllipseExample()
        {
            drawEgg(SMALL, 0, 100);
            drawEgg(MEDIUM, 100, 60);
            drawEgg(LARGE, 250, 35);    
        }

        public function drawEgg(eggSize:uint, x:Number, y:Number):void  {
            
            var myEgg:Shape = new Shape();
            
            myEgg.graphics.beginFill(0xFFFFFF);
            myEgg.graphics.lineStyle(1);

            switch(eggSize) {
                case SMALL:
                    myEgg.graphics.drawEllipse(x, y, 60, 70);
                    break;
                case MEDIUM:
                    myEgg.graphics.drawEllipse(x, y, 120, 150);    
                    break;
                case LARGE:
                    myEgg.graphics.drawEllipse(x, y, 150, 200);
                    break;
                default:
                    trace ("Wrong size! There is no egg.");
                break;            
            }
            
            myEgg.graphics.endFill();
    
            this.addChild(myEgg);
        }
    }
}
drawRect()メソッド 
public function drawRect(x:Number, y:Number, width:Number, height:Number):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

矩形を描画します。drawRect() メソッドを呼び出す前に、linestyle()lineGradientStyle()beginFill()beginGradientFill()、または beginBitmapFill() メソッドを呼び出して、線のスタイルまたは塗り、あるいはその両方を設定する必要があります。

パラメータ

x:Number — 親表示オブジェクトの基準点からの相対的な水平座標を示す数値です (ピクセル単位)。
 
y:Number — 親表示オブジェクトの基準点からの相対的な垂直座標を示す数値です (ピクセル単位)。
 
width:Number — 矩形の幅です (ピクセル単位)。
 
height:Number — 矩形の高さです (ピクセル単位)。


例外
ArgumentError width または height パラメータが数値 (Number.NaN) でない場合

関連項目



例の使用法
このメソッドの使用方法の詳細については、このクラスの末尾のを参照してください。
drawRoundRect()メソッド 
public function drawRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

角丸矩形を描画します。drawRoundRect() メソッドを呼び出す前に、linestyle()lineGradientStyle()beginFill()beginGradientFill()、または beginBitmapFill() メソッドを呼び出して、線のスタイルまたは塗り、あるいはその両方を設定する必要があります。

パラメータ

x:Number — 親表示オブジェクトの基準点からの相対的な水平座標を示す数値です (ピクセル単位)。
 
y:Number — 親表示オブジェクトの基準点からの相対的な垂直座標を示す数値です (ピクセル単位)。
 
width:Number — 角丸矩形の幅です (ピクセル単位)。
 
height:Number — 角丸矩形の高さです (ピクセル単位)。
 
ellipseWidth:Number — 丸角の描画に使用される楕円の幅です (ピクセル単位)。
 
ellipseHeight:Number — 丸角の描画に使用される楕円の高さです (ピクセル単位)。(オプション) 値を指定しない場合は、ellipseWidth パラメータに指定された値がデフォルトで適用されます。


例外
ArgumentError widthheightellipseWidth、または ellipseHeight パラメータが数値 (Number.NaN) でない場合

関連項目



例の使用法
このメソッドの使用方法の詳細については、このクラスの末尾のを参照してください。
endFill()メソッド 
public function endFill():void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

beginFill()beginGradientFill()、または beginBitmapFill() メソッドへの最後の呼び出し以降に追加された線と曲線に塗りを適用します。適用される塗りは、beginFill()beginGradientFill()、または beginBitmapFill() メソッドの前回の呼び出しで指定されたものです。現在の描画位置が moveTo() メソッドの直前の呼び出しで指定された座標と等しくない場合、塗りが定義されていれば、パスが線で閉じられた後、塗りが適用されます。

関連項目

lineGradientStyle()メソッド 
public function lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

オブジェクトの他の Graphics メソッド (lineTo()drawCircle() など) に対する今後の呼び出しに使用する線スタイルのグラデーションを指定します。線のスタイルは、lineStyle() メソッドまたは lineGradientStyle() メソッドを異なるパラメータで呼び出すまで有効のままです。パスの描画中に lineGradientStyle() メソッドを呼び出し、パス内の線のセグメントごとに異なるスタイルを指定できます。

lineStyle() を呼び出して線を有効にしてから、lineGradientStyle() を呼び出します。そうしないと、線のスタイルが undefined のままになります。

clear() を呼び出すと、線のスタイルが undefined に戻ります。

パラメータ

type:String — 使用するグラデーションのタイプを指定する GradientType クラスの値は、GradientType.LINEAR または GradientType.RADIAL のいずれかです。
 
colors:Array — グラデーションで使用する RGB 16 進カラー値の配列 (赤 0xFF0000、青 0x0000FF など)。
 
alphas:Arraycolors 配列内の各色に対応するアルファ値の配列。有効な値は 0 ~ 100 です。0 未満の値を指定した場合は、Flash Player で 0 が使用されます。100 より大きい値を指定した場合は、Flash Player で 100 が使用されます。
 
ratios:Array — 色分布比率の配列です。0 ~ 255 の範囲の値を指定できます。この値は、100% でサンプリングされる色の幅の割合をパーセントで定義します。値 0 はグラデーションボックスの左の位置を表し、255 はグラデーションボックスの右の位置を表します。この値は、グラデーションボックス内の位置を表すもので、最終グラデーションの座標空間を表すものではありません。最終グラデーションは、グラデーションボックスより広くなったり狭くなったりする場合があります。colors パラメータの値ごとに、値を指定してください。

たとえば、青と緑の 2 色を含む線状グラデーションの場合、次の図は、ratios 配列のさまざまな値に基づいて配置される色を示します。

ratiosグラデーション
[0, 127]
[0, 255]
[127, 255]

配列内の値は、[0, 63, 127, 190, 255] のように順に増やしていく必要があります。

 
matrix:Matrix (default = null) — flash.geom.Matrix クラスで定義される変換マトリックスです。flash.geom.Matrix クラスには、createGradientBox() メソッドがあります。このメソッドを使用すると、lineGradientStyle() メソッドで使用できるマトリックスを容易に設定できます。
 
spreadMethod:String (default = "pad") — 使用する spread メソッドを指定する SpreadMethod クラスの値は、次のとおりです。

SpreadMethod.PADSpreadMethod.REFLECTSpreadMethod.REPEAT

 
interpolationMethod:String (default = "rgb") — 使用する値を指定する InterpolationMethod クラスの値です。たとえば、2 つの色の間に、spreadMethod パラメータが SpreadMethod.REFLECT に設定されたシンプルな線状グラデーションがあるとします。それぞれの補間方法で、外観に次のような影響があります。

InterpolationMethod.LINEAR_RGBInterpolationMethod.RGB

 
focalPointRatio:Number (default = 0) — グラデーションの焦点の位置を制御する数値です。0 は焦点が中央にあること、1 は焦点がグラデーション円のいずれかの境界にあること、-1 は焦点がグラデーション円のもう一方の境界にあることを示します。-1 未満または 1 より大きい値は、-1 または 1 に丸められます。次のイメージは、focalPointRatio が -0.75 であるグラデーションを示しています。

関連項目




次の例では、赤から緑、青へのグラデーションの境界線を使用する矩形と円を描画します。

Matrix クラスの createGradientBox() メソッドを使用して、グラデーションボックスが幅 200、高さ 40 に定義されます。線の太さは 5 ピクセルに設定されます。境界線の太さを、lineGradientStyle() メソッドに対して定義する必要があります。グラデーションは線状に設定されます。グラデーションの色は赤、緑、および青に設定されます。色の透明度 (アルファ値) は 1 (不透明) に設定されます。グラデーションの分布は均等です。つまり、値 0 (グラデーションボックスの左の位置)、128 (ボックスの中央の位置)、255 (ボックスの右の位置) の各位置で 100% で色がサンプリングされます。矩形の幅はグラデーションのすべての領域を包含します。一方、円は領域の中央から 50% を包含します。

package {
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.geom.Matrix; 
    import flash.display.GradientType;
    
    public class Graphics_lineGradientStyleExample extends Sprite
    {
        public function Graphics_lineGradientStyleExample()
        {
            var myShape:Shape = new Shape();
            var gradientBoxMatrix:Matrix = new Matrix();
  
            gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0);  
            
            myShape.graphics.lineStyle(5);
  
            myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000,
            0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix);
            
            myShape.graphics.drawRect(0, 0, 200, 40);
            myShape.graphics.drawCircle(100, 120, 50);  
             
            this.addChild(myShape);
    
        }
    }
}
lineStyle()メソッド 
public function lineStyle(thickness:Number, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false, scaleMode:String = "normal", caps:String = null, joints:String = null, miterLimit:Number = 3):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

オブジェクトの他の Graphics メソッド (lineTo()drawCircle() など) に対する今後の呼び出しに使用する線のスタイルを指定します。線のスタイルは、lineGradientStyle() メソッドまたは lineStyle() メソッドを異なるパラメータで呼び出すまで有効のままです。パスの描画中に lineStyle() メソッドを呼び出し、パス内の線のセグメントごとに異なるスタイルを指定できます。

メモ : clear() メソッドを呼び出すと、線のスタイルが undefined に戻ります。

パラメータ

thickness:Number — 線の太さをポイント単位で示す整数。有効な値は 0 ~ 255 です。パラメータが undefined である場合は、線は描画されません。0 未満の値が渡された場合は、デフォルトで 0 が適用されます。0 は極細線です。最大の太さは 255 です。255 を超える値を指定した場合は、デフォルトで 255 が適用されます。
 
color:uint (default = 0) — 線の色を表す 16 進値。たとえば、赤は 0xFF0000、青は 0x0000FF で表します。値を指定しない場合は、デフォルトで 0x000000 (黒) が適用されます。オプションです。
 
alpha:Number (default = 1.0) — 線の色のアルファ値を示す数値。有効な値は 0 ~ 1 です。値を指定しない場合は、デフォルトで 1 (ソリッド) が適用されます。0 未満の値を指定した場合は、デフォルトで 0 が適用されます。1 より大きい値を指定した場合は、デフォルトで 1 が適用されます。
 
pixelHinting:Boolean (default = false) — ピクセル全体に対して線をヒンティングするかどうかを指定するブール値。この値は、曲線のアンカーの位置と線のサイズ自身の両方に影響を与えます。pixelHintingtrue に設定すると、全ピクセル幅に線幅がヒンティングされます。pixelHintingfalse に設定すると、曲線と直線で非連続が発生することがあります。たとえば、次の図は、pixelHinting パラメータ (lineStyle() メソッドで使用) の設定が異なるだけで他はまったく同じ 2 つの角丸矩形がどのようにレンダリングされるかを示したものです (違いが分かるようにイメージは 200% に拡大されています)。

値を指定しない場合、線でピクセルのヒンティングが使用されません。

 
scaleMode:String (default = "normal") — 使用する拡大 / 縮小モードを指定する LineScaleMode クラスの値です。
  • LineScaleMode.NORMAL — オブジェクトが拡大 / 縮小される場合、常に線の太さが拡大 / 縮小されます (デフォルト)。
  • LineScaleMode.NONE — 線の太さを拡大 / 縮小しません。
  • LineScaleMode.VERTICAL — オブジェクトを垂直方向にのみ拡大 / 縮小する場合は、線の太さを拡大 / 縮小しません。たとえば、次に示す各円は、1 ピクセルの線で描画され、それぞれ scaleMode パラメータが LineScaleMode.VERTICAL に設定されているとします。左側の円は垂直方向にのみ拡大または縮小され、右側の円は垂直と水平の両方向に拡大または縮小されたものです。

  • LineScaleMode.HORIZONTAL — オブジェクトを水平方向にのみ拡大 / 縮小する場合は、線の太さを拡大 / 縮小しません。たとえば、次に示す各円は、1 ピクセルの線で描画され、それぞれ scaleMode パラメータが LineScaleMode.HORIZONTAL に設定されているとします。左側の円は水平方向にのみ拡大または縮小され、右側の円は垂直と水平の両方向に拡大または縮小されたものです。

 
caps:String (default = null) — 線の終端のキャップの種類を指定する CapsStyle クラスの値です。有効な値は次のとおりです。CapsStyle.NONECapsStyle.ROUND、および CapsStyle.SQUARE。この値を指定しない場合は、丸いキャップが使用されます。

たとえば、次の図は capsStyle のさまざまな設定を示します。それぞれの設定で、図の青い線は太さ 30 で、capsStyle が適用されています。重ね合わせた黒い線は太さ 1 で、capsStyle は適用されていません。

 
joints:String (default = null) — 角で使用する接合点の外観の種類を指定する JointStyle クラスの値です。有効な値は次のとおりです。JointStyle.BEVELJointStyle.MITER、および JointStyle.ROUND。この値を指定しない場合は、角丸 ("round") の接合点が使用されます。

たとえば、次の図は joints のさまざまな設定を示します。それぞれの設定で、角のある青い線は太さ 30 で、jointStyle が適用されています。重ね合わせた黒い線は太さ 1 で、jointStyle は適用されていません。

メモ : jointsJointStyle.MITER に設定すると、miterLimit パラメータを使用して、マイターの長さを制限できます。

 
miterLimit:Number (default = 3) — マイターが切り取られる限度を示す数値です。有効な値の範囲は 1 ~ 255 で、この範囲を超えた値は 1 または 255 に丸められます。この値は、jointStyle"miter" に設定した場合にのみ有効です。miterLimit の値により、線の接合点を越えてマイターを延長できる長さが決定します。マイターを延長できる長さは、この値と線の thickness が乗算されたものです。たとえば、miterLimit の値が 2.5 で、thickness が 10 ピクセルの場合、マイターは 25 ピクセルで切り取られます。

たとえば、次のような角のある線が、それぞれ thickness が 20、ただし miterLimit が 1、2、および 4 に設定され、描画されているとします。重ね合わされた黒の基準線は、接合点を示しています。

miterLimit のそれぞれの値には、マイターが切り取られる独自の最大角度があります。次の表に、いくつかの例を示します。

miterLimit の値 :角度が以下より小さい場合は切り取られる
1.41490 度
260 度
430 度
815 度

関連項目



例の使用法
lineTo() または moveTo() メソッドの例を参照して、getStyle() メソッドの使用方法を確認してください。
lineTo()メソッド 
public function lineTo(x:Number, y:Number):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

現在の描画位置から (x, y) まで、現在の線のスタイルを使用して線を描画します。その後で、現在の描画位置は (x , y) に設定されます。描画先の表示オブジェクトに Flash の描画ツールで作成したコンテンツが含まれている場合、lineTo() メソッドへの呼び出しの結果はこのコンテンツの下に描画されます。lineTo() を呼び出してから moveTo() メソッドを呼び出すと、現在の描画位置はデフォルトで (0,0) になります。いずれかのパラメータを省略すると、このメソッドは失敗し、現在の描画位置は変更されません。

パラメータ

x:Number — 親表示オブジェクトの基準点からの相対的な水平座標を示す数値です (ピクセル単位)。
 
y:Number — 親表示オブジェクトの基準点からの相対的な垂直座標を示す数値です (ピクセル単位)。




次の例では、lineTo() メソッドを使用して、ピクセル (100, 100) で始まる台形を描画します。

線の太さが 10 ピクセル、色が金色で不透明、線の先端のキャップがなし (すべての線が結合されるため) に設定され、線の継ぎ目はマイター限度が 10、尖った鋭角の MITER に設定されます。

package {
    import flash.display.Sprite;
    import flash.display.LineScaleMode;
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.Shape;


    public class Graphics_lineToExample extends Sprite {

        public function Graphics_lineToExample() {

            var trapezoid:Shape = new Shape();    

            trapezoid.graphics.lineStyle(10, 0xFFD700, 1, false, LineScaleMode.VERTICAL,
                               CapsStyle.NONE, JointStyle.MITER, 10);

            trapezoid.graphics.moveTo(100, 100);
 
            trapezoid.graphics.lineTo(120, 50);
            trapezoid.graphics.lineTo(200, 50);
            trapezoid.graphics.lineTo(220, 100);
            trapezoid.graphics.lineTo(100, 100); 

            this.addChild(trapezoid);
        }
    }
}
moveTo()メソッド 
public function moveTo(x:Number, y:Number):void

言語バージョン : ActionScript 3.0
Player のバージョン : Flash Player 9

現在の描画位置を (x, y) に移動します。いずれかのパラメータを省略すると、このメソッドは失敗し、現在の描画位置は変更されません。

パラメータ

x:Number — 親表示オブジェクトの基準点からの相対的な水平座標を示す数値です (ピクセル単位)。
 
y:Number — 親表示オブジェクトの基準点からの相対的な垂直座標を示す数値です (ピクセル単位)。




次の例では、moveTo() メソッドおよび lineTo() メソッドを使用して、3 ピクセルの太さの破線を描画します。

lineStyle() メソッドを使用して、線の太さが 3 ピクセルに設定されます。また、拡大 / 縮小しないよう設定されます。透明度が 25% の赤に色が設定されます。CapsStyle プロパティは四角形に設定されます (デフォルトは円形)。

Graphics_moveToExampleSprite クラスのインスタンスであるため、すべての Graphics クラスのメソッドへのアクセス権があります。Graphics クラスのメソッドを使用して、Graphic_moveToExample Sprite オブジェクト上に直接描画できます。ただし、Shape にベクター描画オブジェクトを配置しないと、管理、移動、または変更できる方法が制限されます。

package {
    import flash.display.Sprite;
    import flash.display.CapsStyle;
    import flash.display.LineScaleMode;

    public class Graphics_moveToExample extends Sprite
    {
        public function Graphics_moveToExample() {
            
            graphics.lineStyle(3, 0x990000, 0.25, false, 
                            LineScaleMode.NONE, CapsStyle.SQUARE);

            graphics.moveTo(10, 20);
            graphics.lineTo(20, 20);
            graphics.moveTo(30, 20);
            graphics.lineTo(50, 20);
            graphics.moveTo(60, 20);
            graphics.lineTo(80, 20);
            graphics.moveTo(90, 20);
            graphics.lineTo(110, 20);            
            graphics.moveTo(120, 20);
            graphics.lineTo(130, 20);           
        }
    }
}
例の使用法
GraphicsExample.as

次の例では、GraphicsExample クラスを使用して、円、角丸矩形、および四角形を描画します。これを行うには、以下の手順を実行します。
  1. 後で各シェイプのサイズを決定する際に使用する size プロパティを宣言します。
  2. 背景色をオレンジ色、境界線色を濃い灰色、境界線のサイズを 0 ピクセル、角丸の半径を 9 ピクセル、ステージの端と他のオブジェクトの間のスペースを 5 ピクセルに、それぞれ設定するプロパティを宣言します。
  3. 上記の手順で宣言したプロパティを Graphics クラスのビルトインメソッドと共に使用して、円、角丸矩形、および四角形を、座標 x = 0、y = 0 に描画します。
  4. ステージの一番上に配置された各シェイプを、x = 5、y = 5 から、シェイプ間のスペースを 5 ピクセルにして再描画します。

package {
    import flash.display.DisplayObject;
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.Sprite;

    public class GraphicsExample extends Sprite {
        private var size:uint         = 80;
        private var bgColor:uint      = 0xFFCC00;
        private var borderColor:uint  = 0x666666;
        private var borderSize:uint   = 0;
        private var cornerRadius:uint = 9;
        private var gutter:uint       = 5;

        public function GraphicsExample() {
            doDrawCircle();
            doDrawRoundRect();
            doDrawRect();
            refreshLayout();
        }

        private function refreshLayout():void {
            var ln:uint = numChildren;
            var child:DisplayObject;
            var lastChild:DisplayObject = getChildAt(0);
            lastChild.x = gutter;
            lastChild.y = gutter;
            for (var i:uint = 1; i < ln; i++) {
                child = getChildAt(i);
                child.x = gutter + lastChild.x + lastChild.width;
                child.y = gutter;
                lastChild = child;
            }
        }

        private function doDrawCircle():void {
            var child:Shape = new Shape();
            var halfSize:uint = Math.round(size / 2);
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawCircle(halfSize, halfSize, halfSize);
            child.graphics.endFill();
            addChild(child);
        }

        private function doDrawRoundRect():void {
            var child:Shape = new Shape();
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawRoundRect(0, 0, size, size, cornerRadius);
            child.graphics.endFill();
            addChild(child);
        }

        private function doDrawRect():void {
            var child:Shape = new Shape();
            child.graphics.beginFill(bgColor);
            child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawRect(0, 0, size, size);
            child.graphics.endFill();
            addChild(child);
        }
    }
}




 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/display/Graphics.html