用于色轮组件的 Flex 4 圆形路径渐变描边

Question

我正在尝试在 Flex 4 中创建一个色轮组件，它允许我表示 RGB 和 HSL 数据。我这样做是用一个圆形色轮来代表我可以使用的各种色调，并在其中心使用一个矩形渐变来代表亮度和饱和度场

目前我已经表示了对象，但我无法确定填充它们的最佳方式。在中心正方形中创建必要的渐变没有问题，但我无法让外环构建-圆形-渐变。似乎 flex 中仅有的两个原生渐变是线性和径向的，但我需要渐变线性地跟随椭圆周围的路径。我怎样才能做到这一点？

这是我迄今为止所做的尝试：

<s:Group>
    <s:Ellipse x="7" y="7" width="136" height="136">
        <s:stroke>
            <s:LinearGradientStroke weight="14">
                <s:GradientEntry ratio="0" color="0xFF0000"/>
                <s:GradientEntry ratio="0.1647" color="0xFFFF00"/>
                <s:GradientEntry ratio="0.3294" color="0x00FF00"/>
                <s:GradientEntry ratio="0.4941" color="0x00FFFF"/>
                <s:GradientEntry ratio="0.6588" color="0x0000FF"/>
                <s:GradientEntry ratio="0.3529" color="0xFF00FF"/>
                <s:GradientEntry ratio="1" color="0xFF0000"/>
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Ellipse>
    <s:Rect x="32" y="32" width="86" height="86">
        <s:fill>
            <s:SolidColor/>
        </s:fill>
    </s:Rect>
</s:Group>

颜色及其比例从左到右正确定位了我需要的渐变，但最终结果如下：

http://imageshack.us/photo/my-images/10/flexo.png/

我希望图像是这样的：（paint shop pro 8 的屏幕截图）

http://imageshack.us/photo/my-images/687/psph.png/

（对不起链接，但我还没有 10 个代表，所以我不能直接在帖子中发布图片）

（不，我还没有构建矩形渐变，因为它的颜色是基于外环的......我还不担心矩形）

Answer 1

我终于明白了

首先，我使用了本教程中提到的来自 BoostWorthy.com 的 Ryan Taylor 的代码： http://www.boostworthy.com/blog/?p=200

本教程的问题在于颜色范围没有得到我的色调色轮可用的所有可能色调，因为他使用正弦波来计算角度颜色。如果您查看色调的维基百科文章，您会发现色谱不是正弦波，而是红绿和蓝色的简单混合。这是直观地解释了我在说什么的图表：

http://en.wikipedia.org/wiki/File:HSV-RGB-comparison.svg

如果您使用正弦波，则波仅在其最大值处每 60 度一次达到峰值...当颜色值的斜率需要在每 60 度期间保持恒定时（即在每个周期内）在此期间，颜色的最大值为 255 或最小值为 0）

这是在教程的帖子中作为他的代码问题提出的，但没有人发布解决方案...这是实际的解决方案：

//Define our variables
var nRadians:Number;
var nColor:int = 0;
var nX:Number;
var nY:Number;
var nIX:Number;
var nIY:Number;     
var nR:Number;
var nG:Number;
var nB:Number;
// Calculate the thickness of the lines which draw the colors.
var iThickness:int = 1 + int(nRadius / 50); 

// Loop from '0' to '360' degrees, drawing lines from the center 
// of the wheel outward the length of the specified radius.
for(var i:int = 0; i < 360; i++)
{
    nRadians = i * (Math.PI / 180);

    var offset:Number = i;
    do 
    {
        offset = offset - 60;
    } while (offset >= 60)

    if (offset < 0) offset = offset + 60;

    var greenSlope:String = "up";
    var redSlope:String = "max";
    var blueSlope:String = "min";

    //GREEN-----------------
    if (i >= 60) greenSlope = "max";
    if (i > 180) greenSlope = "down";
    if (i >= 240) greenSlope = "min";
    //RED-------------------
    if (i > 60) redSlope = "down";
    if (i >= 120) redSlope = "min";
    if (i > 240) redSlope = "up";
    if (i >= 300) redSlope = "max";
    //BLUE------------------
    if (i > 120) blueSlope = "up";
    if (i >= 180) blueSlope = "max";
    if (i > 300) blueSlope = "down";

    var colorArr:Array = new Array(blueSlope,greenSlope,redSlope);
    var valueArr:Array = new Array(nB,nG,nR);
    var counter:int = 0;
    var bitRotation:int = 0;

    for each (var color:String in colorArr)
    {
        var value:Number = 0;
        var percentUpOffset:Number = ((100 / 60) * offset) / 100;
        var percentDownOffset:Number = ((100 / 60) * (60 - offset)) / 100;

        if (color == "max")  value = 255;
        if (color == "min")  value = 0;
        if (color == "up")   value = 255 * percentUpOffset;
        if (color == "down") value = 255 * percentDownOffset;

        valueArr[counter] = value << bitRotation;
        if (i == 0) trace(value);

        bitRotation = bitRotation + 8;  
        counter++;
    }

    nR = valueArr[2];
    nG = valueArr[1];
    nB = valueArr[0];

    // OR the individual color channels together.
    nColor = nR | nG | nB;

    // Calculate the coordinate in which the line should be drawn to.
    // (nIX / nIY is the inner start position of the ring
    nX = (nRadius * Math.cos(nRadians)) + DEFAULT_RADIUS;
    nY = (nRadius * Math.sin(nRadians)) + DEFAULT_RADIUS;
    nIX = ((nRadius - nHeight) * Math.cos(nRadians)) + DEFAULT_RADIUS;
    nIY = ((nRadius - nHeight) * Math.sin(nRadians)) + DEFAULT_RADIUS;

    //Draw the line
    var line:Line = new Line();
    var stroke:SolidColorStroke = new SolidColorStroke(nColor,iThickness);
    line.stroke = stroke;
    line.xFrom = nIX;
    line.xTo = nX;
    line.yFrom = nIY;
    line.yTo = nY;

    this.addElement(line);
}