Compose 和 Blend(二)

数字游侠
• 阅读 4153

上篇文章中我们讲了compose的一些方法,比如source-inXOR 等等。但这些都是裁剪相关的,下面我们就要介绍一下blend

什么是 Blend(混合)

我的理解 blendcompose 中的一步,上篇文章中我已讲到了 compose 的一些方法,但是 blend 是将两张图的颜色混合在一起。

最典型的例子就是三原色,我们可以把红、蓝、绿三个球想象成三个图层,黄、青、洋红就是这三个图层 blend 之后的结果。

Compose 和 Blend(二)

Photoshop 里的混合模式就是 blend,这个功能用过 Photoshop 的人应该都很熟悉了。
Compose 和 Blend(二)

CSS 中的 Blend

CSS 中 blend 的标准最起初是由 Adobe 公司提出的草案。
CSS 里有 isolation , mix-blend-modebackground-blend-mode 三个属性来控制混合的方式。

  • mix-blend-mode 指定一个元素将如何与它「下面」的元素混合

  • background-blend-mode 指定 background-image 如何与 background-color 混合

  • isolation 指定一个元素不参与混合

Compose 和 Blend(二)

下面的网站用 css blend 实现了很多复杂的图形,其中一个背景的 css 代码也不过就十几行,比加载一张图片体积小了很多。

http://bennettfeely.com/gradients/

Blend 各种模式的计算方式

blend 属性有很多值,比如 darken, overlay, color-dodge。其中使用量最多的就是 multiply 正片叠低,「正片叠底」这个词很多设计师应该都知道,但是明白它到底是做什么的就不多了。

那么现在我们就来讲一下各种混合模式的计算方式。

Cs = source color = 前景颜色
Cb = backdrop color = 背景颜色
B(Cb, Cs) = 混合模式

Cs、Cb 为一个 1*3 的矩阵 [R, G, B]
矩阵中每个元素的取值范围为 0 ~ 1

normal

B(Cb, Cs) = Cs

normal 方式其实和 compose 中的 source over 行为一样,也是我们一般图片叠加的方法。

Compose 和 Blend(二)

multiply

B(Cb, Cs) = Cb x Cs

通过公式我们可以看出混合后的结果比前景和背景都要暗。
并且前景和背景中的白色都会被剔除掉。

Compose 和 Blend(二)

screen

B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
          = Cb + Cs -(Cb x Cs)

screen 感觉和 multiply 作用正好相反,生成的结果比背景、前景都要亮。

Compose 和 Blend(二)

hard-light

if(Cs <= 0.5)
    B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)  

Compose 和 Blend(二)

overlay

B(Cb, Cs) = HardLight(Cs, Cb)

hard-light 中背景和前景颠倒过来就是 overlay

Compose 和 Blend(二)

darken

B(Cb, Cs) = min(Cb, Cs)

选择背景、前景中最暗的像素

Compose 和 Blend(二)

lighten

B(Cb, Cs) = max(Cb, Cs)

选择背景、前景中最亮的像素

Compose 和 Blend(二)

color-dodge

if(Cb == 0)
    B(Cb, Cs) = 0
else if(Cs == 1)
    B(Cb, Cs) = 1
else
    B(Cb, Cs) = min(1, Cb / (1 - Cs))

Compose 和 Blend(二)

color-burn

if(Cb == 1)
    B(Cb, Cs) = 1
else if(Cs == 0)
    B(Cb, Cs) = 0
else
    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

Compose 和 Blend(二)

hard-light

if(Cs <= 0.5)
    B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)  

Compose 和 Blend(二)

soft-light

    if(Cs <= 0.5)
        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
    else
        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
    if(Cb <= 0.25)
        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
    else
        D(Cb) = sqrt(Cb)

Compose 和 Blend(二)

difference

B(Cb, Cs) = | Cb - Cs |

Compose 和 Blend(二)

exclusion

B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs

Compose 和 Blend(二)

参考资料

Compositing and Blending Level 1

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Easter79 Easter79
3年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
添砖java的啾 添砖java的啾
4年前
distinct效率更高还是group by效率更高?
目录00结论01distinct的使用02groupby的使用03distinct和groupby原理04推荐groupby的原因00结论先说大致的结论(完整结论在文末):在语义相同,有索引的情况下groupby和distinct都能使用索引,效率相同。在语义相同,无索引的情况下:distinct效率高于groupby。原因是di
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这