iOS高级-QuartzCore框架-图形上下文栈、矩阵操作、裁剪、重绘(刷帧)

一、图形上下文栈
1.自定义一个MJView,继承自UIView
2.将默认View的Class设置为MJView
3.实现drawRect:方法
-(void)drawRect:(CGRect)rect
{
//1.获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

//将当前的ctx拷贝一份放到栈中
CGContextSaveGState(ctx);

//设置绘图状态
CGContextSetLineWidth(ctx,10);
[[UIColor redColor] set];
CGContextSetLineCap(ctx,kCGLineCapRound);

//第1根线
CGContextMoveToPoint(ctx,50,,50);
CGContextAddLineToPoint(ctx,120,190);
CGContextStrokePath(ctx);

//将栈顶的上下文出栈,替换当前的上下文(所以状态回到最初了)
CGContextRestoreGState(ctx);

//第2根线
CGContextMoveToPoint(ctx,200,,70);
CGContextAddLineToPoint(ctx,220,290);
CGContextStrokePath(ctx);
}

二、矩阵操作
1.自定义一个MJView,继承自UIView
2.拖一个View,将Class设置为MJView
3.实现drawRect:方法
-(void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();

//矩阵操作
CGContextRotateCTM(ctx,M_PI_4);
CGContextScaleCTM(ctx,0.5,,0.5);
CGContextTranslateCTM(ctx,0,50);

CGContextAddRect(ctx,CGRectMake(10,10,50,50));

CGContextAddEllipseInRect(ctx,CGRectMake(100,100,100,100));

CGContextMoveToPoint(ctx,100,100);
CGContextAddLineToPoint(ctx,200,200);

CGContextStrokePath(ctx);
}

三、裁剪
裁剪原理:先确定需要裁剪的大小,然后将图片放上去,超过范围的部分都不显示
1.自定义一个MJClipView,继承自UIView
2.将默认View的Class设置为MJClipView
3.实现drawRect:方法
-(void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
//1.画圆
CGContextAddEllipseInRect(ctx,CGRectMake(100,100,50,50));
//2.裁剪
CGContextClip(ctx);
CGContextFillPath(ctx);
//3.显示图片
UIImage *image = [UIImage imageNamed:@"me"];
[image drawAtPoint:CGPointMake(100,100)];

四、重绘(刷帧)
1.自定义一个MJView,继承自UIView,添加一条属性,为圆的半径
2.拖一个View,将Class设置为MJView
3.监听View(Outlet),然后拖一个滑动条并监听(Action)
4.实现drawRect:方法
//默认只会在第一次显示View的时候调用(只能由系统自动调用,不能手动调用)
-(void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddArc(ctx,125,125,self.radius,0,M_PI * 2,0);
CGContextFillPath(ctx);
}

5.在MJView.m中重写set方法(这样通过点语法可以直接绘制)
-(void)setRadius:(float)radius
{
_radius = radius;
//重绘(这个方法内部会重新调用drawRect:方法进行绘制)
[self setNeedsDisplay];
}

5.实现滑动条的方法
-(IBAction)sizeChange:(UISlider *)sender{
self.cirecleView.radius = sender.value;
}

时间: 2024-10-11 00:27:02

iOS高级-QuartzCore框架-图形上下文栈、矩阵操作、裁剪、重绘(刷帧)的相关文章

Quartz2d 画饼状图 图形上下文栈 矩阵操作 裁剪圆角图片

画饼状图 - (void)drawRect:(CGRect)rect { // Drawing code // 需求:根据sections的数据,绘制多个扇形 // 1.获取上下文(Layer Graphics Context) CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.根据sections的个数,计算扇形的起始和结束位置来画扇形 NSInteger count = self.sections.count; // 如果没有数据,

Quartz 2D 图形上下文栈 矩阵 裁剪

Quartz 2D 图形上下文栈  矩阵 1 // 2 // DJVIew.m 3 // 图形上下文栈 4 // 5 // Created by zjj on 15/6/30. 6 // Copyright (c) 2015年 zjj. All rights reserved. 7 // 8 9 #import "DJVIew.h" 10 11 @implementation DJVIew 12 13 - (void)drawRect:(CGRect)rect 14 { 15 CGCo

图形上下文的矩阵操作(平移-缩放-旋转)

图形上下文的矩阵操作(旋转.缩放和平移) CGContextRotateCTM:图形上下文旋转,以上下文的原点(左上角)为基准 CGContextScaleCTM:图形上下文的缩放,以上下文的原点(左上角)为基准 CGContextTranslateCTM:图形上下文的平移,以上下文的原(左上角)点为基准 注意:一定要在添加路径之前进行设置 下面贴出swift版代码: 1 override func draw(_ rect: CGRect) { 2 let context = UIGraphic

iOS高级-QuartzCore框架-2D绘图

一.理论知识什么是Quartz2D Quartz2D实例 Quartz2D在iOS开发中的价值 图形上下文 自定义View drawRect:方法 绘图顺序(后盖前) Quartz2D须知 二.画线段1.新建一个类MJLineView,继承自UIView.2.拖一个UIView,Class为MJLineView3.在drawRect:方法里画图-(void)drawRect:(CGRect)rect{ //1.获得图形上下文 CGContextRef ctx = UIGraphicsGetCur

iOS高级-QuartzCore框架-CALayer图层

掌握CALayer的基本属性CALayer和UIView的关系position和anchorPoint的作用 CALayer CALayer的基本使用 CALayer的属性 //边框宽度(从Layer里面圈出一块出来作为边框)self.purpleView.layer.borderWidth = 10;//边框颜色self.purpleView.layer.borderColor = [UIColor redColor] .CGColor;//圆角self.purpleView.layer.co

iOS高级-QuartzCore框架-2D绘图-实例:小黄人

#define MJColor(r,g,b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0] 1.自定义一个MJHumanView,继承自UIView2.默认View(整一个View)的Class设置为MJHumanView3.实现drawRect:方法-(void)drawRect:(CGRect)rect{ //1.上下文 CGContextRef ctx = UIGraphicsGetCur

iOS高级-QuartzCore框架-CoreAnimation和UIView动画的使用

一.UIView封装的动画图层动画有2个致命的缺点:1>默认情况下会反弹.2>你所看到的动画都是假象,图层的属性一直都没有变过所以建议能用UIView就用UIView,实在不行再用图层.1.UIView的移动动画-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [UIView beginAnimations:nil context:nil]; //动画执行完毕后,会自动调用self的animateStop方法(用这

iOS开发UI篇—Quartz2D使用(图形上下文栈)

iOS开发UI篇-Quartz2D使用(图形上下文栈) 一.qurza2d是怎么将绘图信息和绘图的属性绘制到图形上下文中去的? 说明: 新建一个项目,自定义一个view类和storyboard关联后,重写该类中的drowrect方法. 画线的三个步骤: (1)获取上下文 (2)绘图 (3)渲染 要求:画两条单独的线 代码和效果图: 1 - (void)drawRect:(CGRect)rect 2 { 3 //获取上下文 4 CGContextRef ctx=UIGraphicsGetCurre

iOS开发UI篇—Quartz2D使用(图形上下文栈

转自:http://www.cnblogs.com/wendingding/p/3782489.html 一.qurza2d是怎么将绘图信息和绘图的属性绘制到图形上下文中去的? 说明: 新建一个项目,自定义一个view类和storyboard关联后,重写该类中的drowrect方法. 画线的三个步骤: (1)获取上下文 (2)绘图 (3)渲染 要求:画两条单独的线 代码和效果图: 1 - (void)drawRect:(CGRect)rect 2 { 3 //获取上下文 4 CGContextR