一、简单初入门:
自定义的View类型如shapeView
必须重写
- (void)drawRect:(CGRect)rect
{
// Drawing code
drawTriangle();//画三角形
}
方法。
该方法只在自定义的view中有,在控制器中没有。如果想要在控制器中画图,则要将控制器的view的类型改为shapeView类型,
这样子创建出来的view就是我们自定义画出来的view。
下面在shapeView.m中开始画图,写完下面代码只要在drawRect方法上调用即可
/***画三角形*/
voiddrawTriangle(){
//1.获得上下文
CGContextRef cen =UIGraphicsGetCurrentContext();
//2.绘制原点
CGContextMoveToPoint(cen, 0, 0);
//3.开始画图
CGContextAddLineToPoint(cen, 100, 100);
CGContextAddLineToPoint(cen, 150, 40);
//4.封闭图形
CGContextClosePath(cen);
//5.渲染到view上
//CGContextStrokePath(cen);//这是是图形空心
CGContextFillPath(cen);//这是使图形实心
}
二、画圆,和圆弧
-(void)drawRect:(CGRect)rect
{
// Drawing code
//circle();
drawArc();
}
/**
*画个圆弧
CGContextAddArc(<#CGContextRefc#>, <#CGFloat x#>, <#CGFloat y#>, <#CGFloat radius#>,<#CGFloat startAngle#>, <#CGFloat endAngle#>, <#intclockwise#>)
CGContextRef:上下文。X,Y:为左上角的坐标。Radius:半径startAngle:开始的角度
endAngle:结束的角度clockwise:0为顺时针,1为逆时针。
*/
void drawArc(){
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddArc(ctx, 100, 100, 50, M_PI_2,M_PI * 2, 0);
CGContextStrokePath(ctx);
}
/**
*画圆
*/
void circle(){
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx,CGRectMake(0, 0, 100, 100));//因为只要确定了矩形框,圆或者是椭圆就确定了。
//CGContextSetLineWidth(ctx, 10);//设置线的宽度,一定要再渲染图片之前
CGContextStrokePath(ctx);
}
三、写文字和画图片
/**
*画图片
*/
void drawImage(){
UIImage * image = [UIImage imageNamed:@"me"];
[image drawAsPatternInRect:CGRectMake(0,0,200,200)];
NSString * str = @"wo hua d ";//图片上的水印效果。
[str drawInRect:CGRectMake(0, 180, 100, 50) withAttributes:nil];
}
/**
*画文字
*/
void drawText(){
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect cubeRect = CGRectMake(50, 50, 100, 100);
CGContextAddRect(ctx,cubeRect );
CGContextFillPath(ctx);
NSString * hehe=@"wo jiu hehe";
//[str drawAtPoint:CGPointZerowithAttributes:nil];//可以规定一个点
NSMutableDictionary * dic =[NSMutableDictionary dictionary];
// NSForegroundColorAttributeName :文字颜色
// NSFontAttributeName :字体
dic[NSFontAttributeName] = [UIFont systemFontOfSize:15];
dic[NSForegroundColorAttributeName] = [UIColor redColor];
[hehe drawInRect:cubeRect withAttributes:dic];//规则在字典上规定//可以规定一个区域
}
四、矩阵操作
就是可以对整个画图进行旋转,缩放,平移
-(void)drawRect:(CGRect)rect{
CGContextRef ctx =UIGraphicsGetCurrentContext();
//设置属性
CGContextSaveGState(ctx);//把当前的上下文存进栈中。保存上下文的状态。
CGContextTranslateCTM(ctx, 0, 200);
CGContextSetLineWidth(ctx, 12);
CGContextScaleCTM(ctx, 0.5, 0.5);
CGContextRotateCTM(ctx, M_PI*2);
//CGContextRotateCTM(ctx, M_PI_4 * 0.3);//到底是写什么?,应该是写角度,就是π
CGContextAddRect(ctx, CGRectMake(50, 50,100, 100));
CGContextAddEllipseInRect(ctx,CGRectMake(150, 150, 50, 50));
CGContextStrokePath(ctx);
//栈中的上下文出栈,给原来的ctx重新赋值,可以说事覆盖吧。
CGContextRestoreGState(ctx);
CGContextMoveToPoint(ctx, 150, 150);
CGContextAddLineToPoint(ctx, 300, 300);
CGContextStrokePath(ctx);
}
下面的例子只对正方形作矩阵操作,圆形和线不受影响。
五、裁剪图片
-(void)drawRect:(CGRect)rect{
CGContextRef ctx =UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
//1.首先定义一个圆,一个rect
CGContextAddEllipseInRect(ctx,CGRectMake(50, 50, 100, 100));
//2.设定裁剪
CGContextClip(ctx);
CGContextFillPath(ctx);//裁剪后,画图中会不显示任何东西,不要紧张,往规定的区域加上东西就可以显示出来了
//3.画图片
UIImage * hehe= [UIImage imageNamed:@"me"];
[hehe drawInRect:CGRectMake(50, 50, 100,100)];
//[hehe drawAtPoint:CGPointMake(50, 50)];
CGContextRestoreGState(ctx);//恢复状态后,就不会受裁剪的影响,不然只能在剪裁的框中才能显示
CGContextAddRect(ctx, CGRectMake(0, 0, 50,50));
CGContextFillPath(ctx);
}
六、重绘
这个东西比较麻烦一点。
在自定义.m文件中。
-(void)awakeFromNib{
self.rudi = 30;
}
-(void)setRudi:(float )rudi{
_rudi = rudi;
[self setNeedsDisplay];
////这个方法用于重新调用-(void)drawRect:(CGRect)rect方法。因为-(void)drawRect:(CGRect)rect{在初始化是只会调用一次,当需要改变所画的东西时边需要setNeedsDisplay来重绘。
}
-(void)drawRect:(CGRect)rect{
NSLog(@"the value is,%f",self.rudi);
CGContextRef ctx =UIGraphicsGetCurrentContext();
CGContextAddRect(ctx, CGRectMake(50, 50,self.rudi , self.rudi));
CGContextSetLineWidth(ctx, 12);
CGContextStrokePath(ctx);
}