Today there is a triangle graphic in the UI design, but also specially cut it for me. Think I want to download the image, drag it to the project, and write a UIImageView control. I prefer to draw two lines

1.CAShapeLayer

CAShapeLayer, its parent is CALayer, and the nice thing about it is that it has a key property Path, and with Path, it can associate with UIBezierPath.

CAShapeLayer belongs to the CoreAnimation framework, which uses GPU to render graphics to save performance. Animation rendering is submitted directly to the phone’s GPU without consuming memory.

So a lot of times, we don’t even have to DrawRect, but we can draw graphs. DrawRect occupies CPU and high performance.

Here’s a list of the properties that CAShapeLayer uses.

  • Path: the path of the shape of the image, UIBezierPath is drawn and assigned to it.

  • FillColor: image fillColor, similar to backgroundColor.

  • StrokeColor: The color of the border, similar to borderColor.

  • StrokeStart,strokeEnd: The start and end of the edge. Generally, we can use CABasicAnimation to animate the animation.

  • LineWidth: The width of the edge, similar to borderWidth.

  • LineCap: Edge end style, Round for circular end and Square for Square end.

  • LineJoin: indicates the Round inflection point

2.UIBezierPath

UIBezierPath is for drawing all kinds of simple shapes, CAShapeLayer is for rendering the drawn paths.

Let’s start with a list of common methods.

  • MoveToPoint: the method called at the beginning of the line. Or the starting point.

  • AddLineToPoint: Adds a line.

  • AddArcWithCenter: Adds an arc

  • AddQuadCurveToPoint: Add a curve

  • AddCurveToPoint: Adds a two-segment curve

Some of them can draw graphics when they’re initialized.

  • BezierPathWithOvalInRect: Draw an ellipse

  • BezierPathWithRect: Draw a rectangle

  • BezierPathWithRoundedRect: draw a rounded rectangle

  • BezierPathWithRoundedRect: byRoundingCorners: a rounded rectangle

  • BezierPathWithArcCenter: Draw an arc

  • BezierPathWithCGPath: Adds a path

With this, we can draw lines, rectangles, ellipses and so on. And then there are the combinations. So let’s show you what a UIBezierPath can do with a CAShapeLayer.

2.1. Draw triangles

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 400)]; view.backgroundColor = [UIColor blueColor]; [self.view addSubview:view]; UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(200, 100)]; [path addLineToPoint:CGPointMake(300, 200)]; [path addLineToPoint:CGPointMake(100, 200)]; [path closePath]; CAShapeLayer *lineLayer = [CAShapeLayer layer]; LineLayer. Our lineWidth = 3.0; lineLayer.strokeColor = [UIColor redColor].CGColor; lineLayer.path = path.CGPath; lineLayer.fillColor = [UIColor yellowColor].CGColor; [view.layer addSublayer:lineLayer];Copy the code

2.2. Painting fan

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 400)]; view.backgroundColor = [UIColor blueColor]; [self.view addSubview:view]; UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 50) RADIUS :150 startAngle:1.25 * M_PI endAngle:1.75 * M_PI 已 经 济 :YES]; [path addLineToPoint:CGPointMake(200, 200)]; [path closePath]; CAShapeLayer *lineLayer = [CAShapeLayer layer]; LineLayer. Our lineWidth = 3.0; lineLayer.strokeColor = [UIColor redColor].CGColor; lineLayer.path = path.CGPath; lineLayer.fillColor = [UIColor yellowColor].CGColor; lineLayer.lineCap = kCALineCapRound; lineLayer.lineJoin = kCALineJoinRound; [view.layer addSublayer:lineLayer];Copy the code

For this method.

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 50) RADIUS :150 startAngle:1.25 * M_PI endAngle:1.75 * M_PI 已 经 济 :YES];

So let’s just talk about it briefly

Well, it’s just a graph, and the first CGPointMake(200, 200) refers to the center point. Radius is the rounded corner size.

StartAngle is the beginning Angle of a circle, endAngle is the ending Angle, which is clockwise.

2.3. Draw a conic

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 400)]; view.backgroundColor = [UIColor blueColor]; [self.view addSubview:view]; UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(50, 225)]; [path addQuadCurveToPoint:CGPointMake(150, 200) controlPoint:CGPointMake(75, 100)]; [path addQuadCurveToPoint:CGPointMake(250, 175) controlPoint:CGPointMake(225, 300)]; [path closePath]; CAShapeLayer *lineLayer = [CAShapeLayer layer]; LineLayer. Our lineWidth = 3.0; lineLayer.strokeColor = [UIColor redColor].CGColor; lineLayer.path = path.CGPath; lineLayer.fillColor = [UIColor yellowColor].CGColor; lineLayer.lineCap = kCALineCapRound; lineLayer.lineJoin = kCALineJoinRound; [view.layer addSublayer:lineLayer];Copy the code

The graph is a little ugly, here is mainly to say the control point.

The position of the control points will change the shape of the arc, similar to the figure above.

2.4. Draw a rectangle with a rounded corner

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 400)]; view.backgroundColor = [UIColor blueColor]; [self.view addSubview:view]; UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 150) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)]; CAShapeLayer *lineLayer = [CAShapeLayer layer]; LineLayer. Our lineWidth = 3.0; lineLayer.strokeColor = [UIColor redColor].CGColor; lineLayer.path = path.CGPath; lineLayer.fillColor = [UIColor yellowColor].CGColor; lineLayer.lineCap = kCALineCapRound; lineLayer.lineJoin = kCALineJoinRound; [view.layer addSublayer:lineLayer];Copy the code

2.5. Combine graphics

Finally, let’s take a look at the patterns that were drawn in previous projects.

CGSize size = self.view.frame.size; CGFloat height = 80; UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, size.height - height -34, size.width, height)]; [self.view addSubview:view]; UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, 30)]; [path addLineToPoint:CGPointMake(0, height)]; [path addLineToPoint:CGPointMake(size.width, height)]; [path addLineToPoint:CGPointMake(size.width, 30)]; [path addLineToPoint:CGPointMake(size.width/2 + 60, 30)]; [path addArcWithCenter:CGPointMake(size.width/2, 30) radius:30 startAngle:2*M_PI endAngle:1*M_PI clockwise:NO]; [path closePath]; CAShapeLayer *lineLayer = [CAShapeLayer layer]; lineLayer.position = CGPointMake(0, 0); LineLayer. Our lineWidth = 3.0; lineLayer.strokeColor = [UIColor redColor].CGColor; lineLayer.path = path.CGPath; lineLayer.fillColor = [UIColor yellowColor].CGColor; lineLayer.lineCap = kCALineCapRound; lineLayer.lineJoin = kCALineJoinRound; [view.layer addSublayer:lineLayer];Copy the code

3. Summary

From the examples above, we probably know that we can use CAShapeLayer+UIBezierPath to draw the shapes we want.

So that’s pretty much it, and then finally I throw a little bit of CAShapeLayer what else can I do, just render the path? A closer look at CASahpeLayer’s approach.

– (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;

The animation.

That’s right. In the next post, we’re going to learn how to animate graphics.

My favorite friend, give me a thumbs up. Thank you.