Flash AS3线性渐变旋转问题

Question

这是我在这里发表的第一篇文章，所以我希望我一切顺利 - 并找到我的问题的答案。

在 Flash AS3 中，我在矩形中创建动态渐变。我需要渐变旋转 26 度。我的问题是旋转似乎根据矩形的宽度/高度而变化。无论我将其应用到什么尺寸的矩形，我都需要旋转为真正的 26 度。

这是我正在使用的代码：

var rect:Shape=new Shape();
this.addChild(rect);
rect.x=40;
rect.y=70;
var rectWidth:Number=200;
var rectHeight:Number=100;

drawShapes();

function drawShapes():void {
var mat:Matrix;
var colors:Array;
var alphas:Array;
var ratios:Array;
//We proceed to draw 'rect'.
mat=new Matrix();
colors=[0xFF0000, 0x00FF00, 0x001eff];
alphas=[1,1,1];
ratios=[0,120,255];

mat.createGradientBox(rectWidth,rectHeight,toRad(26));
rect.graphics.lineStyle();
rect.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,mat);
rect.graphics.drawRect(0,0,rectWidth,rectHeight);
rect.graphics.endFill();
}

function toRad(a:Number):Number {
return a*Math.PI/180;
}

Answer 1

您的问题在于这一行：

mat.createGradientBox(rectWidth,rectHeight,toRad(26));

如果渐变框的尺寸发生变化，您的渐变也会发生变化。如果您希望渐变始终具有相同的角度，请保持相同的渐变框尺寸，无论矩形尺寸如何。为了使渐变角度为 26 度（或其他），我还会尝试创建一个方形渐变框，否则渐变线的角度和旋转角度将不相等。

试试这个代码，看看这是否是您正在寻找的：

import flash.display.Shape;

var rect:Shape;
var gradSize:uint = 100;

for(var i:uint=0;i<3;i++)
{
    rect = new Shape();
    this.addChild(rect);
    rect.x=20;
    rect.y=i*100+10;
    var rectWidth:Number=100+i*50;
    var rectHeight:Number=50;

    drawShapes(rect);
}

function drawShapes(rect:Shape):void
{
    var mat:Matrix;
    var colors:Array;
    var alphas:Array;
    var ratios:Array;
    //We proceed to draw 'rect'.
    mat=new Matrix();
    colors=[0xFF0000, 0x00FF00, 0x001eff];
    alphas=[1,1,1];
    ratios=[0,120,255];

    mat.createGradientBox(gradSize,gradSize,toRad(26));
    rect.graphics.lineStyle();
    rect.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,mat);
    rect.graphics.drawRect(0,0,rectWidth,rectHeight);
    rect.graphics.endFill();

}

function toRad(a:Number):Number
{
    return a*Math.PI/180;
}

您可以调整渐变框的宽度和高度，直到获得您想要的效果。希望这有帮助！