Question

我已经有一个不错的算法，能够将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 + ')');

  });
}

Answer 1

尝试一下我的小提琴：

编辑：新提琴

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>

必须基本上重写整个代码，但是小提琴会执行所有要求的操作：

1）添加选定的颜色并相应地更新背景颜色；
2）相应地将按钮上的百分比更新为总计100％；
3）实施了停用行为，以停用颜色点击（如果已被激活）。

在RGB色彩混合算法中添加其他十六进制颜色

1 个答案: