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

效果如下:

KMLayerDelegate.h

1 #import <UIKit/UIKit.h>
2
3 @interface KMLayerDelegate : NSObject
4
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 : UIViewController
5 @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 ViewController
11
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
时间: 2024-10-18 04:57:27

CALayer 知识:创建带阴影效果的圆角图片图层和创建自定义绘画内容图层的相关文章

用xib和代码的方式创建带边框和圆角的按钮

一.通过xib快速设置圆角 利用User Defined Runtime Attributes 进行设置 身份检查器 详细步骤介绍 点击UI控件 点击 Xcode 右侧上方身份检查器(左起第三个按钮) 找到 Runtime Attributes 属性,通过Key Path 和 Value 进行设置 设置圆角需要到的Key Path: layer.cornerRadius ,注意该 key 对应 Value 的 type 应该设置为 String(设置圆角) keyPath值layer.masks

(二)创建带主键和约束的数据表

内容摘要 创建带主键和约束的表 创建带组合主键和外键的表 1. 创建带主键和约束的表 Student (学生表) CREATE TABLE Student ( sclass varchar(10) NOT NULL, --- 限制非空 snumb varchar(10) PRIMARY KEY, --- 设置为主键 sname varchar(40) NOT NULL, --- (下)设置默认值男,约束选项为男女 sgender varchar(4) DEFAULT '男' CONSTRAINT

二维码图片生成(扩展知识:创建带圆角效果的图片)

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 @interface ViewController : UIViewController 3 @property (strong, nonatomic) IBOutlet UIImageView *imgVQRCode; 4 5 @end ViewController.m 1 #import "ViewController.h" 2 #import "KMQRCo

Android -- 图片编辑:创建圆角图片

创建圆角图片的方式大同小异,最简单的就是 9.png 美工做出来的就是,这样的最省事直接设置即可. 第二种就是通过裁剪 这里的剪裁指的是根据原图我们自己生成一张新的bitmap,这个时候指定图片的目标区域为一个圆角局域.这种做法有一点需要生成一个新的bitmap,所以会消耗至少2倍的图片内存, 下面分析一下代码的含义: a.首先创建一个指定高宽的bitmap,作为输出的内容, b.然后创建一个相同大小的矩形,利用画布绘制时指定圆角角度,这样画布上就有了一个圆角矩形. c.最后就是设置画笔的剪裁方

用xml创建带圆角和阴影的按钮背景

效果如图 按钮布局文件 <Button android:layout_width="match_parent" android:layout_height="80dip" android:background="@drawable/hi" android:text="@string/click_button" android:textColor="#999" android:textSize=&quo

【Android】Android自定义带board的圆角控件

介绍 圆角控件常用于头像,按钮,图标等,用途十分广泛,而且常常配合board使用. 在IOS中,UIVIew的CALayer层已经提供了圆角和board的方法,所以圆角控件的制作非常简单,只需要类似以下简单代码即可实现: view.layer.cornerRadius = 20; view.layer.borderColor = [UIColor yellowColor].CGColor; view.layer.borderWidth = 10; view.clipsToBounds = YES

Android流行界面结构——Fragment通过ViewPager(带指示器)嵌套Fragment结构的创建方法详解

原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6287213.html 当前Android流行界面结构的一种--Fragment通过ViewPager嵌套Fragment结构目前非常常用,在本篇文章中, 我们一步一步将其创建出来,非常详细的让大家看到这个界面是如何实现的,下面我们开始吧. 首先我们看一下最终的效果动画,以便大家有个最初的印象. 本文章专注于功能的实现,并没有着重于界面的美观,所以大家看到的效果一般,UI效果需要大家进一步修改.

Android自定义ViewGroup(一)——带箭头的圆角矩形菜单

今天要做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽度.箭头

Android圆角图片和圆形图片实现总结

1. 概述 Android研发中经常会遇见圆角或者圆形图片的展示,但是系统中ImageView并不能直接支持,需要我们自己做一些处理,来实现圆角图片或者圆形图片,自己最近对这块的实现做了一下总结,看一下几种实现方法. 图层叠加,上层覆盖一层蒙版,遮挡图片,让图片展示出圆角或者圆形效果 重新绘制 BitmapShader Xfermode RoundedBitmapDrawable CardView,使用官方控件,自动裁剪,达到圆角或者圆形效果.(5.0以上系统) 第一种方法,很傻,不太优雅,不推