Core Graphics
Quartz 2D
所有的控件, 都是通过该方法将自身绘制出来的
- (void)drawRect:(CGRect)rect {
// Drawing code
}
以上方法只有自定义绘图的时候才重写这个方法
一个空实现会影响动画执行的性能
图形上下文 (方便一处绘制, 到底画)
在drawRect方法(本身就是设计来给你绘图的)当中, 系统已经为你创建好了可用的上下文环境
CGContextRef context = UIGraphicsGetCurrentContext();—>表示获得上下文
创建一个可变的路径
CGMutablePathRef mutablePath = CGPathCreateMutable();
在该可变路径中添加了一个矩形路径
CGPathAddRect(mutablePath, NULL, CGRectMake(100, 100, 100, 100));
将该可变路径添加到上下文
CGContextAddPath(context, mutablePath);
将路径绘制出来 draw (上下文负责)
Store | 描边, 将路径绘制出来 Fill | 填充, 将路径的封闭空间绘制出来
CGContextDrawPath(context, kCGPathStroke);
—>第一个参数是上下文 第二个是样式
其中样式
kCGPathFill, // 填充
kCGPathEOFill, // 奇偶填充 (奇数次的绘制, 会填充颜色, 偶数次的不会做操作)
kCGPathStroke, // 描边
kCGPathFillStroke, // 即填充又描边
kCGPathEOFillStroke // 奇偶的填充描边
CGPathRelease(mutablePath);
注意 由于是基于c语言的 需要管理内存 需要在释放掉
CGPathRelease(mutablePath);
属性
修改颜色, setStroker描边颜色
设置线宽 第一个参数是上下文
CGContextSetLineWidth(context, 50);
设置线段的顶点样式
CGContextSetLineCap(context, kCGLineCapRound);
设置两条线之间的连接点样式
CGContextSetLineJoin(context, kCGLineJoinRound);
阴影效果
CGContextSetShadow(context, CGSizeMake(50, 50), 10);
绘制虚线
第一个参数是上下文
第二个参数是起始位置距离
第三个参数是数组 需要传入虚线的长度和间隔长度
第四个参数是传入数组的长度
CGContextSetLineDash(con, 0, arr, 2);
刷新显示
不要直接调用drawRect方法
调用该方法 (需要显示, 重新绘制一次, 显示出来), 会间接的触发drawRect:
[self setNeedsDisplay];
绘制文字
[@"iloveu"drawInRect:CGRectMake(150, 150, 150, 150) withAttributes:nil ]; —>传入的是rect
[@"iloveu"drawInRect:CGRectMake(150, 150, 150, 150) withAttributes:nil ]; —>传入的是Point
[@"iloveu" drawInRect:CGRectMake(0, 200, rect.size.width, 400) withAttributes:attrDict]; —>设置文字坐标
直接在当前的图形上下文环境当中绘制字符串
不需要做绘制, 添加到上下文这些操作
写这句代码的地方, 必须要有一个图形上下文—>draw里有
最后一个参数可以配置文字的大小样式阴影等
需要传入一个字典
NSDictionary *attrDict = @{
// 设置文字的字体类型
NSFontAttributeName : [UIFont systemFontOfSize:24],
// 设置前景色 (就是文字的颜色)
NSForegroundColorAttributeName : [UIColor redColor],\
// 段落样式(设置文本居中)
NSParagraphStyleAttributeName : paragraph, ———————>1.1这个对象请看下方
NSBackgroundColorAttributeName : [UIColor blueColor],
// 设置阴影效果, 必须要配置`描边颜色`
NSShadowAttributeName : shadow,
// 描边颜色 (效果上等价于NSForegroundColorAttributeName)
NSStrokeColorAttributeName : [UIColor blueColor],
};
1.1// NSParagraphStyle不可修改属性, 使用其可变类型
NSMutableParagraphStyle *paragraph = [[NSMutableParagraphStyle alloc] init];
// 文本居中对齐
paragraph.alignment = NSTextAlignmentCenter;
绘制图片
[img drawInRect:rect];
[img drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];
[img drawAtPoint:CGPointMake(100, 100)];
[img drawAtPoint:CGPointMake(100, 100) blendMode:kCGBlendModeNormal alpha:1.0];
[img drawInRect:rect];
将图片绘制到指定的矩形范围内, 会根据情况来拉伸适应
将图片位伸到适应当前的Rect范围, 来填充整个Rect值
注意: 会直接绘制到当前的图形上下文当中 (当前必须有上下文环境)
[img drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];
blendMode 图像混合模式 (图像会被处理-带有特殊的效果)
alpha(opacity)透明度, RGB, RGBA, 指定图片是否包含Alpha通道
[img drawAtPoint:CGPointMake(100, 100)];
[img drawAtPoint:CGPointMake(100, 100) blendMode:kCGBlendModeNormal alpha:1.0];
以该点为左上角, 进行图片绘制
不会拉伸图片, 而是保持图片原本状态(size不会改变)
两个参数分别为kCGBlendModeNormal, 1.0
UIKit提供的快速方法 绘制矩形 其他图形可以自己找下
填充矩形
UIRectFill(CGRectMake(100, 100, 100, 100));
描边矩形
UIRectFill(CGRectMake(100, 100, 100, 100));
使用自定义创建的lable 可以实现文字逐渐变色 就和歌词一样
在.h中提供一个属性 float 重新这个属性的set方法 定时赋值的同时刷新页面显示
- (void)drawRect:(CGRect)rect
{
// 会文字全部绘制好
[super drawRect:rect];
/*------ 使用特定的混合模式, 将文字的颜色变一下 ------*/
[[UIColor blueColor] set];
UIRectFillUsingBlendMode(CGRectMake(0, 0, rect.size.width * _progress, rect.size.height), kCGBlendModeSourceIn);
}
- (void)setProgress:(float)progress
{
_progress = progress;
[self setNeedsDisplay];
}
贝塞尔路径
一般分为绘制和渲染两步
示例:
//绘制 第一个是绘制出描边矩形 第二个根据矩形更改弧度完成填充圆形 第三个是直接画出描边圆形
UIBezierPath *b=[UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 100, 100)];
UIBezierPath *c=[UIBezierPath bezierPathWithRoundedRect:CGRectMake(200, 200, 100, 100) cornerRadius:50];
UIBezierPath *d=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 300, 100, 100)];
//渲染
[b stroke];
[c fill];
[d stroke];
快速实例化贝塞尔曲线
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
绘制自定义路径
[bezierPath moveToPoint:CGPointMake(100, 100)];
添加直线
[bezierPath addLineToPoint:CGPointMake(100, 200)];
添加圆弧
[bezierPath addArcWithCenter:CGPointMake(100, 100) radius:100 startAngle:M_PI_2 endAngle:0 clockwise:NO];
路径关闭
[bezierPath closePath];
渲染路径
[bezierPath stroke];
截图方法
在drawRect方法之外, 需要自己额外的去创建一下上下文环境
1.在此额外的开辟一个图片的上下文环境 (开启|关闭)
UIGraphicsBeginImageContext(self.bounds.size);
2.将self(UIView)上的内容绘制(draw)到新上下文当中
将当前视图层级上的所有内容绘制到当前的上下文环境中 (必须要有上下文)
如果界面有最近的更新, 及时的渲染到上下文当中
[self drawViewHierarchyInRect:self.bounds afterScreenUpdates:YES];
- 从当前
上下文环境中, 导出一张图片 (上下文已经内容)
从当前的图片上下文环境中, 导出对应的图片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
保存到相册
将图片写入(保存)到用户的相册当中
* Selector方法, 在文档描述中已经提示, 参照着写就可以了, 保存结果的回调方法
* contextInfo: 可以传递给回调方法的可选参数
UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);
关闭已经开启的上下文
UIGraphicsEndImageContext();
上面保存相册需要用到的回调方法
保存图片到相册的回调方法
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
if (error) {
NSLog(@"写入出错: %@", error);
} else {
NSLog(@"我已经成功了!");
}
}
绘制扇形图
//中心点
CGPoint cen=CGPointMake(210, 154);
//半径
CGFloat banJin=MIN(self.bounds.size.height, self.bounds.size.width)*0.5;
//起始
CGFloat up=0;
//范围
CGFloat down=1.5*M_PI;
第一个参数是中心点
第二个参数是半径长度
第三个参数是起始位置
第四个参数是结束位置
第五个参数是顺时针逆时针
UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:cen radius:banJin startAngle:up endAngle:down clockwise:YES];
[path stroke];
保存图片到本机