javascript - 使用 colorsys 从 HSV 转换为 RGB 会给出空值
问题描述
我正在使用react-native-color-wheel来生成色轮。
我有以下代码:
<ColorWheel
initialColor="#ffffff"
onColorChange={color => console.log({color})}
style={{ width: Dimensions.get('window').width }}
thumbStyle={{ height: 30, width: 30, borderRadius: 30 }}
/>
颜色被记录,但作为 HSV 值{h:-120,s:100,v:100}
(对应于车轮上的蓝色)。但我需要一个 RGB。我尝试使用colorsys,但未成功,如下所示:
onColorChange={color => {
var rgb = colorsys.hsvToRgb({color});
console.log({rgb})
}}
记录:{r:null,g:null,b:null}
为什么我会得到null
值?
解决方案
此评论中的链接稍作修改,以让您单独输入每个值或一次性输入所有值作为对象
/* accepts parameters
* h Object = {h:x, s:y, v:z}
* OR
* h, s, v
*/
function HSVtoRGB(h, s, v) {
var r, g, b, i, f, p, q, t;
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return {
r: Math.round(r * 255),
g: Math.round(g * 255),
b: Math.round(b * 255)
};
}
此代码需要 0 <= h, s, v <= 1,如果您使用度数或弧度,请记住将它们分开。
返回的 0 <= r, g, b <= 255 被四舍五入到最接近的整数。如果您不希望出现这种行为,请从返回的对象中删除 Math.rounds。
反之(除少)
/* accepts parameters
* r Object = {r:x, g:y, b:z}
* OR
* r, g, b
*/
function RGBtoHSV(r, g, b) {
if (arguments.length === 1) {
g = r.g, b = r.b, r = r.r;
}
var max = Math.max(r, g, b), min = Math.min(r, g, b),
d = max - min,
h,
s = (max === 0 ? 0 : d / max),
v = max / 255;
switch (max) {
case min: h = 0; break;
case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break;
case g: h = (b - r) + d * 2; h /= 6 * d; break;
case b: h = (r - g) + d * 4; h /= 6 * d; break;
}
return {
h: h,
s: s,
v: v
};
}
此代码将输出 0 <= h, s, v <= 1,但这次取任意 0 <= r, g, b <= 255(不需要是整数)
为了完整性,
function HSVtoHSL(h, s, v) {
if (arguments.length === 1) {
s = h.s, v = h.v, h = h.h;
}
var _h = h,
_s = s * v,
_l = (2 - s) * v;
_s /= (_l <= 1) ? _l : 2 - _l;
_l /= 2;
return {
h: _h,
s: _s,
l: _l
};
}
function HSLtoHSV(h, s, l) {
if (arguments.length === 1) {
s = h.s, l = h.l, h = h.h;
}
var _h = h,
_s,
_v;
l *= 2;
s *= (l <= 1) ? l : 2 - l;
_v = (l + s) / 2;
_s = (2 * s) / (l + s);
return {
h: _h,
s: _s,
v: _v
};
}
所有这些值都应在 0 到 1 的范围内。对于 HSL<->RGB,请通过 HSV。
推荐阅读
- blazor - Blazor 按钮,使用父组件@onclick
- vue.js - 从 eslint 检查中排除某些 HTML 标签
- azure - Azure Web App 的 Azure 容器注册表授权
- python - 如何使用 Python 在 Google 或 DuckDuckGo 中快速获得答案
- javascript - React:如何使用异步调用来获取 FirebaseToken,然后在 API 调用中使用它?
- mongodb - Mongo 如何写一个 CASE WHEN THEN ELSE
- python - 如何在迭代和附加到列表时解决 ValueError
- html - 调整字体大小以适合 html 元素
- angular - 使用“发生未处理的异常:NGCC 失败”编译 Angular 项目
- dependency-injection - 在 Blazor WebAssembly 中使用依赖注入