重点:
以自定义CALayer的方式实现绘图
利用坐标系缩放比例翻转图像
步骤:创建空应用、创建Controller、创见视图、创建自定义CALayer
- 在MainViewController中引入自定义视图,并实例化视图 ,添加到MainViewController。
- (void)viewDidLoad {
[super viewDidLoad];
MyView *myView = [[MyView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
[myView setBackgroundColor:[UIColor lightGrayColor]];
[self.view addSubview:myView];
}
2.在MyView自定义视图中,实例化CALayer , 设置颜色、位置、大小
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
NSLog(@"initView");
MyLayer *myLayer = [MyLayer layer];
[myLayer setBounds:self.bounds];
[myLayer setPosition:CGPointMake(100, 100)];
[myLayer setBackgroundColor:[UIColor redColor].CGColor];
[self.layer addSublayer:myLayer];
self.myLayer = myLayer;
[self.myLayer setNeedsDisplay];
}
return self;
}
注意:一定要调用[self.myLayer setNeedsDisplay];否则无法绘图。
3.在CALayer中绘制。
- (void)drawInContext:(CGContextRef)ctx
{
//来绘制图层
//提示:在形变坐标系前,记得保存坐标系,使用后再恢复坐标系。
CGContextSaveGState(ctx);
//绘制头像
//1> 可以利用 在绘图的时候,可以利用上下文的形变。
//2> 可以利用 形变属性的缩放实现图片的反转(1,-1)
//3> 可以利用平移恢复位置(向下平移坐标系)
//a.翻转
CGContextScaleCTM(ctx, 1.0, -2.0);
//b.平移
CGContextTranslateCTM(ctx, 0, -self.bounds.size.height);
UIImage *image = [UIImage imageNamed:@"image.jpg"];
CGContextDrawImage(ctx, CGRectMake(50, 50, 100, 100), image.CGImage);
CGContextRestoreGState(ctx);
//画青色的园
CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
CGContextSetRGBFillColor(ctx, 0.0, 1.0, 1.0, 1.0);
CGContextDrawPath(ctx, kCGPathFill);
NSLog(@"draw In context");
//画蓝色的园
CGContextAddEllipseInRect(ctx, CGRectMake(100, 100, 100, 100));
CGContextSetRGBFillColor(ctx, 1.0, 0.0, 1.0, 1.0);
CGContextDrawPath(ctx, kCGPathFill);
}
最后效果:
85E2FDC8-6A39-49CD-ADDD-A718F008056B.png图像默认是倒过来的。所以要旋转,平移之后将图片摆正。
注意:
1.如果使用自定义图层绘图时,uiview本身的DrawRect方法内的绘图结果将被layer的绘图结果覆盖。
2.如果使用CALayer绘图,就不要再写drawRect方法
网友评论