BDFaceCycleProgressView.m 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. //
  2. // BDFaceCycleProgressView.m
  3. // 弧形进度条
  4. //
  5. // Created by 孙明喆 on 2020/5/12.
  6. // Copyright © 2020 Baidu. All rights reserved.
  7. //
  8. #import "BDFaceCycleProgressView.h"
  9. @interface BDFaceCycleProgressView ()
  10. @property (nonatomic, assign) CGRect fullRect;
  11. @property (nonatomic, assign) CGRect scaleRect;
  12. @property (nonatomic, assign) CGFloat currentLinePointY;
  13. @property (nonatomic, assign) CGFloat targetLinePointY;
  14. // 但前百分比,用于保存第一次显示时的动画效果
  15. @property (nonatomic, assign) CGFloat currentPercent;
  16. @end
  17. @implementation BDFaceCycleProgressView
  18. - (instancetype)initWithFrame:(CGRect)frame {
  19. self = [super initWithFrame:frame];
  20. if (self) {
  21. self.backgroundColor = [UIColor clearColor];
  22. self.fullRect = frame;
  23. [self initialize];
  24. }
  25. return self;
  26. }
  27. - (void)initialize {
  28. _percent = 0;
  29. _scaleCount = 60;
  30. _scaleDivisionsLength = 10;
  31. _scaleDivisionsWidth = 2;
  32. _lineBgColor = [UIColor colorWithRed:102 / 255.0 green:102 / 255.0 blue:102 / 255.0 alpha:1 / 1.0];
  33. _scaleColor = [UIColor colorWithRed:0 / 255.0 green:186 / 255.0 blue:242 / 255.0 alpha:1 / 1.0];
  34. [self initDrawingRects];
  35. }
  36. - (void)initDrawingRects {
  37. CGFloat offset = _scaleMargin;
  38. self.scaleRect = CGRectMake(offset,
  39. offset,
  40. self.fullRect.size.width - 2 * offset,
  41. self.fullRect.size.height - 2 * offset);
  42. [self setNeedsDisplay];
  43. }
  44. - (void)drawRect:(CGRect)rect {
  45. CGContextRef context = UIGraphicsGetCurrentContext();
  46. [self drawScale:context];
  47. [self drawProcessScale:context];
  48. }
  49. /**
  50. * 画比例尺
  51. *
  52. * @param context 全局context
  53. */
  54. - (void)drawScale:(CGContextRef)context {
  55. // 线的宽度
  56. CGContextSetLineWidth(context, _scaleDivisionsWidth);
  57. // ======================= 矩阵操作 ============================
  58. CGContextTranslateCTM(context, self.fullRect.size.width / 2, self.fullRect.size.width / 2);
  59. // 线框颜色
  60. CGContextSetStrokeColorWithColor(context, _lineBgColor.CGColor);
  61. // 2. 绘制一些图形
  62. for (int i = 0; i < _scaleCount; i++) {
  63. CGContextMoveToPoint(context, self.scaleRect.size.width / 2 - _scaleDivisionsLength, 0);
  64. CGContextAddLineToPoint(context, self.scaleRect.size.width / 2, 0);
  65. // CGContextScaleCTM(ctx, 0.5, 0.5);
  66. // 3. 渲染
  67. CGContextStrokePath(context);
  68. CGContextRotateCTM(context, 2 * M_PI / _scaleCount);
  69. }
  70. // 线框颜色
  71. CGContextSetStrokeColorWithColor(context, _lineBgColor.CGColor);
  72. CGContextSetLineWidth(context, 0.5);
  73. // CGContextAddArc (context, 0, 0, self.scaleRect.size.width/2 - _scaleDivisionsLength - 3, 0, M_PI* 2 , 0);
  74. CGContextStrokePath(context);
  75. CGContextTranslateCTM(context, -self.fullRect.size.width / 2, -self.fullRect.size.width / 2);
  76. }
  77. /**
  78. * 比例次进度
  79. *
  80. * @param context 全局context
  81. */
  82. - (void)drawProcessScale:(CGContextRef)context {
  83. // 线的宽度
  84. CGContextSetLineWidth(context, _scaleDivisionsWidth);
  85. // ======================= 矩阵操作 ============================
  86. CGContextTranslateCTM(context, self.fullRect.size.width / 2, self.fullRect.size.width / 2);
  87. CGContextRotateCTM(context, M_PI);
  88. // 线框颜色
  89. CGContextSetStrokeColorWithColor(context, _scaleColor.CGColor);
  90. int count = _scaleCount * self.currentPercent;
  91. CGFloat scaleAngle = 2 * M_PI / _scaleCount;
  92. // 2. 绘制一些图形
  93. for (int i = 0; i < count; i++) {
  94. CGContextMoveToPoint(context, 0, self.scaleRect.size.width / 2 - _scaleDivisionsLength);
  95. CGContextAddLineToPoint(context, 0, self.scaleRect.size.width / 2);
  96. // CGContextScaleCTM(ctx, 0.5, 0.5);
  97. // 3. 渲染
  98. CGContextStrokePath(context);
  99. CGContextRotateCTM(context, scaleAngle);
  100. }
  101. CGContextTranslateCTM(context, -self.fullRect.size.width / 2, -self.fullRect.size.width / 2);
  102. }
  103. - (void)setPercent:(CGFloat)percent {
  104. _percent = percent;
  105. self.currentPercent = percent;
  106. [self initDrawingRects];
  107. }
  108. @end