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);
}