preface

Recently I wanted to write a “conversation bubble”, but I couldn’t find a suitable background image, so I need to draw it directly with UIBezierPath. During the use of before is not familiar with the arc of the relevant knowledge, so write this article for record.

The API is briefly

UIBezierPath draws arcs using the following methods:

- (void)addArcWithCenter:(CGPoint)center 
				  radius:(CGFloat)radius
			  startAngle:(CGFloat)startAngle 
			    endAngle:(CGFloat)endAngle 
			   clockwise:(BOOL)clockwise
Copy the code

Meanings of parameters in the method:

  • Center: the center of the circle
  • The radius: the radius
  • StartAngle: Start radian
  • EndAngle: Indicates the end radian
  • 5. 基 本 数 学 数 据 库

For the meanings of related parameters, see the following figure:

In fact, it’s easy to understand that to make an arc, you have to identify two points on the circle and choose a direction (clockwise or counterclockwise) to join them

Points. The point on the circle can be determined by determining the center, radius and Angle (or radian) of the circle.

Now, you kind of get the idea of how this API works, but startAngle, endAngle passes radians, if you don’t understand the table of radians

If so, you may not be able to use it.

The representation of radians

The radian is something you learned in high school, but just to review it.

There are actually two ways to describe a radian on a circle, one clockwise (positive) and one counterclockwise (negative). Please refer to the following illustrations and text description:

  • So if you go clockwise from zero PI, you’re going to have radians in the positive direction, which is a positive number
  • So if you start at zero PI and you go counterclockwise it’s going to be radians in the opposite direction, negative

Note: PI stands for π \ PI π

The following macros are provided by the system to facilitate the representation of radians at any point on the circle.

# define M_PI / * PI * 3.14159265358979323846264338327950288 / # define M_PI_2 1.57079632679489661923132169163975144 / * PI / 2 0.785398163397448309615660845819875721 / * * / # define M_PI_4 PI / 4 * /Copy the code

We practice

We’re going to draw the following graph using UIBezierPath.

We will focus on the arc drawing section at the back. To do this, follow these steps:

  • Determine the center of the circle
  • Radius determination
  • Determine the starting point and end point startAngle, endAngle

  • We can have the following Settings

    • StartAngle forM_PI 或 -M_PI
    • EndAngle for1.5 * M_PI 或 0.5 * M_PI

  • Determine the drawing direction

  • If you set clockwise to YES

The final version reference code is as follows:

CGFloat radius = 40; CGPoint startPoint = CGPointMake(50, 200); CGPoint endPoint = CGPointMake(150, 200); CGPoint centerPoint = CGPointMake(150 + radius, 200); UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:startPoint]; [path addLineToPoint:endPoint]; [path addArcWithCenter: centerPoint radius: the radius startAngle: M_PI endAngle: 1.5 * M_PI clockwise: NO]; CAShapeLayer *layer = [CAShapeLayer layer]; layer.path = path.CGPath; layer.fillColor = [UIColor clearColor].CGColor; layer.strokeColor = [UIColor blueColor].CGColor; [self.view.layer addSublayer:layer];Copy the code

Data collected

Due to the limited space of the article, I can only introduce some current work achievements and thoughts on a stop-stop basis. If you are interested in the underlying principles of iOS, architecture design, system construction and how to interview, you can also follow me to get the latest information and information related to the interview. If you have any comments and suggestions, welcome to leave me a message!

The bad place that writes welcomes everybody to point out, hope everybody leaves a message to discuss more, let us progress together!

Those who like iOS can pay attention to me and study together!!

Link: blog.csdn.net/weixin\_422…