你的位置:首页 > 操作系统

[操作系统]CALayer 知识:创建带阴影效果的圆角图片图层和创建自定义绘画内容图层


效果如下:

KMLayerDelegate.h

1 #import <UIKit/UIKit.h>2 3 @interface KMLayerDelegate : NSObject4 5 @end

KMLayerDelegate.m

 1 #import "KMLayerDelegate.h" 2  3 @implementation KMLayerDelegate 4  5 /** 6  * 根据角度,获取对应的弧度 7  * 8  * @param degree 角度 9  *10  * @return 对应的弧度11 */12 static inline double radian(double degree) {13   return degree * M_PI/180;14 }15 16 /**17  * 绘画着色模式内容;绘画预定宽高大小的单元格,每个单元格包含两个半圆,分别为『左上角的上半圆』和『右下边的下半圆』18  *19  * @param info  信息20  * @param context 上下文21 */22 void drawColoredPattern(void *info, CGContextRef context) {23   CGColorRef dotColor = [UIColor colorWithHue:0.0 saturation:0.0 brightness:0.0 alpha:0.8].CGColor; //圆点颜色;以色彩、饱和度、亮度和不透明度组合的颜色24   CGColorRef dotShadowColor = [UIColor orangeColor].CGColor; //圆点阴影颜色25   26   CGContextSetFillColorWithColor(context, dotColor); //设置填充色27   CGContextSetShadowWithColor(context, CGSizeMake(2.0, 2.0), 1, dotShadowColor); //设置阴影颜色;以阴影位置偏差为(2.0, 2.0)、模糊效果的 dotShadowColor 作为阴影颜色28   29   CGContextAddArc(context, 10.0, 10.0, 10.0, 0.0, radian(180.0), 1); //添加圆点;以居中点为(10.0, 10.0)、半径为10.0、顺时针画0.0到180.0弧度的圆点(即为上半圆),注意0.0弧度为水平线左边位置开始30   CGContextFillPath(context);31   32   CGContextAddArc(context, 30.0, 20.0, 10.0, 0.0, radian(180.0), 0); //添加圆点;以居中点为(30.0, 20.0)、半径为10.0、逆时针画0.0到180.0弧度的圆点(即为下半圆),注意0.0弧度为水平线左边位置开始33   CGContextFillPath(context);34 }35 36 /**37  * 绘画内容图层38  *39  * @param layer  当前图层40  * @param context 上下文41 */42 - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {43   //图层背景颜色44   CGColorRef backgroundColor = [UIColor lightGrayColor].CGColor;45   CGContextSetFillColorWithColor(context, backgroundColor);46   CGContextFillRect(context, layer.bounds);47   48   static const CGPatternCallbacks callbacks = { 0, &drawColoredPattern, NULL };49   //绘画连续的单元格,每个单元格的内容由 drawColoredPattern 方法决定50   CGContextSaveGState(context);51   CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);52   CGContextSetFillColorSpace(context, patternSpace);53   CGColorSpaceRelease(patternSpace);54   55   CGPatternRef pattern = CGPatternCreate(NULL,56                       layer.bounds,57                       CGAffineTransformIdentity,58                      40.0, //单元格的宽度59                      40.0, //单元格的高度60                       kCGPatternTilingConstantSpacing,61                      true,62                      &callbacks);63   CGFloat alpha = 1.0; //着色模式内容的不透明度64   CGContextSetFillPattern(context, pattern, &alpha);65   CGPatternRelease(pattern);66   CGContextFillRect(context, layer.bounds);67   CGContextRestoreGState(context);68 }69 70 @end

ViewController.h

1 #import <UIKit/UIKit.h>2 #import "KMLayerDelegate.h"3 4 @interface ViewController : UIViewController5 @property (strong, nonatomic) KMLayerDelegate *layerDelegate;6 7 @end

ViewController.m

 1 #import "ViewController.h" 2  3 static const CGFloat cornerRadius = 10.0; 4 @interface ViewController () 5 - (void)createShadowCornerImage:(UIImage *)image withRootLayer:(CALayer *)rootLayer; 6 - (void)createCustomDrawingLayer:(CALayer *)rootLayer; 7 - (void)layoutUI; 8 @end 9 10 @implementation ViewController11 12 - (void)viewDidLoad {13   [super viewDidLoad];14   15   [self layoutUI];16 }17 18 - (void)didReceiveMemoryWarning {19   [super didReceiveMemoryWarning];20   // Dispose of any resources that can be recreated.21 }22 23 /**24  * 创建带阴影效果的圆角图片图层25  *26  * @param image   图片27  * @param rootLayer 根图层28 */29 - (void)createShadowCornerImage:(UIImage *)image withRootLayer:(CALayer *)rootLayer {30   //子图层(图片的阴影图层)31   CALayer *subLayer = [CALayer layer];32   subLayer.frame = CGRectMake(40.0, 40.0, 240.0, 240.0);33   subLayer.backgroundColor = [UIColor lightGrayColor].CGColor;34   subLayer.cornerRadius = cornerRadius;35   subLayer.borderColor = [UIColor blackColor].CGColor;36   subLayer.borderWidth = 2.0;37   subLayer.shadowColor = [UIColor blackColor].CGColor; //设置阴影颜色38   subLayer.shadowOpacity = 0.7; //设置阴影不透明度39   subLayer.shadowOffset = CGSizeMake(4.0, 3.0); //设置阴影位置偏差40   subLayer.shadowRadius = 5.0; //设置阴影圆角半径41   [rootLayer addSublayer:subLayer];42   43   //子图层的子图层(图片的内容图层)44   CALayer *imageLayer = [CALayer layer];45   imageLayer.frame = subLayer.bounds;46   imageLayer.contents = (id)image.CGImage;47   imageLayer.masksToBounds = YES; //设置标示剪切界限;内容图层需设置为 YES,才能有圆角效果48   imageLayer.cornerRadius = cornerRadius;49   CGAffineTransform affineTransform = CGAffineTransformConcat(CGAffineTransformMakeScale(0.8, 0.8), CGAffineTransformMakeRotation(M_PI_4/9)); //合并缩放和旋转效果;以0.8比例居中缩放,以45度/9=5度的角度顺时针旋转50   imageLayer.affineTransform = affineTransform;51   [subLayer addSublayer:imageLayer];52 }53 54 /**55  * 创建自定义绘画内容图层56  *57  * @param rootLayer 根图层58 */59 - (void)createCustomDrawingLayer:(CALayer *)rootLayer {60   CALayer *drawingLayer = [CALayer layer];61   drawingLayer.frame = CGRectMake(40.0, 320.0, 240.0, 240.0);62   drawingLayer.backgroundColor = [UIColor orangeColor].CGColor; //背景颜色会被内容图层遮住,所以最终呈现的以内容图层为准63   drawingLayer.masksToBounds = YES; //设置标示剪切界限;内容图层需设置为 YES,才能有圆角效果64   drawingLayer.cornerRadius = cornerRadius;65   drawingLayer.borderColor = [UIColor blackColor].CGColor;66   drawingLayer.borderWidth = 2.0;67   drawingLayer.shadowColor = [UIColor darkGrayColor].CGColor; //设置阴影颜色68   drawingLayer.shadowOpacity = 0.8; //设置阴影不透明度69   drawingLayer.shadowOffset = CGSizeMake(8.0, 6.0); //设置阴影位置偏差70   drawingLayer.shadowRadius = 5.0; //设置阴影圆角半径71   72   _layerDelegate = [KMLayerDelegate new];73   drawingLayer.delegate = _layerDelegate;74   [drawingLayer setNeedsDisplay]; //这里必须调用方法 setNeedsDisplay,才会触发委托代理方法 drawLayer:75   [rootLayer addSublayer:drawingLayer];76 }77 78 - (void)layoutUI {79   //根图层80   CALayer *rootLayer = self.view.layer;81   rootLayer.backgroundColor = [UIColor cyanColor].CGColor;82   rootLayer.cornerRadius = 40.0;83   84   [self createShadowCornerImage:[UIImage imageNamed:@"Emoticon_tusiji_icon2"]85           withRootLayer:rootLayer];86   [self createCustomDrawingLayer:rootLayer];87 }88 89 @end