UI教程 - 绘图之UIBezierPath1.2:反转路径、虚线

噼里啪啦

1 - 示例代码:探究 bezierPathByReversingPath: 方法

 1 -(void)drawRect:(CGRect)rect{
 2     
 3     //随便画一个路径出来
 4     UIBezierPath *path = [UIBezierPath bezierPath];
 5     [path moveToPoint: CGPointMake(10, 60)];
 6     [path addLineToPoint: CGPointMake(80, 40)];
 7     [path addLineToPoint: CGPointMake( 40,  80)];
 8     [path addLineToPoint: CGPointMake(40, 40)];
 9     path.lineWidth = 3;
10     
11     //为这条路径制作一个反转路径
12     UIBezierPath *reversingPath = [path bezierPathByReversingPath];
13     reversingPath.lineWidth = 9;
14     
15     //为了避免两条路径混淆在一起, 我们为第一条路径做一个位移
16     CGAffineTransform transform = CGAffineTransformMakeTranslation(200, 0);
17     [path applyTransform: transform];
18 
19 //    //重点来啦~~~
20 //    [path addLineToPoint: CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)];
21 //    [reversingPath addLineToPoint: CGPointMake(self.frame.size.width*0.5, self.frame.size.height*0.5)];
22 //    //~~~~~
23     
24     //设置颜色, 并绘制路径
25     [[UIColor redColor] set];
26     [path stroke];
27     
28     [[UIColor greenColor] set];
29     [reversingPath stroke];
30 
31 }

运行效果:屏蔽『重点来啦~~~~』行代码 VS 解除屏蔽

UI教程 - 绘图之UIBezierPath1.2:反转路径、虚线        UI教程 - 绘图之UIBezierPath1.2:反转路径、虚线

注: - 这个方法并不会去修改一条路径的形状, 仅仅是改变了绘制路径的方向

2 - 示例代码:setLineDash

 1 -(void)drawRect:(CGRect)rect{
 2 
 3     //路径0
 4     UIBezierPath *path0 = [UIBezierPath bezierPath];
 5     [path0 moveToPoint: CGPointMake(80, 40)];
 6     [path0 addLineToPoint: CGPointMake(self.frame.size.width - 40, 40)];
 7     path0.lineWidth = 2;
 8     
 9     //路径1
10     UIBezierPath *path1 = [UIBezierPath bezierPath];
11     [path1 moveToPoint: CGPointMake(80, 80)];
12     [path1 addLineToPoint: CGPointMake(self.frame.size.width - 40, 80)];
13     path1.lineWidth = 2;
14     
15     //路径2
16     UIBezierPath *path2 = [UIBezierPath bezierPath];
17     [path2 moveToPoint: CGPointMake(80, 120)];
18     [path2 addLineToPoint: CGPointMake(self.frame.size.width - 40, 120)];
19     path2.lineWidth = 2;
20     
21     //分别配置3条路径虚线的规格
22     CGFloat dashLineConfig[] = {8.0, 4.0};
23     [path0 setLineDash: dashLineConfig
24                 count: 2
25                 phase: 0];
26     
27     
28     CGFloat dashLineConfig1[] = {8.0, 4.0, 16.0, 8.0};
29     [path1 setLineDash: dashLineConfig1
30                  count: 4
31                  phase: 0];
32     
33     
34     CGFloat dashLineConfig2[] = {8.0, 4.0, 16.0, 8.0};
35     [path2 setLineDash: dashLineConfig2
36                  count: 4
37                  phase: 12];
38     
39     // 绘制
40     [[UIColor orangeColor] set];
41     [path0 stroke];
42     [path1 stroke];
43     [path2 stroke];
44     
45 }

代码分析:

UI教程 - 绘图之UIBezierPath1.2:反转路径、虚线