利用CAShapeLayer在文字上画虚线(UILable举例)

今天看到朋友有个需求，是要在lab的文字下画虚线，感觉很有意思就用CAShapeLayer研究了下，来一起看看吧。

老样子直奔主题上代码：

[objc] view plaincopy

1. //

2. // ViewController.m

3. // DottedLineDemo

4. //

5. // Created by a111 on 16/3/16.

6. // Copyright © 2016年 司小文. All rights reserved.

7. //

8. import "ViewController.h"

9. @interface ViewController ()

10. @end

11. @implementation ViewController

12. • (void)viewDidLoad {

13. [super viewDidLoad];

14. self.view.backgroundColor = [UIColor blackColor];

15. [self makeDottedLine];

16. // Do any additional setup after loading the view, typically from a nib.

17. }

18. pragma mark 制作虚线

19. • (void)makeDottedLine{

20. //lab

21. NSString *str = @"此笙吥涣
    的博客:https://www.jianshu.com/u/f61a34028316";

22. float strFont = 14.;

23. CGRect labRect = [str boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:strFont]} context:nil];

24. UILabel *lab = [[UILabel alloc] initWithFrame:CGRectMake((self.view.frame.size.width-labRect.size.width)/2, 100, labRect.size.width,labRect.size.height)];

25. lab.textColor = [UIColor whiteColor];

26. lab.text = str;

27. lab.font = [UIFont systemFontOfSize:strFont];

28. [self.view addSubview:lab];

29. //layer

30. CAShapeLayer *shapeLayer = [CAShapeLayer layer];

31. [shapeLayer setBounds:lab.bounds];

32. [shapeLayer setPosition:lab.center];

33. [shapeLayer setFillColor:[[UIColor redColor] CGColor]];

34. //设置虚线的颜色 - 颜色请必须设置

35. [shapeLayer setStrokeColor:[[UIColor whiteColor] CGColor]];

36. //设置虚线的高度

37. [shapeLayer setLineWidth:1.0f];

38. //设置类型

39. [shapeLayer setLineJoin:kCALineJoinRound];

40. /*

41. 10.f=每条虚线的长度

42. 3.f=每两条线的之间的间距

43. */

44. [shapeLayer setLineDashPattern:

45. [NSArray arrayWithObjects:[NSNumber numberWithInt:10.f],

46. [NSNumber numberWithInt:3.f],nil]];

47. // Setup the path

48. CGMutablePathRef path1 = CGPathCreateMutable();

49. /*

50. 代表初始坐标的x，y

51. x:写-2,是为了视觉上，虚线比文字稍长一点。

52. y:要和下面的y一样。

53. */

54. CGPathMoveToPoint(path1, NULL,-2, lab.frame.size.height);

55. /*

56. 代表坐标的x，y

57. lab.frame.size.width+2：我觉得他代表的意思可以理解为线的长度。

58. lab.frame.size.height：要与上面的y大小一样，才能使平行的线，不然会画出斜线呦~

59. */

60. CGPathAddLineToPoint(path1, NULL, lab.frame.size.width+2,lab.frame.size.height);

61. //赋值给shapeLayer

62. [shapeLayer setPath:path1];

63. //清除

64. CGPathRelease(path1);

65. //可以把self改成任何你想要的UIView.

66. [[self.view layer] addSublayer:shapeLayer];

67. }

68. • (void)didReceiveMemoryWarning {

69. [super didReceiveMemoryWarning];

70. // Dispose of any resources that can be recreated.

71. }

72. @end

效果图：

image

感谢观看，学以致用更感谢。