0

我有一个使用 d3js 的项目。我必须绘制一条线。但扭曲的是线的颜色会随每个数组值而变化（每 20px 的线包含以下数组的一个元素）。我已经创建了线但是，我面临颜色强度问题。我考虑过 for 循环，但我没有得到准确的结果。我想我无法从一种颜色切换到另一种颜色。

（例如--从暗红色-->浅红色-->小深红色-->深红色）

我有一个超过 10k 值的 json。为了理解目的，我简化了我的数组。

var array_1=[0.0,0.1,0.3,0.5,0.7,0.9]

var array_2=[0.02,0.04,0.06,0.08,0.09]

var array_3=[0.001,0.002,0.004,0.007,0.008]

我的问题：对于任何给定的颜色（红色、蓝色、绿色、黄色等），我应该能够根据这些数组值绘制更大的数字，颜色会更强烈。

是否有可能创建一种算法，该算法可以使用数字数组值来操作任何颜色的 RGB 值？如果可能，您提供一些示例将非常好。

4

1 回答 1

1

您只需要从 YCbCr (YUV) 转换为 RGB，因为 YUV 中的 Y 是发光的，它就像修改颜色的强度一样。

这些公式可以在维基百科上找到： http ://en.wikipedia.org/wiki/YCbCr

这里还有一个用 JavaScript 实现的例子：http: //www.mikekohn.net/file_formats/yuv_rgb_converter.php

例如，在 Micael Kohn 的页面上，您可以尝试在 RGB 中设置颜色并将其转换为 YUV。之后只需降低或提高 Y 值并将其转换为 RGB。你会注意到这就像改变强度。

编辑：

给你，给你写个例子，直接点div

function yuv2rgb(Y,U,V){
    R = Y + 1.4075 * (V - 128)
    G = Y - 0.3455 * (U - 128) - (0.7169 * (V - 128))
    B = Y + 1.7790 * (U - 128)
    return { r:Math.floor(R) , g:Math.floor(G) , b:Math.floor(B)}
}

function rgb2yuv(R,G,B){
    Y = R *  0.299000 + G *  0.587000 + B *  0.114000
    U = R * -0.168736 + G * -0.331264 + B *  0.500000 + 128
    V = R *  0.500000 + G * -0.418688 + B * -.081312 + 128
    return { y:Math.floor(Y) , u:Math.floor(U) , v:Math.floor(V)}
}

http://jsfiddle.net/b3FCK/

于 2013-06-24T16:17:54.607 回答