如何通过js实现hue-blend-mode？

编程问答 2022-05-03

问题描述

在css中，有一个叫做mix-blend-mode的属性。它描述了当元素重叠时颜色应该如何显示。

有许多混合模式，例如：多重、屏幕、变暗...

我正在尝试在 webgl 上实现这些模式，其中大部分已经完成，但是hue-blend-mode 失败了。

MDN 网络文档：https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode

The final color has the hue of the top color,while using the saturation and luminosity of the bottom color.

例如，顶部颜色为#FFFFFF，底部颜色为#FF9933。

所以上面颜色的hsl格式是0/0%/100%(0/0/1)，另一个是30/100%/60%(0.08333333333333333/1/0.6)。

最终颜色为0/100%/60%(0/1/0.6)，转换为RGB为#FFFF33。

但是在 css 中，结果是 #ACACAC。

enter image description here

function rgb2hue(r,g,b) {
  r /= 255;
  g /= 255;
  b /= 255;
  var max = Math.max(r,b);
  var min = Math.min(r,b);
  var c   = max - min;
  var hue;
  if (c == 0) {
    hue = 0;
  } else {
    switch(max) {
      case r:
        var segment = (g - b) / c;
        var shift   = 0 / 60;       // R° / (360° / hex sides)
        if (segment < 0) {          // hue > 180,full rotation
          shift = 360 / 60;         // R° / (360° / hex sides)
        }
        hue = segment + shift;
        break;
      case g:
        var segment = (b - r) / c;
        var shift   = 120 / 60;     // G° / (360° / hex sides)
        hue = segment + shift;
        break;
      case b:
        var segment = (r - g) / c;
        var shift   = 240 / 60;     // B° / (360° / hex sides)
        hue = segment + shift;
        break;
    }
  }
  var s = 0;
  var l = (max + min) * 0.5;
  if(max !== min) {
    if(l < 0.5) {
      s = (max - min) / (max + min);
    }
    else {
      s = (max - min) / (2 - max - min);
    }
  }
  return [hue / 6,s,l]; // hue is in [0,1]
}

function hslToHex(h,l) {
  var r,b;
  if (s === 0) {
    r = g = b = l; // achromatic
  } else {
    var hue2rgb = (p,q,t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1 / 6) return p + (q - p) * 6 * t;
      if (t < 1 / 2) return q;
      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
      return p;
    };
    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    var p = 2 * l - q;
    r = hue2rgb(p,h + 1 / 3);
    g = hue2rgb(p,h);
    b = hue2rgb(p,h - 1 / 3);
  }
  var toHex = x => {
    var hex = Math.round(x * 255).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

var [ha,sa,la] = rgb2hue(parseInt('FF',16),parseInt('99',parseInt('33',16));
var [hb,sb,lb] = rgb2hue(parseInt('FF',parseInt('FF',16));
console.log('bottom',ha,la);
console.log('top',hb,lb);
console.log('final hsl',la);
let res = hslToHex(hb,la);
console.log('final rgb',res);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmix-blend-mode