将来的自己,会感谢现在努力的自己!

0%

iOS-画虚线的几种方式

发表于 更新于 分类于
本文字数： 5.2k 阅读时长 ≈ 5 分钟
画虚线的几种方式

一、重写drawRect方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 - (void)drawRect:(CGRect)rect
{ 
	[super drawRect:rect];
	 CGContextRef currentContext = UIGraphicsGetCurrentContext(); 
	 //设置虚线颜色 
	 CGContextSetStrokeColorWithColor(currentContext, [UIColor BlackColor].CGColor); 
	 //设置虚线宽度 
	 CGContextSetLineWidth(currentContext, 1); 
	 //设置虚线绘制起点 
	 CGContextMoveToPoint(currentContext, 0, 0); 
	 //设置虚线绘制终点 
	 CGContextAddLineToPoint(currentContext, self.frame.origin.x + self.frame.size.width, 0); //设置虚线排列的宽度间隔:下面的arr中的数字表示先绘制3个点再绘制1个点 
	 CGFloat arr[] = {3,1}; 
	 //下面最后一个参数“2”代表排列的个数。 
	 CGContextSetLineDash(currentContext, 0, arr, 2); 
	 CGContextDrawPath(currentContext, kCGPathStroke); 
}

看着这些代码肯定有一部分人头疼，因为一般开发绘图部分用的比较少，特别是很少接触这些东西的人，甚至对绘图这部分的只是已经忘光了，所以在这里自己也脑补一下。以下来自转载
iOS的绘图操作是在UIView类的drawRect方法中完成的，所以如果我们要想在一个UIView中绘图，需要写一个扩展UIView 的类，并重写drawRect方法，在这里进行绘图操作，程序会自动调用此方法进行绘图。下面先说明一下绘图，比如，你想绘制一个方块，你需要写一个类来扩展UIView并在drawRect方法中填入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- (void)drawRect:(CGRect)rect { 
	// Drawing code. 
	//获得处理的上下文 
	CGContextRef context = UIGraphicsGetCurrentContext(); 
	//设置线条样式 
	CGContextSetLineCap(context, kCGLineCapSquare); 
	//设置线条粗细宽度 
	CGContextSetLineWidth(context, 1.0); 
	//设置颜色 
	CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0); 
	//开始一个起始路径 
	CGContextBeginPath(context); 
	//起始点设置为(0,0):注意这是上下文对应区域中的相对坐标 
	CGContextMoveToPoint(context, 0, 0); 
	//设置下一个坐标点 
	CGContextAddLineToPoint(context, 100, 100); 
	/设置下一个坐标点 
	CGContextAddLineToPoint(context, 0, 150); 
	//设置下一个坐标点 CGContextAddLineToPoint(context, 50, 180); 
	//连接上面定义的坐标点 
	CGContextStrokePath(context); 
}

再说明一下重绘，重绘操作仍然在drawRect方法中完成，但是苹果不建议直接调用drawRect方法，当然如果你强行直接调用此方法，当然是没有效果的。苹果要求我们调用UIView类中的setNeedsDisplay方法，则程序会自动调用drawRect方法进行重绘（调用setNeedsDisplay会自动调用drawRect）。
在UIView中,重写drawRect: (CGRect)aRect方法,可以自己定义想要画的图案.且此方法一般情况下只会画一次.也就是说这个drawRect方法一般情况下只会被掉用一次。当某些情况下想要手动重画这个View,只需要掉用**[self setNeedsDisplay]**方法即可.
drawRect的执行顺序及注意
drawRect调是在Controller->loadView, Controller->viewDidLoad 两方法之后掉用的.
如果在UIView初始化时没有设置rect大小，将直接导致drawRect不被自动调用。
该方法在调用sizeThatFits后被调用，所以可以先调用sizeToFit计算出size。然后系统自动调用drawRect:方法。
通过设置contentMode属性值为UIViewContentModeRedraw。那么将在每次设置或更改frame的时候自动调用drawRect:。
直接调用setNeedsDisplay，或者setNeedsDisplayInRect:触发drawRect:，但是有个前提条件是rect不能为0.

以上1,2推荐；而3,4不提倡
若使用UIView绘图，只能在drawRect：方法中获取相应的contextRef并绘图。如果在其他方法中获取将获取到一个invalidate的ref并且不能用于画图。drawRect：方法不能手动显示调用，必须通过调用setNeedsDisplay 或者 setNeedsDisplayInRect ，让系统自动调该方法。若使用calayer绘图，只能在drawInContext:中（类似鱼drawRect）绘制，或者在delegate中的相应方法绘制。同样也是调用setNeedDisplay等间接调用以上方法。若要实时画图，不能使用gestureRecognizer，只能使用touchbegan等方法来掉用setNeedsDisplay实时刷新屏幕转载地址：http://blog.csdn.net/fww330666557/article/details/8647608

二、通过UIImage的绘图方法来绘制

// 画虚线// 创建一个imageView 高度是你想要的虚线的高度 一般设为2
_lineImg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, 2)];
// 调用方法 返回的iamge就是虚线
_lineImg.image = [self drawLineByImageView:_lineImg];
// 添加到控制器的view上
[self.view addSubview:_lineImg];
// 返回虚线image的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- (UIImage *)drawLineByImageView:(UIImageView *)imageView
{ 
	UIGraphicsBeginImageContext(imageView.frame.size);
	//开始画线 划线的frame 
	[imageView.image drawInRect:CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height)]; 
	//设置线条终点形状 
	CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound); 
	// 5是每个虚线的长度 1是高度 
	float lengths[] = {5,1}; 
	CGContextRef line = UIGraphicsGetCurrentContext(); 
	// 设置颜色 
	CGContextSetStrokeColorWithColor(line, [UIColor colorWithWhite:0.408 alpha:1.000].CGColor); 
	CGContextSetLineDash(line, 0, lengths, 2); 
	//画虚线 
	CGContextMoveToPoint(line, 0.0, 2.0); 
	//开始画线 CGContextAddLineToPoint(line, kScreenWidth - 10, 2.0); 
	CGContextStrokePath(line);
	UIGraphicsGetImageFromCurrentImageContext()
	//返回的就是image
	return UIGraphicsGetImageFromCurrentImageContext(); 
}

三、通过CAShapeLayer方式绘制虚线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/** 
** lineView: 需要绘制成虚线的view 
** lineLength: 虚线的宽度 
** lineSpacing: 虚线的间距 
** lineColor: 虚线的颜色 
**/
+ (void)drawDashLine:(UIView *)lineView lineLength:(int)lineLength lineSpacing:(int)lineSpacing lineColor:(UIColor *)lineColor
{ 
	CAShapeLayer *shapeLayer = [CAShapeLayer layer]; 
	[shapeLayer setBounds:lineView.bounds]; 
	[shapeLayer setPosition:CGPointMake(CGRectGetWidth(lineView.frame) / 2, CGRectGetHeight(lineView.frame))];
	[shapeLayer setFillColor:[UIColor clearColor].CGColor]; 
	// 设置虚线颜色为blackColor 
	[shapeLayer setStrokeColor:lineColor.CGColor]; 
	// 设置虚线宽度 
	[shapeLayer setLineWidth:CGRectGetHeight(lineView.frame)]; 
	[shapeLayer setLineJoin:kCALineJoinRound]; 
	// 设置线宽，线间距 
	[shapeLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:lineLength], [NSNumber numberWithInt:lineSpacing], nil]]; 
	// 设置路径 CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, 0, 0);
	CGPathAddLineToPoint(path, NULL,CGRectGetWidth(lineView.frame), 0); 
	[shapeLayer setPath:path]; CGPathRelease(path); 
	// 把绘制好的虚线添加上来 
	[lineView.layer addSublayer:shapeLayer]; 
}

这部分代码，有一个注意点：就是position和anchorPoint的区别，这点有兴趣的可以去脑补一下。当然layer上的绘图，我也感觉自己很low了，因为形式没用过，所以基本上快忘光了，所以自己也需要花时间去脑补一下。链接：http://wonderffee.github.io/blog/2013/10/13/understand-anchorpoint-and-position/

四、图片平铺（简单暴力）

1
2
3
UIImageView *imgDashLineView =[[UIImageView alloc] initWithFrame:CGRectMake(15, 200, self.view.frame.size.width - 30, 1)];
[imgDashLineView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"xuxian.png"]]];
[self.view addSubview:imgDashLineView];