CALayer 知识:创建带阴影效果的圆角图片图层和创建自定义绘画内容图层
效果如下:
KMLayerDelegate.h
#import <UIKit/UIKit.h> @interface KMLayerDelegate : NSObject @end
KMLayerDelegate.m
#import "KMLayerDelegate.h" @implementation KMLayerDelegate /**
* 根据角度,获取对应的弧度
*
* @param degree 角度
*
* @return 对应的弧度
*/
static inline double radian(double degree) {
return degree * M_PI/;
} /**
* 绘画着色模式内容;绘画预定宽高大小的单元格,每个单元格包含两个半圆,分别为『左上角的上半圆』和『右下边的下半圆』
*
* @param info 信息
* @param context 上下文
*/
void drawColoredPattern(void *info, CGContextRef context) {
CGColorRef dotColor = [UIColor colorWithHue:0.0 saturation:0.0 brightness:0.0 alpha:0.8].CGColor; //圆点颜色;以色彩、饱和度、亮度和不透明度组合的颜色
CGColorRef dotShadowColor = [UIColor orangeColor].CGColor; //圆点阴影颜色 CGContextSetFillColorWithColor(context, dotColor); //设置填充色
CGContextSetShadowWithColor(context, CGSizeMake(2.0, 2.0), , dotShadowColor); //设置阴影颜色;以阴影位置偏差为(2.0, 2.0)、模糊效果的 dotShadowColor 作为阴影颜色 CGContextAddArc(context, 10.0, 10.0, 10.0, 0.0, radian(180.0), ); //添加圆点;以居中点为(10.0, 10.0)、半径为10.0、顺时针画0.0到180.0弧度的圆点(即为上半圆),注意0.0弧度为水平线左边位置开始
CGContextFillPath(context); CGContextAddArc(context, 30.0, 20.0, 10.0, 0.0, radian(180.0), ); //添加圆点;以居中点为(30.0, 20.0)、半径为10.0、逆时针画0.0到180.0弧度的圆点(即为下半圆),注意0.0弧度为水平线左边位置开始
CGContextFillPath(context);
} /**
* 绘画内容图层
*
* @param layer 当前图层
* @param context 上下文
*/
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {
//图层背景颜色
CGColorRef backgroundColor = [UIColor lightGrayColor].CGColor;
CGContextSetFillColorWithColor(context, backgroundColor);
CGContextFillRect(context, layer.bounds); static const CGPatternCallbacks callbacks = { , &drawColoredPattern, NULL };
//绘画连续的单元格,每个单元格的内容由 drawColoredPattern 方法决定
CGContextSaveGState(context);
CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);
CGContextSetFillColorSpace(context, patternSpace);
CGColorSpaceRelease(patternSpace); CGPatternRef pattern = CGPatternCreate(NULL,
layer.bounds,
CGAffineTransformIdentity,
40.0, //单元格的宽度
40.0, //单元格的高度
kCGPatternTilingConstantSpacing,
true,
&callbacks);
CGFloat alpha = 1.0; //着色模式内容的不透明度
CGContextSetFillPattern(context, pattern, &alpha);
CGPatternRelease(pattern);
CGContextFillRect(context, layer.bounds);
CGContextRestoreGState(context);
} @end
ViewController.h
//#import <UIKit/UIKit.h>
#import <QuartzCore/CALayer.h>
#import "KMLayerDelegate.h" @interface ViewController : UIViewController
@property (strong, nonatomic) KMLayerDelegate *layerDelegate; @end
ViewController.m
#import "ViewController.h" static CGFloat const kCornerRadius = 10.0;
static CGFloat const kWidthOfIcon = 120.0;
static CGFloat const kLineWidth = 5.0;
static CGFloat const kBaseNumber = ; ///< 24等分法 @interface ViewController ()
- (void)createShadowCornerImage:(UIImage *)image withRootLayer:(CALayer *)rootLayer;
- (void)createCustomDrawingLayer:(CALayer *)rootLayer;
- (void)createSuccessIconDrawingLayer:(CALayer *)rootLayer;
- (void)createWarningIconDrawingLayer:(CALayer *)rootLayer;
- (void)createErrorIconDrawingLayer:(CALayer *)rootLayer;
- (void)layoutUI;
@end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; [self layoutUI];
} - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} /**
* 创建带阴影效果的圆角图片图层
*
* @param image 图片
* @param rootLayer 根图层
*/
- (void)createShadowCornerImage:(UIImage *)image withRootLayer:(CALayer *)rootLayer {
// 子图层(图片的阴影图层)
CALayer *subLayer = [CALayer layer];
subLayer.frame = CGRectMake(20.0, 40.0, 150.0, 150.0);
subLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
subLayer.cornerRadius = kCornerRadius;
subLayer.borderColor = [UIColor blackColor].CGColor;
subLayer.borderWidth = 2.0;
subLayer.shadowColor = [UIColor blackColor].CGColor; // 设置阴影颜色
subLayer.shadowOpacity = 0.7; // 设置阴影不透明度
subLayer.shadowOffset = CGSizeMake(4.0, 3.0); // 设置阴影位置偏差
subLayer.shadowRadius = 5.0; // 设置阴影圆角半径
[rootLayer addSublayer:subLayer]; // 子图层的子图层(图片的内容图层)
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = subLayer.bounds;
imageLayer.contents = (id)image.CGImage;
imageLayer.masksToBounds = YES; // 设置标示剪切界限;内容图层需设置为 YES,才能有圆角效果
imageLayer.cornerRadius = kCornerRadius;
CGAffineTransform affineTransform = CGAffineTransformConcat(CGAffineTransformMakeScale(0.8, 0.8), CGAffineTransformMakeRotation(M_PI_4/)); // 合并缩放和旋转效果;以0.8比例居中缩放,以45度/9=5度的角度顺时针旋转
imageLayer.affineTransform = affineTransform;
[subLayer addSublayer:imageLayer];
} /**
* 创建自定义绘画内容图层(KMLayerDelegate)
*
* @param rootLayer 根图层
*/
- (void)createCustomDrawingLayer:(CALayer *)rootLayer {
CALayer *drawingLayer = [CALayer layer];
drawingLayer.frame = CGRectMake(200.0, 40.0, 150.0, 150.0);
drawingLayer.backgroundColor = [UIColor orangeColor].CGColor; // 背景颜色会被内容图层遮住,所以最终呈现的以内容图层为准
drawingLayer.masksToBounds = YES; // 设置标示剪切界限;内容图层需设置为 YES,才能有圆角效果
drawingLayer.cornerRadius = kCornerRadius;
drawingLayer.borderColor = [UIColor blackColor].CGColor;
drawingLayer.borderWidth = 2.0;
drawingLayer.shadowColor = [UIColor darkGrayColor].CGColor; // 设置阴影颜色
drawingLayer.shadowOpacity = 0.8; // 设置阴影不透明度
drawingLayer.shadowOffset = CGSizeMake(8.0, 6.0); // 设置阴影位置偏差
drawingLayer.shadowRadius = 5.0; // 设置阴影圆角半径 _layerDelegate = [KMLayerDelegate new];
drawingLayer.delegate = _layerDelegate;
[drawingLayer setNeedsDisplay]; // 这里必须调用方法 setNeedsDisplay,才会触发委托代理方法 drawLayer:
[rootLayer addSublayer:drawingLayer];
} /**
* 创建绿色成功图标内容图层
*
* @param rootLayer 根图层
*/
- (void)createSuccessIconDrawingLayer:(CALayer *)rootLayer {
// 成功图标颜色:绿色
UIColor *const color = [UIColor colorWithRed:0.000 green:1.000 blue:0.502 alpha:1.000]; // 贝塞尔曲线路径;开始画圆
UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0.0, 0.0, kWidthOfIcon, kWidthOfIcon)];
// 然后以三点形成「打勾」效果
[path moveToPoint:CGPointMake(kWidthOfIcon/kBaseNumber*, kWidthOfIcon/kBaseNumber*)];
CGPoint p1 = CGPointMake(kWidthOfIcon/kBaseNumber*, kWidthOfIcon/kBaseNumber*);
[path addLineToPoint:p1]; CGPoint p2 = CGPointMake(kWidthOfIcon/kBaseNumber*, kWidthOfIcon/kBaseNumber*);
[path addLineToPoint:p2]; // 子图层
CAShapeLayer *subLayer = [CAShapeLayer layer];
subLayer.frame = CGRectMake(125.0, 210.0, kWidthOfIcon, kWidthOfIcon);
subLayer.path = path.CGPath;
subLayer.lineWidth = kLineWidth; // 线条宽度
subLayer.strokeColor = color.CGColor; // 线条颜色
subLayer.fillColor = [UIColor clearColor].CGColor; //清除填充色
[rootLayer addSublayer:subLayer];
} /**
* 创建黄色警告图标内容图层
*
* @param rootLayer 根图层
*/
- (void)createWarningIconDrawingLayer:(CALayer *)rootLayer {
CGFloat centerOfWidth = (kWidthOfIcon - kLineWidth)/;
// 警告图标颜色:黄色
UIColor *const color = [UIColor colorWithRed:1.000 green:0.800 blue:0.400 alpha:1.000]; // 贝塞尔曲线路径;开始画圆
UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0.0, 0.0, kWidthOfIcon, kWidthOfIcon)];
// 然后画感叹号
[path moveToPoint:CGPointMake(centerOfWidth, kWidthOfIcon/kBaseNumber*)];
CGPoint p1 = CGPointMake(centerOfWidth, kWidthOfIcon/kBaseNumber*);
[path addLineToPoint:p1]; [path moveToPoint:CGPointMake(centerOfWidth, kWidthOfIcon/kBaseNumber*)];
[path addArcWithCenter:CGPointMake(centerOfWidth, kWidthOfIcon/kBaseNumber*) radius:3.0 startAngle: endAngle:M_PI* clockwise:YES]; // 子图层
CAShapeLayer *subLayer = [CAShapeLayer layer];
subLayer.frame = CGRectMake(125.0, 360.0, kWidthOfIcon, kWidthOfIcon);
subLayer.path = path.CGPath;
subLayer.lineWidth = kLineWidth; // 线条宽度
subLayer.strokeColor = color.CGColor; // 线条颜色
subLayer.fillColor = [UIColor clearColor].CGColor; //清除填充色
[rootLayer addSublayer:subLayer];
} /**
* 创建红色错误图标内容图层
*
* @param rootLayer 根图层
*/
- (void)createErrorIconDrawingLayer:(CALayer *)rootLayer {
CGFloat keyVal1 = kWidthOfIcon/kBaseNumber*;
CGFloat keyVal2 = kWidthOfIcon/kBaseNumber*;
// 失败图标颜色:红色
UIColor *const color = [UIColor colorWithRed:1.000 green:0.400 blue:0.400 alpha:1.000]; // 贝塞尔曲线路径;开始画圆
UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0.0, 0.0, kWidthOfIcon, kWidthOfIcon)];
// 然后画交叉号
CGPoint p1 = CGPointMake(keyVal1, keyVal1);
[path moveToPoint:p1]; CGPoint p2 = CGPointMake(keyVal2, keyVal2);
[path addLineToPoint:p2]; CGPoint p3 = CGPointMake(keyVal2, keyVal1);
[path moveToPoint:p3]; CGPoint p4 = CGPointMake(keyVal1, keyVal2);
[path addLineToPoint:p4]; // 子图层
CAShapeLayer *subLayer = [CAShapeLayer layer];
subLayer.frame = CGRectMake(125.0, 510.0, kWidthOfIcon, kWidthOfIcon);
subLayer.path = path.CGPath;
subLayer.lineWidth = kLineWidth; // 线条宽度
subLayer.strokeColor = color.CGColor; // 线条颜色
subLayer.fillColor = [UIColor clearColor].CGColor; //清除填充色
[rootLayer addSublayer:subLayer];
} - (void)layoutUI {
//根图层
CALayer *rootLayer = self.view.layer;
rootLayer.backgroundColor = [UIColor colorWithRed:0.769 green:0.940 blue:0.943 alpha:1.000].CGColor;
rootLayer.cornerRadius = 40.0; [self createShadowCornerImage:[UIImage imageNamed:@"Emoticon_tusiji_icon2"]
withRootLayer:rootLayer];
[self createCustomDrawingLayer:rootLayer];
[self createSuccessIconDrawingLayer:rootLayer];
[self createWarningIconDrawingLayer:rootLayer];
[self createErrorIconDrawingLayer:rootLayer];
} @end
CALayer 知识:创建带阴影效果的圆角图片图层和创建自定义绘画内容图层的更多相关文章
- 自定义view实现圆角图片
前两天想实现一个圆角图片的效果,通过网络搜索后找到一些答案.这里自己再记录一下,加深一下自己的认识和知识理解. 实现圆角图片的思路是自定义一个ImageView,然后通过Ondraw()重绘的功能,将 ...
- SQL语句(二)创建带主键和约束的数据表
内容摘要 创建带主键和约束的表 创建带组合主键和外键的表 1. 创建带主键和约束的表 Student (学生表) CREATE TABLE Student ( sclass ) NOT NULL, - ...
- 【Android】 图片编辑:创建圆角图片
创建圆角图片的方式大同小异,最简单的就是 9.png 美工做出来的就是.这种最省事直接设置就可以. 另外一种就是通过裁剪 这里的剪裁指的是依据原图我们自己生成一张新的bitmap,这个时候指定图片的目 ...
- Android图片加载框架最全解析(七),实现带进度的Glide图片加载功能
我们的Glide系列文章终于要进入收尾篇了.从我开始写这个系列的第一篇文章时,我就知道这会是一个很长的系列,只是没有想到竟然会写这么久. 在前面的六篇文章中,我们对Glide的方方面面都进行了学习,包 ...
- Android流行界面结构——Fragment通过ViewPager(带指示器)嵌套Fragment结构的创建方法详解
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6287213.html 当前Android流行界面结构的一种——Fragment通过ViewPage ...
- Android 圆形/圆角图片的方法
Android 圆形/圆角图片的方法 眼下网上有非常多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这样的结束也是Android开发必 ...
- 安卓图片载入之使用universalimageloader载入圆形圆角图片
前言 话说这universalimageloader载入图片对搞过2年安卓程序都是用烂了再熟悉只是了.就是安卓新手也是百度就会有一大堆东西出来,今天为什么这里还要讲使用universalimagelo ...
- RoundedBitmapDrawable生成圆角图片
Bitmap src = BitmapFactory.decodeResource(getResources(), imageId); //获取Bitmap图片 RoundedBitmapDrawab ...
- Android Xfermode 实战 实现圆形、圆角图片
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42094215,本文出自:[张鸿洋的博客] 1.概述 其实这篇本来准备Androi ...
随机推荐
- NOIP2013 花匠解题报告
//<NOIP2013> 花匠 /* 最优子结构性质,可以用动规.注意到存在30%的变态数据(1 ≤ n ≤ 100,000, 0 ≤ h_i ≤1,000,000),因此应当找到线性的算 ...
- C#高级编程9 第16章 错误和异常
C#高级编程9 第16章 错误和异常 了解这章可以学会如何处理系统异常以及错误信息. System.Exception类是.NET运行库抛出的异常,可以继承它定义自己的异常类. try块代码包含的代码 ...
- 使用 Docker 搭建 Tomcat 运行环境
转自: http://m.oschina.net/blog/616526, 版权归原作者所有. 1 Docker与虚拟机 2 搭建过程 2.1 准备宿主系统 准备一个 CentOS 7操作系统 ...
- Android开发中遇到的问题(一)——Android模拟器端口被占用问题的解决办法
一.问题描述 今天在Eclipse中运行Android项目时遇到"The connection to adb is down, and a severe error has occured& ...
- linux -- 查看磁盘空间的大小
Ubuntu 查看磁盘空间大小命令 df -h Df命令是linux系统以磁盘分区为单位查看文件系统,可以加上参数查看磁盘剩余空间信息, 命令格式: df -hl 显示格式为: 文件系统 容量 已 ...
- Learning to rank的讲解,单文档方法(Pointwise),文档对方法(Pairwise),文档列表方法(Listwise)
学习排序(Learning to Rank) LTR(Learning torank)学习排序是一种监督学习(SupervisedLearning)的排序方法.LTR已经被广泛应用到文本挖掘的很多领域 ...
- OAuth 2和JWT - 如何设计安全的API?
OAuth 2和JWT - 如何设计安全的API? Moakap译,原文 OAuth 2 VS JSON Web Tokens: How to secure an API 本文会详细描述两种通用的保证 ...
- centos7安装配置mysql5.6
1. 下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2. 安装mysql-co ...
- java.lang.IllegalStateException——好头疼
在我东,下下来一个项目总会出现启动不了的问题,这些问题往往在编译的时候发现不了,当你的服务器启动的时候,就是一片片的报错,有些问题可以通过异常的提示信息,判断出来哪里配置错了,但是也有些情况下,从异常 ...
- 2.翻译系列:为EF Code-First设置开发环境(EF 6 Code-First系列)
原文链接:http://www.entityframeworktutorial.net/code-first/setup-entity-framework-code-first-environment ...