一直想让自己每天都能进步,但是学习这个事情一直都无法坚持,只有自己感觉到了紧迫感,才会敲起代码,研究自己以前没接触过的知识,写博客的目的就是希望能够和更多的朋友一起讨论,促进交流,共同进步!!!
Quartz2D的API是纯C语言的,它是一个二维绘图引擎,同时支持iOS和Mac系统。Quartz2D的API来自于Core Graphics
框架,数据类型和函数基本都以CG作为前缀:CGContextRef
、CGPathRef
等。实际开发中UIKit
框架能够帮我们完成大部分UI,但是有些UI比较复杂,普通的UIView无法满足我们的开发需要,这是就可以利用Quartz2D
技术画出我们想要的控件。
首先我们需要知道,- (void)drawRect:(CGRect)rect
方法是在什么时候调用:
我们发现该方法是在视图即将展示的时候调用的,在这个方法中可以获取到上下文,将试图绘制到View上,其实每一个View内部都有一个layer
属性,这个方法中就可以了取得一个layer,所以我们绘制的东西其实是绘制到View的layer上,试图之所以能够显示东西,就是因为他的内部有一个layer
所以之所以实现drawRect:方法,是因为,在这个方法当中可以获取到图形上下文,之后,才会View才会展示出来
- (void)drawRect:(CGRect)rect
的调用时机:
setNeedsDisplay
或者setNeedsDisplayInRect:
时绘制好的图形会保存到图像上下文中去,图像上下文中的绘制的图像又会显示在我们指定的输出目标当中
Quartz2D提供的几种上下文类型:
代码示例:
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, 10, 10);
CGContextAddLineToPoint(ctx, 100, 100);
CGContextStrokePath(ctx); // CGContextFillPath(ctx);
将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”,先进后出)
void CGContextSaveGState(CGContextRef c)
将栈顶的上下文出栈,替换掉当前的上下文
void CGContextRestoreGState(CGContextRef c)
了解了Quartz2D
的基本知识后,我们就可以运用这些知识,进行一些综合的练习.
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self addGestureRecognizer:pan];
实现方法:
- (void)pan:(UIPanGestureRecognizer *)pan{
// 获取当前位置所在点
CGPoint curP = [pan locationInView:self];
// 笔尖代码(这段代码可以去掉,主要是加了个笔尖,完善功能,提升用户体验)
{
//获取偏移量
//获取的偏移量是相对于最原始的点
CGPoint transP = [pan translationInView:self.pointView];
[self.pointView setAlpha:1.f];
CGFloat pointW = self.lineWidth + 5;
CGPoint pointP = CGPointMake(curP.x - pointW / 2, curP.y - pointW / 2);
[self.pointView setFrame:(CGRect){pointP, self.lineWidth + 5, self.lineWidth + 5}];
[self.pointView.layer setCornerRadius:self.pointView.bounds.size.width / 2];
[self.pointView.layer setBorderWidth:1.f];
[self.pointView.layer setBorderColor:self.lineColor.CGColor];
self.pointView.transform = CGAffineTransformTranslate(self.pointView.transform, transP.x, transP.y);
//清0操作(不让偏移量进行累加,获取的是相对于上一次的值,每一次走的值.)
[pan setTranslation:CGPointMake(0, 0) inView:self.pointView];
}
if (pan.state == UIGestureRecognizerStateBegan) {
ZJBezierPath *path = [ZJBezierPath bezierPath];
path.lineWidth = self.lineWidth;
path.lineJoinStyle = kCGLineJoinRound;
path.lineCapStyle = kCGLineCapRound;
path.lineColor = self.lineColor; // //颜色必须得要在drawRect方法当中进行绘制 继承系统类,添加属性我们自己的东西.
self.path = path;
//设置路径的起点
[self.path moveToPoint:curP];
[self.pathArray addObject:path];
} else if (pan.state == UIGestureRecognizerStateChanged){
//添加一根线到当前手指所在的点
[self.path addLineToPoint:curP];
[self setNeedsDisplay];
} else if (pan.state == UIGestureRecognizerStateEnded){
[self.pointView setAlpha:0.f];
}
}
代码里都有详细注释,下面主要讲解一些属性的设置区别:
lineJoinStyle:有三种样式
主要是线条的交接处的样式
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,
kCGLineJoinRound,
kCGLineJoinBevel
};
注意观察线条的连接处
kCGLineJoinMiter:
kCGLineJoinRound:
kCGLineJoinBevel
- (void)drawRect:(CGRect)rect
方法- (void)drawRect:(CGRect)rect {
for (ZJBezierPath *path in self.pathArray) {
// 绘制路径
[path.lineColor set];
[path stroke];
}
我们发现我们并没有在该方法内部获取上下文、描述路径等操作就可以将路径绘制到view上去。重点看[path stroke]
方法,其实这个方法内部已经帮我们实现了绘制视图的几个步骤:
伪代码如下:
1. 获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
2. 描述路径
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 10, 10)];
3. 把路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
4. 把上下文的内容渲染到View的layer
CGContextStrokePath(ctx);