将颜色十六进制混合算法与标准CMYK彩色按钮相结合

Question

我正在尝试使用彩色按钮混合任何颜色组合,这些按钮输出特定的十六进制数字与引导程序中的滑动条组合,允许用户指示他们想要使用的颜色百分比.

我无法让滑块正常运行,我不知道为什么.

我确实需要一些帮助将这些代码组合成一个可以用于我的艺术课程的工作算法.完整的代码可以在这里找到:

https://jsfiddle.net/mw7optL5/289/

//Hex blending algorithm
var mix = function(color_1, color_2, weight) {
  function d2h(d) { return d.toString(16); }  // convert a decimal value to hex
  function h2d(h) { return parseInt(h, 16); } // convert a hex value to decimal 

  weight = (typeof(weight) !== 'undefined') ? weight : 50; // set the weight to 50%, if that argument is omitted

  var color = "#";

  for(var i = 0; i <= 5; i += 2) { // loop through each of the 3 hex pairs—red, green, and blue
    var v1 = h2d(color_1.substr(i, 2)), // extract the current pairs
        v2 = h2d(color_2.substr(i, 2)),

        // combine the current pairs from each source color, according to the specified weight
        val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0))); 

    while(val.length < 2) { val = '0' + val; } // prepend a '0' if val results in a single digit

    color += val; // concatenate val to our new color string
  }

  return color; // PROFIT!
  };

//buttons
 <button class="Yellow" onclick="mix('#ffff00')">Yellow</button>
 <button class="Magenta" onclick="mix('#D9017A')">Magenta</button>
 <button class="Cyan" onclick="mix('#009FDF')">Cyan</button>
 <button class="Black" onclick="mix('#2D2926')">Black</button>
 <button class="Orange021" onclick="mix('#FE5000')">Orange</button>

//slider bar
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

var slider = new Slider('#ex1', {
    formatter: function(value) {
        return 'Current value: ' + value;
    }
});

Answer 1

这只是解决了我认为您想要的机制（正确运行并保存滑块值），并且它可以用作起点。这并不能解决您想要的任何颜色组合的公式。

• 创建一个基于按钮的对象，其中包含所有百分比（默认为 0），例如 { Yellow: 0, Magenta: 0, Cyan: 0, Black: 0 }
• 为每个按钮添加事件监听器.click（jquery）或.addEventListener（纯js）
• 在每个按钮的回调中，将颜色和百分比保存到对象中，就像滑块的值在colorPercentages[colors[i].getAttribute("id")] = $("#ex1").val(); 哪里。$("#ex1").val()
• 根据某些公式绘制颜色，例如$("body").css('background-color', 'rgb(' + r + ', ' + g + ', ' + b + ')');

在这种情况下，我使用了这个公式：

红色 = 255 x ( 1 - 青色 / 100 ) x ( 1 - 黑色 / 100 )

绿色 = 255 x ( 1 - 洋红色 / 100 ) x ( 1 - 黑色 / 100 )

蓝色 = 255 x ( 1 - 黄色 / 100 ) x ( 1 - 黑色 / 100 )

这是基于 @barbsan 修改的完整功能示例：https://jsfiddle.net/5dsgbne9/

该示例使用颜色按钮单击事件，但您也可以使用逆逻辑，当用户移动滑块时更改颜色，如下所示：

$("#ex1").slider().on('slideStop', function(ev){
    //code
});

据我了解，混合算法很难实现，这个问题和答案给出了一些很好的方法：Mixing two color "naturally" in javascript，但你仍然需要混合n种颜色，而不仅仅是2种，这甚至更复杂。幸运的是，这似乎并非不可能。