フレックス4カラーホイールコンポーネントの円形パスグラインダストローク

Question

フレックス4でカラーホイールコンポーネントを作成しようとしていますが、RGBおよびHSLデータを表現することができます。私はさまざまな色相を表現する円形のカラーホイールと、明度と彩度のフィールドを表すそれの中心にある矩形のグラデーションを使用しています。

現在、私はオブジェクトを表していますが、私はセンタースクエアで必要なグラデーションを作成するのに問題はありませんが、外側のリングに円形グラデーションを作成することはできません。フレックス内の唯一の2つの自然な勾配は線形と放射状のようですが、私は楕円の周りを直線的に追跡する勾配が必要です。私はどうすればこれを可能にしますか？

ここで私はこれまで行われてきた試みだ：色とその比率が適切に左から右に私は必要な勾配を配置

<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/は、 （ペイントショッププロ8からのスクリーンショット）

http://imageshack.us/photo/my-images/687/psph.png/ 012：私はイメージはこのように出てくるしたい

（リンクについては申し訳ありませんが、私は10担当者はまだ持っていないので、私はストレートのポストに画像を投稿することはできません）

として、長方形の勾配まだ

（いいえ、私が作成していませんそれは、私はそれが最終的に

ファーストを考え出しました）私はまだ長方形心配ないよ...色が外輪のオフに基づいています

Answer 1

だ、私はBoostWorthy.comのライアン・テイラーからコードを利用しましたこのチュートリアルで作成したものです： http://www.boostworthy.com/blog/?p=200

このチュートリアルの問題は、角度の色を計算するために正弦波を使用しているため、カラー範囲で色相のカラーホイールで使用できるすべての色相が得られないことです。色相は正弦波ではなく、赤色の緑色と青色の単純な混合であることがわかります。

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

あなたの代わりに彼らの最大値での波のピークのみ回60度の正弦波を使用する場合ときの色値の...：ここでは、視覚的に私が話しているかを説明することをグラフであります勾配は60度ごとに一定である必要があります（つまり、1つの期間中、各色の最大値は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); 
}