裁剪(clip)可以將繪制內(nèi)容限制在一某個區(qū)域中薯嗤,比如將一個圖片顯示在一個圓或者環(huán)上连锯。
上圖中,A是沒有經(jīng)過任何處理的圖片拥峦,直接繪制在視圖上。
//讀取資源文件夾下的圖片"miao.jpg"UIImage *image = [UIImage imageNamed:@"miao.jpg"];//繪制在大小為(100, 100)的矩形區(qū)域卖子,圖片有壓縮現(xiàn)象[image drawInRect:CGRectMake(0, 100, 100, 100)];
B是使用簡單的圓形路徑進行裁剪略号。
//保存當前圖形上下文的狀態(tài),以免影響其它地方的繪制CGContextSaveGState(cxt);//創(chuàng)建直徑為100的圓形路徑CGPathRef path = CGPathCreateWithEllipseInRect(CGRectMake(100, 100, 100, 100), NULL);CGContextAddPath(cxt, path);//設(shè)置裁剪CGContextClip(cxt);//繪制圖形洋闽,只顯示裁剪區(qū)域中的部分[image drawInRect:CGRectMake(100, 100, 100, 100)];//恢復(fù)圖形上下文狀態(tài)CGContextRestoreGState(cxt);
C是使用Bezier曲線進行裁剪玄柠。
CGContextSaveGState(cxt);//創(chuàng)建Bezier曲線表示的直徑大的圓UIBezierPath *bPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(200, 100, 100, 100)];//設(shè)置填充規(guī)則為奇偶填充bPath.usesEvenOddFillRule = YES;//給路徑創(chuàng)建直徑小的圓UIBezierPath *bsPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(220, 120, 60, 60)];//將小圓添加到大圓路徑上[bPath appendPath:bsPath];//裁剪,兩個路徑形成一個環(huán)[bPath addClip];//繪制圖像诫舅,填充奇偶規(guī)則表示的內(nèi)部羽利,即環(huán)狀[image drawInRect:CGRectMake(200, 100, 100, 100)];CGContextRestoreGState(cxt);
通過裁剪,可以實現(xiàn)類似相框刊懈、拼圖的功能这弧,甚至實現(xiàn)擦除(刮獎)效果娃闲。但是裁剪的結(jié)果現(xiàn)的比較生硬,并且復(fù)雜路徑的繪制不是很方便当宴。因此我們繼續(xù)考察別的技術(shù)——蒙版(Mask)畜吊。蒙版是將一個沒有透明度的灰度圖片覆蓋在已有的圖像上,然后根據(jù)顏色值決定圖像的顯示效果户矢。白色表示全部透過,黑色表示完全不透過殉疼,其它是半透明的梯浪。而設(shè)計師可以用許多工具制作一些精美的蒙版。
//繪制蒙版圖像- (UIImage *)grayImageWithPoints { CGFloat width = self.bounds.size.width; CGFloat height = self.bounds.size.height; //灰度色彩空間 CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray(); //沒有alpha通道的bitmap圖像 CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, width, colorSpace, (CGBitmapInfo)kCGImageAlphaNone); if (context == NULL) { return nil; } //填充黑色 CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor); CGContextFillRect(context, CGRectMake(0, 0, width, height)); CGContextSaveGState(context);// CGContextSetBlendMode(context, kCGBlendModeLighten);//設(shè)置畫線的屬性 CGContextSetLineWidth(context, 10); CGContextSetStrokeColorWithColor(context, [UIColor colorWithWhite:1 alpha:1.0].CGColor); CGContextSetLineJoin(context, kCGLineJoinRound); CGContextSetLineCap(context, kCGLineCapRound); CGContextAddPath(context, _path); //畫線 CGContextStrokePath(context); CGContextRestoreGState(context); //創(chuàng)建圖像 CGImageRef imageRef = CGBitmapContextCreateImage(context); CGContextRelease(context); UIImage *image = [UIImage imageWithCGImage:imageRef]; CGImageRelease(imageRef); return image;}
使用蒙版進行繪制瓢娜。
- (void)drawRect:(CGRect)rect { CGContextRef cxt = UIGraphicsGetCurrentContext(); CGContextSaveGState(cxt); //獲取蒙版 UIImage *mask = [self grayImageWithPoints]; if (mask == nil) { CGContextRestoreGState(cxt); return; } //使用蒙版進行裁剪 CGContextClipToMask(cxt, rect, mask.CGImage); //繪制圖像 UIImage *image = [UIImage imageNamed:@"miao.jpg"]; [image drawInRect:rect]; CGContextRestoreGState(cxt);}