Apache flex 弹性图表渐变填充不是平滑过渡
我有一个条形图,我想通过setStyle方法对其列应用线性渐变填充。在我用来配置颜色的方法中,以下代码设置渐变:Apache flex 弹性图表渐变填充不是平滑过渡,apache-flex,actionscript,Apache Flex,Actionscript,我有一个条形图,我想通过setStyle方法对其列应用线性渐变填充。在我用来配置颜色的方法中,以下代码设置渐变: public function configureColor(series:Series):void { var lg:LinearGradient = GradientUtil.getLinearGradient([color1, color2], 0.8, 45); series.setStyle("fill", lg); ... } getLinearGr
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;
}
出于某种原因,我在柱子上得到的梯度是“起伏的”。从一种颜色到下一种颜色的过渡发生在柱的一小部分中,而不是从条形图的顶部到底部的平滑过渡。我如何才能得到它,使它最终成为一个平稳的过渡
编辑:我遇到的问题的示例
这似乎是
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>
[Edit]注释掉了整个if语句,并将最大维度用于
长度。最初的hack只注释掉了if(normalizedAngle>斜边角)
子句。可能仍然有问题,但解决了这两种问题。您可能希望包含一个屏幕截图,以便我们更好地了解发生了什么。你试过改变渐变的角度吗?继续并添加了一个图像()。我尝试过改变角度,但同样的问题也发生了。感谢您的帮助-当它打开时,这似乎为我提出的问题提供了一个解决方案,但它打破了相反的情况,即宽高比是相反的(即,这里有两种小车场景:一种是高度与宽度之比非常大,另一种是宽度与高度之比非常大)。我将继续努力为这两个问题找到解决方案。谢谢!我又尝试了一次,甚至刷新了三角学。但我只是想出了这个新的方法来处理另一个问题。我不确定随机角度是否会正常工作(它们似乎正常),但通常的角度会正常工作。如果你找到了一个好的解决方案,请编辑或共享一个新的答案!
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);
}
}
}