Question

我有一个条形图，其列我想通过setStyle方法应用线性渐变填充。在我用于配置颜色的方法中，以下代码设置渐变：

public function configureColor(series:Series):void {
    var lg:LinearGradient = GradientUtil.getLinearGradient([color1, color2], 0.8, 45);
    series.setStyle("fill", lg);
  ...
}

getLinearGradient方法：

public function getLinearGradient(colors:Array, alpha:Number, angle:Number = 0.0):LinearGradient {
    var lg:LinearGradient = new LinearGradient();
    lg.angle = angle;
    var entries:Array = []
    for each (var color:uint in colors) {
        entries.push(new GradientEntry(color, NaN, alpha));
    }
    lg.entries = entries;
    return lg;
}

出于某种原因，我在列上获得的渐变是“波涛汹涌”。从一种颜色到下一种颜色的过渡发生在色谱柱的一个非常小的部分，而不是从条的顶部到底部的平滑过渡。我怎样才能使它最终成为平稳过渡？

编辑：我遇到的问题示例 enter image description here

Answer 1

这似乎是LinearGradient类的问题。我最初的假设是，BoxItemRenderer是绘制图表中的填充。但是看那里指出了渲染器用来开始填充的渐变的begin()方法。

问题可能是一个特殊情况，当在宽高比大的矩形上使用非90度角时，这是显而易见的。您可以使用简单的rect重新创建此问题：

<s:Rect width="200" height="40">
    <s:fill>
        <s:LinearGradient rotation="45">
            <s:GradientEntry color="#ff0000"/>
            <s:GradientEntry color="#0000ff"/>
        </s:LinearGradient>
    </s:fill>
</s:Rect>

我的hacky解决方案是扩展LinearGradient并覆盖其begin()方法。我复制了原始代码，并注释掉了几行，这使得它确定了错误的宽度。我用各种角度对它进行了测试，看起来似乎没问题。

不可否认，我不明白我注释掉的那些行的目的，并且可能有一个有效的用例。

package
{
    import flash.display.GradientType;
    import flash.display.Graphics;
    import flash.geom.Matrix;
    import flash.geom.Point;
    import flash.geom.Rectangle;

    import mx.core.mx_internal;
    import mx.graphics.LinearGradient;

    use namespace mx_internal;

    public class CustomGradient extends LinearGradient
    {
        private static var commonMatrix:Matrix = new Matrix();

        public function CustomGradient()
        {
            super();
        }

        override public function begin(target:Graphics, targetBounds:Rectangle, targetOrigin:Point):void
        {
            commonMatrix.identity();

            if (!compoundTransform)
            {
                var tx:Number = x;
                var ty:Number = y;
                var length:Number = scaleX;

                if (isNaN(length))
                {
                    // Figure out the two sides
                    if (rotation % 90 != 0)
                    {           
//                      // Normalize angles with absolute value > 360 
//                      var normalizedAngle:Number = rotation % 360;
//                      // Normalize negative angles
//                      if (normalizedAngle < 0)
//                          normalizedAngle += 360;
//                      
//                      // Angles wrap at 180
//                      normalizedAngle %= 180;
//                      
//                      // Angles > 90 get mirrored
//                      if (normalizedAngle > 90)
//                          normalizedAngle = 180 - normalizedAngle;
//                      
//                      var side:Number = targetBounds.width;
//                      // Get the hypotenuse of the largest triangle that can fit in the bounds
//                      var hypotenuse:Number = Math.sqrt(targetBounds.width * targetBounds.width + targetBounds.height * targetBounds.height);
//                      // Get the angle of that largest triangle
//                      var hypotenuseAngle:Number =  Math.acos(targetBounds.width / hypotenuse) * 180 / Math.PI;
//                      
//                      // If the angle is larger than the hypotenuse angle, then use the height 
//                      // as the adjacent side of the triangle
//                      if (normalizedAngle > hypotenuseAngle)
//                      {
//                          normalizedAngle = 90 - normalizedAngle;
//                          side = targetBounds.height;
//                      }
//                      
//                      // Solve for the hypotenuse given an adjacent side and an angle. 
//                      length = side / Math.cos(normalizedAngle / 180 * Math.PI);
                        length=Math.max(targetBounds.width, targetBounds.height);
                    }
                    else 
                    {
                        // Use either width or height based on the rotation
                        length = (rotation % 180) == 0 ? targetBounds.width : targetBounds.height;
                    }
                }

                // If only x or y is defined, force the other to be set to 0
                if (!isNaN(tx) && isNaN(ty))
                    ty = 0;
                else if (isNaN(tx) && !isNaN(ty))
                    tx = 0;

                // If x and y are specified, then move the gradient so that the
                // top left corner is at 0,0
                if (!isNaN(tx) && !isNaN(ty))
                    commonMatrix.translate(GRADIENT_DIMENSION / 2, GRADIENT_DIMENSION / 2); // 1638.4 / 2

                // Force the length to a absolute minimum of 2. Values of 0, 1, or -1 have undesired behavior   
                if (length >= 0 && length < 2)
                    length = 2;
                else if (length < 0 && length > -2)
                    length = -2;

                // Scale the gradient in the x direction. The natural size is 1638.4px. No need
                // to scale the y direction because it is infinite
                commonMatrix.scale (length / GRADIENT_DIMENSION, 1 / GRADIENT_DIMENSION);

                commonMatrix.rotate (!isNaN(_angle) ? _angle : rotationInRadians);
                if (isNaN(tx))
                    tx = targetBounds.left + targetBounds.width / 2;
                else
                    tx += targetOrigin.x;
                if (isNaN(ty))
                    ty = targetBounds.top + targetBounds.height / 2;
                else
                    ty += targetOrigin.y;
                commonMatrix.translate(tx, ty); 
            }
            else
            {
                commonMatrix.translate(GRADIENT_DIMENSION / 2, GRADIENT_DIMENSION / 2);
                commonMatrix.scale(1 / GRADIENT_DIMENSION, 1 / GRADIENT_DIMENSION);
                commonMatrix.concat(compoundTransform.matrix);
                commonMatrix.translate(targetOrigin.x, targetOrigin.y);
            }            

            target.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios,
                commonMatrix, spreadMethod, interpolationMethod);   
        }
    }
}

[编辑] 注释掉整个if语句，并使用length的最大维度。原始hack只注释了if (normalizedAngle > hypotenuseAngle)子句。可能仍然有问题，但解决了这两个问题。

Flex图表渐变填充不是平滑过渡

1 个答案: