Question

尝试为color-dodge创建新的混合模式选项（或divide都非常相似。）

webgl混合模式的当前列表：

fragmentSource: {
  multiply: 'gl_FragColor.rgb *= uColor.rgb;\n',
  screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n',
  add: 'gl_FragColor.rgb += uColor.rgb;\n',
  diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n',
  subtract: 'gl_FragColor.rgb -= uColor.rgb;\n',
  lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n',
  darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n',
  exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n',
  overlay: 'if (uColor.r < 0.5) {\n' +
      'gl_FragColor.r *= 2.0 * uColor.r;\n' +
    '} else {\n' +
      'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' +
    '}\n' +
    'if (uColor.g < 0.5) {\n' +
      'gl_FragColor.g *= 2.0 * uColor.g;\n' +
    '} else {\n' +
      'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' +
    '}\n' +
    'if (uColor.b < 0.5) {\n' +
      'gl_FragColor.b *= 2.0 * uColor.b;\n' +
    '} else {\n' +
      'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' +
    '}\n',
  tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' +
    'gl_FragColor.rgb += uColor.rgb;\n',
},

根据我已阅读的资源（1，2，3），对于color-dodge，数学应按通道进行，且应为min(1.0, baseColor / (1 - blendColor))

我尝试为

添加一个选项

divide: 'gl_FragColor.r = min(1.0, gl_FragColor.r / (1 - uColor.r));\n' +
        'gl_FragColor.g = min(1.0, gl_FragColor.g / (1 - uColor.g));\n' +
        'gl_FragColor.b = min(1.0, gl_FragColor.b / (1 - uColor.b));\n',

但是无论传入哪种颜色进行混合，结果图像始终是同一蓝色的不同阴影

这是我应用过滤器的方式

var fabricImg = new fabric.Image(pageBackgroundImg), // make a fabric.Image object out of the HTMLImageElement
    blendedCanvas = new fabric.StaticCanvas(null, {
        width: fabricImg.getScaledWidth(),
        height: fabricImg.getScaledHeight(),
        renderOnAddRemove: false
    }),
    pageBackgroundPattern;

// add the color filter to the image
fabricImg.filters.push(
    new fabric.Image.filters.BlendColor({
        color: '#' + color,
        mode: 'divide'
    })
);
fabricImg.applyFilters();
// add the image to the canvas
blendedCanvas.add(fabricImg);

blendedCanvas.renderAll();

Answer 1

因此，我添加了一个代码段，以便我们更好地理解。您添加的滤镜是在做某事，如果使用Photoshop除法/彩色减淡应该发生这种情况，我们只能理解比较。您的代码正确无误，并且确实可以正常工作

向下滚动以将原始图像与过滤后的图像进行比较

function start() {
  var canvas = new fabric.Canvas('c');
  var image = document.getElementById('img');
  var fabricImg = new fabric.Image(image); 

  fabric.Image.filters.BlendColor.prototype.fragmentSource.divide =
  'gl_FragColor.r = min(1.0, gl_FragColor.r / (1.0 - uColor.r));\n' +
          'gl_FragColor.g = min(1.0, gl_FragColor.g / (1.0 - uColor.g));\n' +
          'gl_FragColor.b = min(1.0, gl_FragColor.b / (1.0 - uColor.b));\n';
  fabricImg.filters.push(
      new fabric.Image.filters.BlendColor({
          color: '#0000ff',
          mode: 'divide'
      })
  );
  fabricImg.applyFilters();
  canvas.add(fabricImg);
  canvas.requestRenderAll();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<canvas id="c" width=500 height=400 ></canvas>
<img crossOrigin="anonymous" onload="start()" src="https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/dragon2.jpg" id="img" />

在fabric.js中添加颜色减淡/除色混合模式

1 个答案: