iOS毛玻璃效果的實(shí)現(xiàn)方法

ios開發(fā)中常常用到的毛玻璃效果實(shí)現(xiàn)方法

iOS8以后使用系統(tǒng)里的UIBlurEffect可以實(shí)現(xiàn),UIBlurEffect繼承自UIVisualEffect

UIBlurEffectStyle有三個(gè)值,UIBlurEffectStyleLight , UIBlurEffectStyleExtraLight , UIBlurEffectStyleDark,可以控制毛玻璃的效果.

    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
//必須給effcetView的frame賦值,因?yàn)閁IVisualEffectView是一個(gè)加到UIIamgeView上的子視圖.
    effectView.frame = _imageView.bounds;
    [self.imageView addSubview:effectView];

UIVibrancyEffect也繼承自UIVisualEffect類,可以用來設(shè)置一些特殊的效果.代碼如下

    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.frame = _imageView.bounds;
    
    UIVibrancyEffect *viBrancyeffect = [UIVibrancyEffect effectForBlurEffect:effect];
    UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:viBrancyeffect];
    
    vibrancyEffectView.frame = CGRectMake(100, 0, 200, 200);
    UILabel *lbl = [[UILabel alloc] init];
    lbl.text = @"測試Label";
    lbl.font = [UIFont systemFontOfSize:25];
    lbl.frame = CGRectMake(0, 0, 200, 200);
 
    [vibrancyEffectView.contentView addSubview:lbl];
    [effectView.contentView addSubview:vibrancyEffectView];
    [self.imageView addSubview:effectView];

但是這種毛玻璃效果不能很好的控制模糊效果,可以alpha屬性控制并不完美.
效果如下:


IMG_0142.jpg

使用系統(tǒng)CoreImage中的濾鏡產(chǎn)生毛玻璃效果

原理是給圖片添加濾鏡,這種方式相比上面更為可控,下面介紹一下系統(tǒng)濾鏡中支持的毛玻璃效果

先簡要介紹一下系統(tǒng)濾鏡CIFilter的使用

CIfilter中有一個(gè)專門用于毛玻璃效果的Category : kCICategoryBlur
使用下面的代碼可以打印出這個(gè)分類下的濾鏡

NSArray *filters = [CIFilter filterNamesInCategory:kCICategoryBlur];

可以得到結(jié)果

**    CIBoxBlur,**
**    CIDiscBlur,**
**    CIGaussianBlur,**
**    CIMaskedVariableBlur,**
**    CIMedianFilter,**
**    CIMotionBlur,**
**    CINoiseReduction,**
**    CIZoomBlur**

我們使用最常見的高斯模糊 (Gaussian Blur) 來進(jìn)行舉例

NSArray *inputKeys = filter.inputKeys;

可以得到這個(gè)濾鏡支持兩個(gè)輸入屬性,分別是inputImage,inputRadius
其中inputImage指你需要添加濾鏡效果的圖片,inputRadius指進(jìn)行高斯模糊的程度
設(shè)置屬性的方式有兩種
一種是直接通過NSDictionary賦值

CIImage *testCIImage = [CIImage imageWithCGImage:[UIImage imageNamed:@"testImg.jpg"].CGImage];
    NSDictionary *filterAttDict = @{@"inputImage" : testCIImage
                                    ,@"inputRadius" : [NSNumber numberWithDouble:5.0f]};
    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur" withInputParameters:filterAttDict];
    
CIImage *outPutCIImage = [filter outputImage];

CIContext *ciContext = [CIContext contextWithOptions:nil];
    CGImageRef cgImage = [ciContext createCGImage:outPutCIImage fromRect:outPutCIImage.extent];
    UIImage *resImage = [UIImage imageWithCGImage:cgImage];

另一種是通過kvc方法賦值

    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
    
    CIImage *testCIImage = [CIImage imageWithCGImage:[UIImage imageNamed:@"testImg.jpg"].CGImage];
    
    [filter setValue:testCIImage forKeyPath:kCIInputImageKey];
    [filter setValue:@50 forKeyPath:kCIInputRadiusKey];
    
    CIImage *outPutCIImage = [filter outputImage];
    
    CIContext *ciContext = [CIContext contextWithOptions:nil];
    CGImageRef cgImage = [ciContext createCGImage:outPutCIImage fromRect:outPutCIImage.extent];
    UIImage *resImage = [UIImage imageWithCGImage:cgImage];

發(fā)現(xiàn)一個(gè)寫的比較詳細(xì)的博客,可以參考 http://www.itdecent.cn/p/d115836ed3fa

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容