YUI2 ColorPicker默认值问题

Question

我在一个项目中使用YUI2 colour picker来提供主题/配色方案更改功能。我将每个颜色选择器的默认RGB值设置为颜色方案元素的当前RGB值。

拾取器保持的rgb值很好，但是色调滑块和拾取器滑块不会更新以反映这一点。当颜色选择器出现时，色调和选择器分别设置为0和ffffff。

我已经搜索了文档，并尝试了一些可能的方法，这些方法可能会适当地更新色调/拾取器滑块，但没有成功。

如有任何建议，我们将不胜感激

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

Modifications:：色调滑块需要一个介于180-0之间的值，而不是通常的0-360。以及较短的范围，它也是反转的，所以它从180到>0。S和V值必须是0-100之间的整数，而原始函数返回0-1.0值。这两个问题都已经在上面的函数中考虑到了。

第二步

接下来你需要设置颜色选择器的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);