さらに検索して遊んだ後、なんとか解決策を思いつきました。このプロセスには 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);