我在項目上使用YUI2 colour picker以提供主題/顏色方案更改功能。我將每個顏色選擇器的默認rgb值設置爲顏色方案中元素的當前rgb值。YUI2 ColorPicker默認值問題

拾取器保存的rgb值很好，但是Hue Slider和Picker Slider沒有更新以反映這一點。每當顏色選擇器出現時，色調和選取器分別設置爲0和ffffff。

我已經通過文檔搜索，並嘗試了一些可能的方法，可能適當更新色相/選擇器滑塊，沒有運氣。

任何意見，將不勝感激

2012-07-04 Chris Salij

經過一些搜索和玩弄我設法拿出一個解決方案。這個過程有兩個步驟。

步驟1

您需要從RGB值計算HSV（色調，飽和度，值）。這是使用下面的函數rgbTohsv（）完成的，我得到了here。它的原始版本已經修改，以說明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)]; 
}

修改：：色相滑塊預計180-0之間的一個值，而不是通常的0-360。除了較短的距離以外，它也是反轉的，因此它從180-> 0。 S和V值必須是0-100之間的整數，而原始函數返回0-1.0值。上述功能都解決了這兩個問題。

步驟2

接下來您需要設置顏色選擇器的HSV值，因此在那裏colourPicker是您初始化的顏色選擇器變量。

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-06 10:12:37

YUI2 ColorPicker默認值問題

回答

步驟1

步驟2

相關問題