Question

Stack Overflow的向导，

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

图表的左下角应该是纯绿色，右上角的对角线应该是纯红色，中间是朦胧的黄橙色。例如。点（0,0）应为（红色：0绿色：255蓝色：0），点（100,100）应为（红色：255绿色：0蓝色：0）和点（50,50）应为（红色）：132绿色：132蓝色：20）。

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

|         red
|       /
|     /
| green

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

此致 JP

Answer 1

根据我到目前为止的信息，最简单的方法是：

绿色= 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非常不同会发生什么，所以我只计算了平均值。

Answer 2

如果左下角是完全绿色（在rgb (0, 255, 0)中）并且右上角是红色（(255, 0, 0)），则表示红色等式为255 / 100 * y且绿色等式为255 - 255 / 100 * x。这样，左上角将为(255, 255, 0)，右下角将为(0, 0, 0)

Answer 3

我认为我无法想象你想要绘制的内容，但我认为当你将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值，但是，我认为你可以自己弄清楚剩下的数学。

Answer 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>

将（x，y）坐标转换为（r，g，b）值

4 个答案: