javascript - 将颜色十六进制混合算法与标准 CMYK 彩色按钮相结合
问题描述
我正在尝试使用彩色按钮混合任何颜色组合,这些按钮输出特定的十六进制数字,并结合引导程序中的滑块,允许用户指示他们想要使用的颜色百分比。
我无法让滑块正常运行,我不知道为什么。
我确实需要一些帮助,将代码片段组合成一个可以用于艺术课的工作算法。完整的代码可以在这里找到:
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;
}
});
解决方案
这只是解决了我认为你想要的机制(运行并正确保存滑块值),它可以用作起点。这并不能解决您想要的任何颜色组合的公式。
- 使用所有百分比(默认为 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
});
据我了解,混合算法很难实现,这个问题和答案提供了一些很好的方法:在 javascript 中“自然地”混合两种颜色,但你仍然需要混合 n 种颜色,而不仅仅是 2 种,这更复杂. 幸运的是,这似乎并非不可能。
推荐阅读
- bash - grep 多行中的特定字符串
- php - 使链接页面上的图像显示在图像源中
- c# - 按钮已禁用 - DialogHost 和日历
- javascript - 在动态呈现的内容上显示 HTML 标记
- javascript - 在 Javascript 中验证 Facebook signed_request 签名
- oracle - 在 Oracle 11g 中加载外部表数据
- python - Related Manager is empty in one direction but not the other
- r - 从 R 中的网站提取 JSON 响应
- c# - 在 C# 中将图像添加到对象列表中
- tfs - VS2017 使用同一帐户连接到 TFS 和 VSTS 问题