Question

我继承了一个小型Web应用程序，该应用程序具有以下功能：用户可以从下拉列表中选择颜色，然后将图像的一部分着色。

着色通过名为Pixastic的Javascript库发生。

Pixastic将图像加载到canvas元素中，使用其Pixastic coloradjust函数处理图像。

在我的情况下，正在处理的图像是带有黑色/灰色轮廓的透明PNG。最终结果是只有黑色/灰色轮廓被着色。

但这是棘手的部分。

Pixastic coloradjust功能不只是采用十六进制或RGB颜色。它需要一组调整parementers 来调整红色，绿色和蓝色通道。每个调整值可以是从-1到1的十进制数。

coloradjust功能基本上是这样的：

让r成为红色通道调整值。
多个r * 255，结果为redVal
循环图像中的每个像素
将redVal添加到像素的红色值（redPixel）
如果redVal + redPixel＆lt; 0，然后将像素设置为0
如果redVal + redPixel＆gt; 255，然后将像素设置为255
否则，将像素设置为redVal + redPixel *对绿色和蓝色通道做同样的事情。

如果有帮助，这是coloradjust function的实际代码。

我有一个现有颜色和调整值的列表。

我的任务是为应用添加一些新颜色，但我完全不知道如何计算PIxastic给定十六进制颜色的颜色调整值。

现有的十六进制颜色和调整值之间似乎没有任何关联，所以我担心现有的调整值是有人手动计算出来的。

以下是现有系统的一些示例颜色：

＃603314
- 红色调整-0.1
- 绿色调整-0.5
- 蓝色调整-0.3
＃82bad4
- 红色调整0.2
- 绿色调整0.4
- 蓝色调整0.4

鉴于上述所有情况，我如何计算出#cc9e3c等新的十六进制颜色的颜色调整值？

Answer 1

我已经开始创建一些函数来返回红色，绿色和蓝色比例，问题的描述方式。但是，我的计算都没有与示例匹配，所以我猜我完全不理解这个问题。尽管如此...

function redScale(colorInput) {return parseInt(colorInput.substring(1,3),16)/255 * 2 - 1;}
function grnScale(colorInput) {return parseInt(colorInput.substring(3,5),16)/255 * 2 - 1;}
function bluScale(colorInput) {return parseInt(colorInput.substring(5,7),16)/255 * 2 - 1;}

substring方法从colorInput字符串中获取两位十六进制值。在我有两位十六进制字符串后，我使用parseInt将其转换为十进制。除以255，得到从0到1的标度。由于标度从-1变为1（长度为2），你将它乘以2（得到0到2的标度），然后减去1，得到-1到1的标度。* /

var colorInput = "#603314";

rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);
document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS + "<br/><br/>");

colorInput = "#82bad4";

rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);
document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS + "<br/><br/>");

colorInput = "cc9e3c";
rCS = redScale(colorInput);
gCS = grnScale(colorInput);
bCS = bluScale(colorInput);

document.write("input: " + colorInput + "<br/>red: "+rCS+"<br/>","green: " + gCS + "<br/>" + "blue: " + bCS);

尝试从十六进制或RGB颜色计算Pixastic颜色调整值

1 个答案: