我已经有了一个不错的算法,可以将 CMYK 颜色组合和混合在一起。但是,它无法在不失败的情况下组合其他十六进制颜色。我需要一些帮助来弄清楚如何编辑算法以接受其他颜色。正如我在其他在线免费应用程序中看到的那样,我知道可以混合多种颜色。
我想做的另一个修改是将整体混合比例设为 100%。目前,您可以将所有颜色最大化为 100%,但我希望将其设置为每种颜色只能占 100% 的百分比。
完整代码可以在这里找到: https://jsfiddle.net/5dsgbne9/30/
这里主要是需要修改的混色算法
var slider = new Slider('#ex1', {
formatter: function(value) {
return 'Current value: ' + value;
}
});
var colorPercentages = {};
var colors = document.getElementsByClassName("colors");
for (let i = 0; i < colors.length; i++) {
if (!(colors[i].getAttribute("id") in colorPercentages)) {
colorPercentages[colors[i].getAttribute("id")] = 0;
}
colors[i].addEventListener("click", function() {
colorPercentages[colors[i].getAttribute("id")] = $("#ex1").val();
colors[i].innerHTML = colors[i].getAttribute("id") + " " + $("#ex1").val() + "%";
console.log(colorPercentages)
//formula here!!
let r = 255 * (1 - colorPercentages.Cyan / 100) * (1 - colorPercentages.Black / 100);
let g = 255 * (1 - colorPercentages.Magenta / 100) * (1 - colorPercentages.Black / 100);
let b = 255 * (1 - colorPercentages.Yellow / 100) * (1 - colorPercentages.Black / 100);
$("body").css('background-color', 'rgb(' + r + ', ' + g + ', ' + b + ')');
});
}
最佳答案
试试我的 fiddle :
编辑:新 fiddle
https://jsfiddle.net/wg6bp210/15/
我的解决方案要求元素中存在 rgb 信息,因此:
<button class="colors" id="Yellow" hexa="#ffff00">Yellow</button>
成为
<button class="colors" id="Yellow" hexa="#ffff00" r="254" g="221" b="0">Yellow</button>
不得不基本上重写整个代码,但 fiddle 会做所有要求的事情:
- 1) 添加选定的颜色并相应地更新背景颜色;
- 2) 相应地将按钮上的百分比更新为总计 100%;
- 3) 实现停用行为,以停用 点击,以防它已经被激活。
关于javascript - 向 RGB 颜色混合算法添加额外的十六进制颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51894914/