(section09-02 図形の塗りと線の塗りから抜粋)
線をグラデーションで塗りたい場合は、先にlineStyle()で線の太さや両端の形などを指定し、続いてlineGradientStyle()を実行してグラデーションを指定します。線の設定を行ったならば線や図形を描きます。
次の例は黄色と黒の斜めのグラデーションで線を縞々に塗っています。縞々の繰り返しのグラデーションにするには、spreadオプションをSpreadMethod.REFLECTかSpreadMethod.REPEATのどちらかにします。SpreadMethod.REPEATは単純な繰り返しですが、SpreadMethod.REFLECTは色の変化が反転するように繰り返されます(14行目)。縞の幅はcreateGradientBox()の第1引数で10に設定しています(12行目)。
[:script:]]四角形の線を斜めの縞々で塗る
線をグラデーションで塗りたい場合は、先にlineStyle()で線の太さや両端の形などを指定し、続いてlineGradientStyle()を実行してグラデーションを指定します。線の設定を行ったならば線や図形を描きます。
次の例は黄色と黒の斜めのグラデーションで線を縞々に塗っています。縞々の繰り返しのグラデーションにするには、spreadオプションをSpreadMethod.REFLECTかSpreadMethod.REPEATのどちらかにします。SpreadMethod.REPEATは単純な繰り返しですが、SpreadMethod.REFLECTは色の変化が反転するように繰り返されます(14行目)。縞の幅はcreateGradientBox()の第1引数で10に設定しています(12行目)。
[:script:]]四角形の線を斜めの縞々で塗る
var shape1:Shape=new Shape(); var w:int=250; var h:int=200; //線幅 shape1.graphics.lineStyle(15); //線のグラデーション var type:String=GradientType.LINEAR; var colors:Array=[0xFFFF00,0x000000]; var alphas:Array=[1, 1]; var ratios:Array=[0,255]; var mtrx:Matrix=new Matrix(); mtrx.createGradientBox(10,h,0,0,0) mtrx.rotate(Math.PI/4); var spread:String=SpreadMethod.REFLECT; shape1.graphics.lineGradientStyle(type,colors,alphas,ratios,mtrx,spread); //四角形を描く shape1.graphics.beginFill(0xFFFF99); shape1.graphics.drawRect(0,0,w,h); shape1.graphics.endFill(); //ステージの中央に置く shape1.x=stage.stageWidth/2-w/2; shape1.y=stage.stageHeight/2-h/2; addChild(shape1);
斜めの線をグラデーションで塗る場合には、線の傾きにグラデーションの回転を合わせる必要があります。次の例では線の傾きをMath.atan2()で計算し、グラデーションを回転させています(12〜18行目)。また、pt1からpt2に線を引く場合、グラデーションの基準点も線の開始位置に移動しなければなりません。グラデーションの基準点を移動させるには、変形マトリックスにtranslate()を実行して平行移動させます(20行目)。
[:script:]斜めの線にグラデーションの回転を合わせる
[:script:]斜めの線にグラデーションの回転を合わせる
var shape1:Shape=new Shape(); //線を結ぶ2点 var pt1:Point=new Point(100,50); var pt2:Point=new Point(400,250); //線幅 shape1.graphics.lineStyle(5); //線のグラデーション var type:String=GradientType.LINEAR; var colors:Array=[0xFF0000,0x00FF00, 0x0000FF]; var alphas:Array=[1, 1, 1]; var ratios:Array=[0, 128, 255]; var mtrx:Matrix=new Matrix(); var w:Number=pt2.x-pt1.x; var h:Number=pt2.y-pt1.y; mtrx.createGradientBox(w,h,0,0,0) //線とグラデーションの傾きを合わせる var rad:Number=Math.atan2(h,w); mtrx.rotate(rad); //線と基準点を合わせる mtrx.translate(pt1.x,pt1.y); var spread:String=SpreadMethod.PAD; shape1.graphics.lineGradientStyle(type,colors,alphas,ratios,mtrx,spread); //線を引く shape1.graphics.moveTo(pt1.x,pt1.y); shape1.graphics.lineTo(pt2.x,pt2.y); //ステージに置く shape1.x=0; shape1.y=0; addChild(shape1);