BlendMode颜色混合模式枚举值

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_14920635/article/details/75617188

BlendMode参数值及表现形式

blendMode作用

在对图片进行手动处理的时候,可能用到图层混合,如改变图片的颜色。常常获取CGContext,然后设置其blendMode参数。

为了形象理解BlendMode值的变化,我使用了一张主图标和辅图标(支付宝图标)作为测试,测试颜色为红色,注释中有序号的可以对应其变换结果

BlendModel参数值结束

如下(转):

    switch (blendMode) {  
        case kCGBlendModeNormal: {  
            strMsg = @"kCGBlendModeNormal: 正常;也是默认的模式。前景图会覆盖背景图";  
            break;  
        }  
        case kCGBlendModeMultiply: {  
            strMsg = @"kCGBlendModeMultiply: 正片叠底;混合了前景和背景的颜色,最终颜色比原先的都暗";  
            break;  
        }  
        case kCGBlendModeScreen: {  
            strMsg = @"kCGBlendModeScreen: 滤色;把前景和背景图的颜色先反过来,然后混合";  
            break;  
        }  
        case kCGBlendModeOverlay: {  
            strMsg = @"kCGBlendModeOverlay: 覆盖;能保留灰度信息,结合kCGBlendModeSaturation能保留透明度信息,在imageWithBlendMode方法中两次执行drawInRect方法实现我们基本需求";  
            break;  
        }  
        case kCGBlendModeDarken: {  
            strMsg = @"kCGBlendModeDarken: 变暗";   //将线条色变为黑色,背景色设置为目的色
            break;  
        }  
        case kCGBlendModeLighten: {  
            strMsg = @"kCGBlendModeLighten: 变亮";  
            break;  
        }  
        case kCGBlendModeColorDodge: {  
            strMsg = @"kCGBlendModeColorDodge: 颜色变淡";  
            break;  
        }  
        case kCGBlendModeColorBurn: {  
            strMsg = @"kCGBlendModeColorBurn: 颜色加深";  //线条颜色(原本)加深,背景色设置为目的色
            break;  
        }  
        case kCGBlendModeSoftLight: {  
            strMsg = @"kCGBlendModeSoftLight: 柔光";  
            break;  
        }  
        case kCGBlendModeHardLight: {  
            strMsg = @"kCGBlendModeHardLight: 强光";  //全为目的色
            break;  
        }  
        case kCGBlendModeDifference: {  
            strMsg = @"kCGBlendModeDifference: 插值";  
            break;  
        }  
        case kCGBlendModeExclusion: {  
            strMsg = @"kCGBlendModeExclusion: 排除";  
            break;  
        }  
        case kCGBlendModeHue: {  
            strMsg = @"kCGBlendModeHue: 色调";  
            break;  
        }  
        case kCGBlendModeSaturation: {  
            strMsg = @"kCGBlendModeSaturation: 饱和度";  
            break;  
        }  
        case kCGBlendModeColor: {  
            strMsg = @"kCGBlendModeColor: 颜色";   //感觉将图片线条色设置为白色,背景色设置为目的色,之后再再图片上加一个有透明度的目的色
            break;  
        }  
        case kCGBlendModeLuminosity: {  
            strMsg = @"kCGBlendModeLuminosity: 亮度";  
            break;  
        }  
            //Apple额外定义的枚举  
            //R: premultiplied result, 表示混合结果  
            //S: Source, 表示源颜色(Sa对应透明度值: 0.0-1.0)  
            //D: destination colors with alpha, 表示带透明度的目标颜色(Da对应透明度值: 0.0-1.0)  
        case kCGBlendModeClear: {  
            strMsg = @"kCGBlendModeClear: R = 0"; //1.清空(如果图标背景色为白色则为全白) 
            break;  
        }  
        case kCGBlendModeCopy: {  
            strMsg = @"kCGBlendModeCopy: R = S";  //2全色覆盖整个图片
            break;  
        }  
        case kCGBlendModeSourceIn: {  
            strMsg = @"kCGBlendModeSourceIn: R = S*Da";  //3.线条变色
            break;  
        }  
        case kCGBlendModeSourceOut: {  
            strMsg = @"kCGBlendModeSourceOut: R = S*(1 - Da)";  //4.背景变为目的色,线条自动变为白色(比如图标线条原为蓝色,会自动变为白色)
            break;  
        }  
        case kCGBlendModeSourceAtop: {  
            strMsg = @"kCGBlendModeSourceAtop: R = S*Da + D*(1 - Sa)";   //5.线条变色,目前感觉和SourceIn效果一致
            break;  
        }  
        case kCGBlendModeDestinationOver: {  
            strMsg = @"kCGBlendModeDestinationOver: R = S*(1 - Da) + D";  //6.背景色变为目的色,线条色不变
            break;  
        }  
        case kCGBlendModeDestinationIn: {  
            strMsg = @"kCGBlendModeDestinationIn: R = D*Sa;能保留透明度信息";  //7.只看到线条色(本色),无其他颜色
            break;  
        }  
        case kCGBlendModeDestinationOut: {  
            strMsg = @"kCGBlendModeDestinationOut: R = D*(1 - Sa)";     //8.空白什么都没哟
            break;  
        }  
        case kCGBlendModeDestinationAtop: {  
            strMsg = @"kCGBlendModeDestinationAtop: R = S*(1 - Da) + D*Sa";  //9.会把整个矩形的背景填充目的色(如图9系列)原色保留
            break;  
        }  
        case kCGBlendModeXOR: {  
            strMsg = @"kCGBlendModeXOR: R = S*(1 - Da) + D*(1 - Sa)";  //10.线条变白,背景色变为目的色
            break;  
        }  
        case kCGBlendModePlusDarker: {  
            strMsg = @"kCGBlendModePlusDarker: R = MAX(0, (1 - D) + (1 - S))";  //11.线条变为黑色, 背景色变为目的色
            break;  
        }  
        case kCGBlendModePlusLighter: {  
            strMsg = @"kCGBlendModePlusLighter: R = MIN(1, S + D)(最后一种混合模式)";  //12.线条变为白色(混合色:如color为红色,就是偏粉色的白,有一定透明度的感觉)
            break;  
        }  
        default: {  
            break;  
        }  
以上中文解释(含//)是在如下代码段情况下发生的,不同代码段可能表示形式不一。

测试图标依赖下面代码,实际使用要考虑实际效果

改变图标代码参考:

func changeColor(_ color:UIColor, blendMode:CGBlendMode) -> UIImage {
        //方式一(可以)
        UIGraphicsBeginImageContextWithOptions(self.size, false, UIScreen.main.scale)
        let context = UIGraphicsGetCurrentContext()
        color.setFill()
        //移动图片
        context!.translateBy(x: 0, y: self.size.height)
        context!.scaleBy(x: 1.0, y: -1.0)
        
        let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
        context!.draw(self.cgImage!, in: rect)
        //模式配置
        context!.setBlendMode(blendMode)
        context!.addRect(rect)
        context!.drawPath(using: CGPathDrawingMode.fill)
        //创建获取图片
        let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return coloredImage!}

颜色变换参考

原型图标:这里传颜色是传入的是red红色

 


3/5。

7.


9.


10

11


12(支付宝的图标有圆角处理)所以边角也有点色


这个是blendMode.Color的变换效果

展开阅读全文

没有更多推荐了,返回首页