RGB颜色的常见混合与绘画的混合颜色非常不同,它是混合光而不是混合颜料.

例如:

Blue (0,0,255) + Yellow (255,255,0) = Grey (128,128,128)

(它应该是蓝色+黄色=绿色)

是否有任何已知的混色算法,就像混合真实颜色一样？

我的方法

我已经尝试过以下内容:

将两种颜色转换为HSV并混合色调(乘以从饱和度计算的系数),以及饱和度和值通道的简单平均值.然后我从两种颜色计算平均亮度,并调整结果颜色以匹配此亮度.这很有效,但色调混合有时是错误的,例如:

Red (Hue 0°) + Blue (Hue 240°) = Green (Hue 120°)

我发现有时我需要将色调值移动360°(当色调之间的差异大于180°时).

Red (Hue 360°) + Blue (Hue 240°) = Magenta/fuchsia (Hue 300°)

但这种转变也不是很好,例如:

Cyan (Hue 179°) + Red (Hue 0°) = Hue 89.5°
Cyan (Hue 181°) + Red (Hue 0°) --> shifting is performed (the difference is greater than 180°)
Cyan (Hue 181°) + Red (Hue 360°) = Hue 270.5°

(色调179 +红色)和(色调181 +红色)产生两种完全不同的颜色. …

我想<div>在我的网页上放一个红色的矩形元素,这样它不仅看起来很透明,而且就像在Photoshop的Multiply模式下混合一样.

该<div>会拥有position: fixed,所以它下面的内容会迅速改变.

这可能与任何HTML5/CSS3/canvas/SVG技巧有关吗？

当处理不同颜色的重叠高密度散射图或线图时,可以方便地实现添加剂混合方案,其中每个标记的RGB颜色加在一起以在画布中产生最终颜色.这是2D和3D渲染引擎中的常见操作.

但是,在Matplotlib中,我只发现了对alpha/opacity混合的支持.有没有迂回的方式做到这一点,还是我坚持渲染到位图,然后在一些绘画程序中混合它们？

编辑:这是一些示例代码和手动解决方案.

这将产生两个部分重叠的随机分布:

x1 = randn(1000)
y1 = randn(1000)
x2 = randn(1000) * 5
y2 = randn(1000)
scatter(x1,y1,c='b',edgecolors='none')
scatter(x2,y2,c='r',edgecolors='none')

这将在matplotlib中产生以下内容:

正如您所看到的,有一些重叠的蓝点被红点遮挡,我们希望看到它们.通过在matplotlib中使用alpha/opacity混合,您可以:

scatter(x1,y1,c='b',edgecolors='none',alpha=0.5)
scatter(x2,y2,c='r',edgecolors='none',alpha=0.5)

这会产生以下结果:

但我真正想要的是以下内容:

我可以通过将每个绘图独立渲染到位图来手动完成:

xlim = plt.xlim()
ylim = plt.ylim()
scatter(x1,y1,c='b',edgecolors='none')
plt.xlim(xlim)
plt.ylim(ylim)
scatter(x2,y2,c='r',edgecolors='none')
plt.xlim(xlim)
plt.ylim(ylim)
plt.savefig(r'scatter_blue.png',transparent=True)
plt.savefig(r'scatter_red.png',transparent=True)

这给了我以下图片:

你可以做的是在Paint.NET/PhotoShop/gimp中将它们作为独立的层加载,只是添加它们.

现在理想的是能够在Matplotlib中以编程方式执行此操作,因为我将处理数百个这些!

我已根据以下概念在OpenGL中实现了屏蔽:

• 面具由黑色和白色组成.
• 前景纹理应仅在蒙版的白色部分中可见.
• 背景纹理应仅在蒙版的黑色部分中可见.

我可以通过使用glBlendFunc()使白色部分或黑色部分工作,但不能同时使用两个,因为前景层不仅混合到蒙版上,而且还混合到背景层上.

有没有人知道如何以最好的方式实现这一目标？我一直在网上搜索片段着色器.这是要走的路吗？

我想实现W3C合成和混合规范中描述的颜色混合.(我在JavaScript中这样做,但语言对于解决我的问题并不重要.)

回想起来:在实现这个问题的答案期间,我意识到这可能会成为一个非常好的独立包.如果您有兴趣,可以从npm获取它.

到目前为止,它的效果非常好,但我想进一步采用这些算法,并增加对alpha通道的支持.感谢SVG合成规范提供了所有必需的公式,这些公式并不太难.

但是现在我坚持实现W3C规范描述为不可分离的混合模式(从Photoshop中已知):色调,饱和度,颜色和亮度.

遗憾的是,这些算法在SVG规范中不可用,我不知道如何使用它们.我猜W3C提供的公式的修改版本用于处理我缺少的alpha通道.

为了使我的问题更具视觉效果,我将展示Photoshop为色调混合两种颜色的方式:

这也是我能够使用上述W3C规范中的非alpha算法重现的.

我无法重现的是当我在源和背景颜色上放置较低的alpha时Photoshop给我的结果:

有谁知道如何以编程方式实现该结果？

更新1:更改插图(添加HSVA和RGBA代码)以阐明使用的颜色.

更新2:要检查可能的解决方案,我将附加另外两个Photoshop生成的混合示例:

更新3:事实证明,除了没有关于颜色混合的线索之外,我还搞砸了我的Photoshop设置,使任务更难以解决我的问题.修复了可能的未来路人的示例图像.

我在这里撞墙,我很确定我做的是蠢事,所以有时间把我的愚蠢公之于众.

我正在尝试拍摄两张图像,使用标准混合算法(Hardlight,softlight,overlay,multiply等)将它们混合成第三张图像.

因为Android没有内置这样的混合属性,所以我已经走下了获取每个像素并使用算法组合它们的道路.但是,结果是垃圾.下面是简单乘法混合的结果(使用的图像和预期结果).

基础:

混合:

预期结果:

垃圾结果:

任何帮助,将不胜感激.下面是代码,我试图删除所有"垃圾",但有些可能已经完成了.如果事情不清楚,我会清理它.

    ImageView imageView = (ImageView) findViewById(R.id.ImageView01);
    Bitmap base = BitmapFactory.decodeResource(getResources(), R.drawable.base);
    Bitmap result = base.copy(Bitmap.Config.RGB_565, true);
    Bitmap blend = BitmapFactory.decodeResource(getResources(), R.drawable.blend);

    IntBuffer buffBase = IntBuffer.allocate(base.getWidth() * base.getHeight());
    base.copyPixelsToBuffer(buffBase);
    buffBase.rewind();

    IntBuffer buffBlend = IntBuffer.allocate(blend.getWidth() * blend.getHeight());
    blend.copyPixelsToBuffer(buffBlend);
    buffBlend.rewind();

    IntBuffer buffOut = IntBuffer.allocate(base.getWidth() * base.getHeight());
    buffOut.rewind();

    while (buffOut.position() < buffOut.limit()) {
        int filterInt = buffBlend.get();
        int srcInt = buffBase.get();

        int redValueFilter = Color.red(filterInt);
        int greenValueFilter = Color.green(filterInt);
        int blueValueFilter = Color.blue(filterInt);

        int redValueSrc = Color.red(srcInt); …

我试图混合2个图像,使它们之间的接缝消失.

第1张图片:

第二张图片:

如果掺和不适用:

如果混合应用:

我用过ALPHA BLENDING ; 没有缝去除; 实际上图像仍然相同但是黑暗

这是我进行混合的部分

Mat warped1;
warpPerspective(left,warped1,perspectiveTransform,front.size());// Warping may be used for correcting image distortion
imshow("combined1",warped1/2+front/2);
            vector<Mat> imgs;
            imgs.push_back(warped1/2);
            imgs.push_back(front/2);
            double alpha = 0.5; 
            int min_x = ( imgs[0].cols - imgs[1].cols)/2 ;
            int min_y = ( imgs[0].rows -imgs[1].rows)/2 ;
            int width, height;
            if(min_x < 0) {
                min_x = 0; 
                width = (imgs).at(0).cols;
            }
            else         
                width = (imgs).at(1).cols;
            if(min_y < 0) {
                min_y = 0; 
                height = (imgs).at(0).rows - …

我有一个参考图像,我想用SVG实现的效果.

在Photoshop中,可以通过使用100%不透明度并将混合模式设置为"倍增"来实现效果

颜色的十六进制值为:

红色:#EA312F,蓝色:#3A5BA6和重叠区域:#35111F

我已经尝试了许多使用SVG滤镜来实现类似效果的方法,但我很难理解混合模式如何计算值.

1. 原始Photoshop位图
2. SVG仅使用形状没有过滤器
3. SVG在垂直条上使用乘法滤波器
4. SVG在垂直条上使用乘法滤镜和不透明度

您可以在此JSBin http://jsbin.com/iPePuvoD/1/edit中查看每个SVG代码

我真的很难理解匹配垂直条蓝色和重叠区域颜色的最佳方法.

这些形状的每一个我也想利用动画库,如http://snapsvg.io/,所以我希望能单纯依靠过滤器,而不是裁剪或其它操作,以达到预期的效果-但我愿意接受建议.

实际上,最终尝试的SVG(4.)是这样的:

<svg viewBox="0 0 96 146" version="1.1" id="f-multiply-opacity" preserveAspectRatio="xMinYMin meet">
  <defs>
    <filter id="f_multiply" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feBlend in="SourceGraphic" mode="multiply"/>
      <feBlend in="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <g id="f_shape">
    <rect x="0" y="0" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="32" height="96" opacity="0.8" fill="#3A5BA6" filter="url(#f_multiply)" />
  </g>
</svg>

非常感谢有关这方面的一些建议,我已经在SVG上找到了一些很好的资源,但是这个领域似乎仍然很难获得好的信息.

谢谢!

通过将"perspective"应用于html元素,我的mix-blend-mode似乎被Firefox忽略了.

html {
    perspective: 800px; /* causing the issue */
}

div {
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

有什么问题？我使用的是Firefox 40.

http://codepen.io/Type-Style/pen/oXJbRE

问:有没有办法使用默认管道正确混合Alpha组件？

问题:我正在将半透明表面绘制到纹理中,然后我想将该纹理blit到主框架后缓冲区中.通常,当您使用直接的alpha混合进行透明度或抗锯齿处理时,它会将颜色分量混合到后台缓冲区中(通过deafult没有alpha通道).

但是,当混合到具有alpha分量的纹理时,通常的GL_SRC_ALPHA,GL_ONE_MINUS_DST_ALHPA不会正确地混合"alpha"组件:

注意红色和蓝色圆圈边缘的死星上有问题的区域; alpha组件应该是完全不透明的.请注意,RGB组件是预期的blendend.

因此,我使用GL_DST_ALPHA作为我的dst alpha缩放因子,使用BlendFunc的不同设置并且最接近我想要的设置.

这种方法仍然存在问题,因为混合两个具有50%不透明度的表面应该得到75%不透明度的组合表面.但是使用OpenGL默认公式,得到(0.5*0.5)+(0.5*0.5)= 0.5.更令人不安的是,如果我有2个不透明度为40%的表面,我会得到一个不透明的表面:(.4*.4)+(.4*.4)= 0.32.

实数公式(1 - (1 - srcAlpha)*(1 - dstAlpha))意味着我可以在alpha分量的混合方程中使用GL_FUNC_MULT而不是GL_FUNC_ADD.不幸的是,这不存在.

所以我放弃并试图使用着色器做一个解决方案.如果您渲染的纹理也是您读取的纹理,这会变得非常复杂.特别是如果渲染多个半透明表面.

我正在寻找我尚未尝试的替代解决方案.欢迎任何想法.

编辑:我也尝试了GL_ONE作为src和dst缩放因子.这使得alpha组件太不透明,因为1*.5 + 1*.5将得到1作为结果alpha.让我想知道GL_ONE和GL_DST_ALPHA是否会给出更好的结果.

已解决:在得知答案(见评论)后,我发现多个参考文献都在讨论相同的解决方案:

https://www.opengl.org/discussion_boards/showthread.php/167554-FBO-and-blending

https://forum.openframeworks.cc/t/weird-problem-rendering-semi-transparent-image-to-fbo/2215/10

https://www.opengl.org/wiki/Blending

我觉得自己找不到那些傻事我觉得很愚蠢

ps:我使用Anders Riggelsen的混合工具制作图像.