0

プロジェクトでYUI2カラーピッカーを使用して、テーマ/配色を変更する機能を提供しています。各カラーピッカーのデフォルトのrgb値を、配色の要素の現在のrgb値に設定しています。

ピッカーが保持するrgb値は問題ありませんが、色相スライダーとピッカースライダーはこれを反映するように更新されていません。カラーピッカーが表示されるたびに、色相とピッカーはそれぞれ0とffffffに設定されます。

ドキュメントを検索して、色相/ピッカースライダーを適切に更新する可能性のあるいくつかの方法を試しましたが、運が悪かったです。

アドバイスをいただければ幸いです

4

1 に答える 1

0

さらに検索して遊んだ後、なんとか解決策を思いつきました。このプロセスには 2 つのステップがあります。

ステップ1

RGB 値からHSV (色相、彩度、値)を計算する必要があります。これは、以下の関数 rgbTohsv() を使用して行われます。YUI HueSlider と PickerSlider が入力を期待する方法を考慮して、オリジナルから変更されています。

function rgbTohsv (rgb) {
    var computedH = computedS = computedV = 0;

    //remove spaces from input RGB values, convert to int
    var r = parseInt( (''+rgb[0]).replace(/\s/g,''),10 ); 
    var g = parseInt( (''+rgb[1]).replace(/\s/g,''),10 ); 
    var b = parseInt( (''+rgb[2]).replace(/\s/g,''),10 ); 

    r=r/255; g=g/255; b=b/255;
    var minRGB = Math.min(r,Math.min(g,b));
    var maxRGB = Math.max(r,Math.max(g,b));

    // Black-gray-white
    if (minRGB==maxRGB) {
        computedV = minRGB;
        return [0,0,Math.round(computedV*100)];
    }

    // Colors other than black-gray-white:
    var d = (r==minRGB) ? g-b : ((b==minRGB) ? r-g : b-r);
    var h = (r==minRGB) ? 3 : ((b==minRGB) ? 1 : 5);
    computedH = 60*(h - d/(maxRGB - minRGB));
    computedS = (maxRGB - minRGB)/maxRGB;
    computedV = maxRGB;
    return [(360-computedH)/2,Math.round(computedS*100),Math.round(computedV*100)];
}

変更: : 色相スライダーは、通常の 0 ~ 360 ではなく、180 ~ 0 の間の値を期待します。範囲が短くなるだけでなく、180 から 0 になるように反転されます。S と V の値は 0 ~ 100 の整数である必要がありますが、元の関数は 0 ~ 1.0 の値を返しました。これらの問題は両方とも、上記の関数で説明されています。

ステップ2

次に、カラー ピッカーの hsv 値を設定する必要があります。colorPicker は初期化されたカラー ピッカー変数です。

hsv = rgbTohsv(rgb);
colourPicker.hueSlider.setValue(hsv[0],0);
colourPicker.pickerSlider.setRegionValue(hsv[1],hsv[2]);

デフォルトでは、色相スライダーとピッカー スライダーを更新すると、更新時にアニメーションが実行されfalseます。メソッド呼び出しの最後に変数を追加することで、これを抑制することができます。

colourPicker.hueSlider.setValue(hsv[0],0,true);
colourPicker.pickerSlider.setRegionValue(hsv[1],hsv[2], true);
于 2012-07-06T10:12:37.593 に答える