将 (x, y) 坐标转换为 (r, g, b) 值答案

【问题标题】：Convert (x, y) coordinate into (r, g, b) values将 (x, y) 坐标转换为 (r, g, b) 值
【发布时间】：2017-09-15 09:23:54
【问题描述】：

你好 Stack Overflow 的向导们，

我的任务是用 Javascript 将一些数据绘制到散点图上，但有一点不同！这些绘制的对象需要遵循严格的颜色代码。我的绘图部分是正确的，但是颜色生成让我很难过。该图遵循最大值 x 和 y 100 和最小值零（我正在处理百分比）。

图表的左下角应该是纯绿色，右上角应该是纯红色，中间是朦胧的橙黄色。例如。点 (0, 0) 应该是 (red:0 green:255 blue:0)，点 (100, 100) 应该是 (red:255 green:0 blue:0) 点 (50, 50) 应该是 (red :132 绿色:132 蓝色:20)。

所以基本上有一个从 (0, 0) 点到 (100, 100) 点的绿色到红色的对角渐变。

|         red
|       /
|     /
| green

有没有人处理过类似的情况，也许有某种算法来解决这个问题？

问候， JP

【问题讨论】：

您能否告诉我们，当您拥有 (0, 100) 或 (100, 0) 时会发生什么？
这更像是一个数学问题而不是编程问题。另请注意，有多种方法可以将 2D 空间映射到 3D 空间（如果只使用 R 和 G，则为 2D 空间）。你可以做的是rotate your point by pi/4，把y值放到lerp(green, red, y)中。

标签： javascript colors

【解决方案1】：

我认为我无法准确地设想您想要绘制的内容，但我认为当您将 r、g 和 b 值拆分为不同的函数时，您可以解决很多问题。因此，您应该创建三个不同的函数，而不是 func_rgb(x, y) {...} - 每个颜色通道一个 - 您可以单独操作这些函数，然后将结果相加。

func_r(x,y) {
    return x/100 * 256;
}

func_g(x,y) {
    return (1 - x/100) * 256;
}

func_b(x,y) {
    return (1 - (0.5 - x/100)^2) * 20;
}

我知道这些函数只包含 X 值，但是，我认为您可以自己计算出其余的数学。

【讨论】：

【解决方案2】：

根据我目前掌握的信息，最简单的处理方法是：

绿色 = 255 - ((255/100)*((x+y)/2))
红色 = ((255/100)*((x+y)/2))

这样，如果你在 (0, 0) 你会有：

绿色 = 255 - ((255/100)*((0+0)/2)) = 255
红色 = ((255/100)*((0+0)/2)) = 0

或者如果你在 (13, 13):

绿色 = 255 - ((255/100)*((13+13)/2)) = 222
红色 = ((255/100)*((13+13)/2)) = 33

值得一提的是，蓝色似乎无关紧要，我不知道如果 x 和 y 相差很大会发生什么，所以我只是计算了平均值。

【讨论】：

【解决方案3】：

如果左下角完全是绿色（在 rgb 中(0, 255, 0)），右上角是红色（(255, 0, 0)），这意味着红色的等式是255 / 100 * y，绿色的等式是@987654324 @。这样左上角为(255, 255, 0)，右下角为(0, 0, 0)

【讨论】：

【解决方案4】：

<html>
	<body>
		<canvas id="canvas"></canvas>
		<script type="application/javascript">
			// Colours that you want each corner to have
			var topLeft 	= {r: 0,g: 0,b: 0};
			var topRight 	= {r: 255,g: 0,b: 0};
			var bottomLeft 	= {r: 0,g: 255,b: 0};
			var bottomRight = {r: 0,g: 0,b: 0};
			var output	= {r: 0,g: 0,b: 0};

			// Perform bilinear interpolation on both axis
			// This just means to do linear interpolation for y & x, then combine the results

			// Provide the XY you need the colour for and the size of your graph
			function getSpectrumColour(x,y,width,height) {
				var div = 1.0 / (width*height);
				
				output.r = div * (bottomLeft.r * (width - x) * (height - y) + bottomRight.r * x * y 
								+ topLeft.r * (width - x) * (height - y) + topRight.r * x * y);
				
				output.g = div * (bottomLeft.g * (width - x) * (height - y) + bottomRight.g * x * y 
								+ topLeft.g * (width - x) * (height - y) + topRight.g * x * y);
								
				output.b = div * (bottomLeft.b * (width - x) * (height - y) + bottomRight.b * x * y 
								+ topLeft.b * (width - x) * (height - y) + topRight.b * x * y);
				
				return output;
			}
			
			var canvas = null;
			var ctx = null;
			var graphWidth = 100;
			var graphHeight = 100;
			
			window.onload = function() {
				canvas = document.getElementById("canvas");
				canvas.width = graphWidth;
				canvas.height = graphHeight;
				ctx = canvas.getContext("2d");
				
				var colour = null;
				
				for (var x = 0; x < graphWidth; ++x) {
					for (var y = 0; y < graphHeight; ++y) {
						colour = getSpectrumColour(x,y,graphWidth,graphHeight);
						
						ctx.fillStyle = "rgba("+colour.r+","+colour.g+","+colour.b+",1.0)";
						ctx.fillRect(x,graphHeight - y,1,1);
					}
				}
			}
		</script>
	</body>
</html>

【讨论】：