我正在项目中使用 YUI2 颜色选择器来提供主题/配色方案更改功能。我将每个颜色选择器的默认 rgb 值设置为配色方案元素的当前 rgb 值。
选取器保留的 rgb 值正常,但色相滑块和选取器滑块不会更新以反映这一点。每当颜色选取器出现时,色调和选取器分别设置为 0 和 fffffff。
我已经搜索了文档并尝试了一些可能的方法,这些方法可能会适当地更新色调/选择器滑块,但没有运气。
任何建议将不胜感激
经过更多的搜索和玩耍,我设法想出了一个解决方案。该过程有两个步骤;
步骤 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)];
}
修改::色调滑块期望的值介于 180-0 之间,而不是通常的 0-360。除了较短的范围外,它还被反转,因此从 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);