PS图层混合模式
PS中的混合模式,在前端解析PSD文件信息获取图层信息之后,需要获取相应模式的key值再做相应处理
文本图层
在使用 @webtoon/psd解析PSD文件之后,会得到基本的一些图层信息.在遍历了所有图层之后,经过解析后的数据,基本分两大类.Layer 和 Group.就是PS中图层和分组. 实际上,在我们需要处理Layer 的时候,可以简单的经过filter 把文字的图层纶单独标记出来.方便之后来单独处理.
比如说,上面这两个图层信息.简单直观的就能发现其中text属性有区别.所以,判断一下text有值的,就可以把他的type 改一下.这样,我们就可以得到
一目了然.方便之后针对文字图层进行单独处理,获取 fontSize,fontFamily,color 等等我们需要的属性出来.
其中,FillColor.Values: [1, 0.69019,0.16864, 0.12549] 就是文本的填充颜色色值.这个数组值,其实对应的就是前端rgba(0,0,0,0), 只不过需要调整一下顺序
Tracking 是文本间距,如果你是使用Fabricjs的话,对应文本的属性就是charSpacing
new fabric.IText("少林功夫好嘢 真好嘢", {
charSpacing: 100
});
FontFamily 是在
文本基本就这些了,至于PS中更复杂的内发光,渐变之类文字效果.我也还没研究明白呢.哪位大佬知道的话,可以告知一下.多谢!
带混合模式的图层
带有混合模式的 Layer.在解析出来的Layer信息中我们可以看到有一个blendMode.接下来,我们的攻克目标就是他了.
在翻阅了大量资料之后,终于在 Adobe Photoshop File Formats Specification 中找到了.这里面是PS的一些信息规范.其中就有 混合模式 的 key 值
我简单的做了一个总结
// 常用PS 效果
// 'norm' = normal,
// 'mul ' = multiply, 正片叠底（Multiply）
// 'scrn' = screen, 滤色（Screen）
// 'over' = overlay, 叠加（Overlay）
// 'sLit' = soft light, 柔光（Soft Light）
// 'hLit' = hard light, 硬光（Hard Light）
// 'div ' = color dodge, 颜色减淡（Color Dodge）
// 'idiv' = color burn, 颜色加深（Color Burn）
// 'diff' = difference, 差值（Difference）
// 'smud' = exclusion, 排除（Exclusion）
// 'diss' = dissolve, 溶解（Dissolve）
// 'dark' = darken, 变暗（Darken）
// 'lbrn' = linear burn, 线性加深（Linear Burn）
// 'dkCl' = darker color, 深色（Darker Color）
// 'lite' = lighten, 变亮（Lighten）
// 'lddg' = linear dodge, 线性减淡（Linear Dodge）
// 'lgCl' = lighter color 亮色（Lighter Color）
// 'vLit' = vivid light, 亮光（Vivid Light）
// 'lLit' = linear light, 线性光（Linear Light）
// 'pLit' = pin light, 点光（Pin Light）
// 'hMix' = hard mix, 实色混合
// 'fsub' = subtract, 减去（Subtract）
// 'fdiv' = divide 划分（Divide）
// 'hue ' = hue, 色相（Hue）
// 'sat ' = saturation, 饱和度（Saturation）
// 'colr' = color, 颜色（Color）
// 'lum ' = luminosity, 亮度（Luminosity）
例如这个图层,说明它的混合模式就是 柔光.至于图层的填充值则是在additionalLayerProperties中.当然直接拿到iOpa.fillOpacity 还需要 (iOpa.fillOpacity / 255).toFixed(2) * 100,这样就可以得到填充值的百分比值了.
然后打开PS,在PS中看一下处理的值对不对.
总结
目前为止,一切都还顺利.如果以后还有遇到什么问题,再来记录吧.溜了溜了~
