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

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

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

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

//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,// 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


最佳答案
这只是解决了我认为你想要的机制(正确运行并保存滑块值),它可以用作起点.这并不能解决任何颜色组合的公式.
>创建一个基于按钮的对象,所有百分比(默认值为0),如{黄色：0,洋红色：0,青色：0,黑色：0}
>为每个按钮添加一个事件监听器.click(jquery)或.addEventListener(pure 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 colors “naturally” in javascript,但你仍然需要混合n种颜色,而不仅仅是2种,这更复杂.幸运的是,这似乎并非不可能.
algorithmalgorithm

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

相关文章