Flash：渐变填充在其父级边界之外绘制时消失？答案

【问题标题】：Flash: gradient fill disappears when it's drawn outside the bounds of its parent?Flash：渐变填充在其父级边界之外绘制时消失？
【发布时间】：2010-11-20 06:34:54
【问题描述】：

我正在尝试使用 beginGradientFill 和 drawRect 在 Flash 中绘制渐变，但是当绘制的矩形部分超出父级边界时，根本不会绘制渐变。

例如，考虑下面的代码：

function testGradient():void {
    var g:Graphics = container.graphics;
    var width:Number = container.width;
    var height:Number = container.height;
    var y:Number = 0;
    var x:Number = 0;
    var ratios:Array = [255 * y / height, 255 * (y + height) / height];
    g.beginGradientFill(GradientType.LINEAR, [0xFF, 0xFF], [0.6, 0], 
                        ratios, null);
    g.lineStyle(1, 0xFF0000);
    g.drawRect(x, y, width, height);
    g.endFill(); 
}

当正在绘制的矩形位于container 的范围内时，一切正常：

但是，如果矩形位于容器边界之外，则根本不会绘制渐变。例如，如果代码改为：

...
var x:Number = 10;
var y:Number = 10;
...

然后渐变消失：

没有进行在父边界内绘制框所需的数学运算（并修复渐变以使其看起来正确），有什么方法可以解决这个问题吗？

【问题讨论】：

标签： flash gradient

【解决方案1】：

我认为您的问题是您在比率计算中使用 x/y 位置，这可能导致值越界。

使用你的比率计算，当 x/y 都为零时，你会得到一个很好的平滑渐变：

ratios = [0,255]

但是，例如，当您将 x/y 设置为 10 时，您的比率数组变为

ratios = [25.5,280.5]

这是无效的。 ratios 需要是从 0 到 255 的线性整数序列。超出范围会导致变量被忽略。

如果您想要无论 x/y 位置如何都为您的框提供一致的渐变，请硬编码您的 ratios var，或者对您在比率数组中输入的值进行一些边界检查以确保它们在 0-255 之间。

请记住，在图形对象上调用 drawRect 时，x/y/width/height 是相对于您正在操作的 graphics 对象的对象。

希望有帮助。

【讨论】：