在iOS中使用Core Graphics绘制VU表

我正在尝试使用Core Graphics来绘制一个类似的图像：

我能画出主要的弧线，但我不能理解，如何划分弧线/在弧线上画出刻度？ 我目前的代码绘制弧是：

[path addArcWithCenter:point radius:radius startAngle:DEGREES_TO_RADIANS(specific_start_angle) endAngle:DEGREES_TO_RADIANS(specific_end_angle) clockwise:NO]; 

我尝试使用strokeWithBlendMode但我面临的问题与gradle或蜱的位置。

Answer 1

Teja的解决scheme对你来说可以很好地工作 ，但是它确实要求你计算你自己的gradle开始和结束点。

我build议你创build一个函数，让你在一个给定的弧度angular上画出刻度，计算出刻度的起点和终点，给定长度。

 static inline void drawGraduation(CGPoint center, CGFloat radius, CGFloat angle, CGFloat length, CGFloat width, CGColorRef color) { CGContextRef c = UIGraphicsGetCurrentContext(); CGFloat radius2 = radius+length; // The radius of the end points of the graduations CGPoint p1 = (CGPoint){cos(angle)*radius+center.x, sin(angle)*radius+center.y}; // the start point of the graduation CGPoint p2 = (CGPoint){cos(angle)*radius2+center.x, sin(angle)*radius2+center.y}; // the end point of the graduation CGContextMoveToPoint(c, p1.x, p1.y); CGContextAddLineToPoint(c, p2.x, p2.y); CGContextSetStrokeColorWithColor(c, color); CGContextSetLineWidth(c, width); CGContextStrokePath(c); } 

当你画出你的VU表的主刻度时，你可以在for循环中调用它（或者你想这样做）。 您也可以按给定的时间间隔轻松定制给定刻度的颜色，宽度和长度（例如，此代码每5个刻度给出一个较厚和较长的红线）。

 - (void)drawRect:(CGRect)rect { CGRect r = self.bounds; CGFloat startAngle = -M_PI*0.2; // start angle of the main arc CGFloat endAngle = -M_PI*0.8; // end angle of the main arc NSUInteger numberOfGraduations = 16; CGPoint center = (CGPoint){r.size.width*0.5, r.size.height*0.5}; // center of arc CGFloat radius = (r.size.width*0.5)-20; // radius of arc CGFloat maxGraduationWidth = 1.5; // the maximum graduation width CGFloat maxGraduationWidthAngle = maxGraduationWidth/radius; // the maximum graduation width angle (used to prevent the graduations from being stroked outside of the main arc) // draw graduations CGFloat deltaArc = (endAngle-startAngle+maxGraduationWidthAngle)/(numberOfGraduations-1); // the change in angle of the arc CGFloat startArc = startAngle-(maxGraduationWidthAngle*0.5); // the starting angle of the arc for (int i = 0; i < numberOfGraduations; i++) { if (i % 5 == 0) { drawGraduation(center, radius, startArc+(i*deltaArc), 14, 1.5, [UIColor redColor].CGColor); // red graduation every 5 graduations. } else { drawGraduation(center, radius, startArc+(i*deltaArc), 10, 1, [UIColor blackColor].CGColor); } } // draw main arc UIBezierPath* mainArc = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:NO]; [[UIColor blackColor] setStroke]; mainArc.lineWidth = 2; [mainArc stroke]; } 

---

产量

---

完整的项目： https ： //github.com/originaluser2/VU-Meter-Arc

Answer 2

你可以用破折号绘制贝塞尔path，像这样： ：

  //// Bezier Drawing UIBezierPath* bezierPath = [UIBezierPath bezierPath]; [bezierPath moveToPoint: CGPointMake(54.5, 62.5)]; [bezierPath addCurveToPoint: CGPointMake(121.5, 39.5) controlPoint1: CGPointMake(54.5, 62.5) controlPoint2: CGPointMake(87.5, 39.5)]; [bezierPath addCurveToPoint: CGPointMake(190.5, 62.5) controlPoint1: CGPointMake(155.5, 39.5) controlPoint2: CGPointMake(190.5, 62.5)]; [UIColor.blackColor setStroke]; bezierPath.lineWidth = 10; CGFloat bezierPattern[] = {24, 2}; [bezierPath setLineDash: bezierPattern count: 2 phase: 0]; [bezierPath stroke]; 

其他你可以绘制多个贝塞尔path，并绘制它类似于你想要的：

像这样的东西：

对于小行：

 UIBezierPath* bezier2Path = [UIBezierPath bezierPath]; [bezier2Path moveToPoint: CGPointMake(65, 45)]; [bezier2Path addLineToPoint: CGPointMake(75, 63)]; [UIColor.blackColor setStroke]; bezier2Path.lineWidth = 1.5; [bezier2Path stroke];