Draw lines using CAShapeLayer + UIBezierPath and cashapelayer

Draw lines using CAShapeLayer + UIBezierPath and cashapelayer

During development, you need to customize some special images, such as line charts and pie charts in statistical charts. Generally, you cannot design these images. Learning CAShapeLayer and UIBezierPath can draw a variety of irregular images.

CAShapeLayer (mainly used to set the layer shape) attributes:

Path: CGPathRef object, graph edge path
LineWidth: Edge Width
StrokeColor: Edge color
LineDashPattern: Sets the edge style. The default value is solid line. This array is an NSNumber array. The values in the array represent the length of a single line and the length of a blank line in the dotted line, for example: array @ [2, 2, 3, 4] indicates a line with a length of 2, a blank line with a length of 2, a line with a length of 3, and a dotted line consisting of 4 after repeating.
LineDashPhase: The starting position of the edge style. If lineDashPattern is set to @ [2, 2, 3, 4], lineDashPhase is the starting position of the first line with a length of 2.
LineCap: Specifies the style of the end line. The default value is kCALineCapButt and kCAlineCapRound kCALineCapSquare.
LineJoin: The style at the inflection point. The default value is kCALineJoinMiter kCALineJoinRound kCALineJoinBevel.
StrokeStart strokeEnd| CGFloat type, [0, 1] indicates the start and end points of the draw edge (that is, the percentage in the path)
FillColor: CGColorRef object, with the fill color of the image. The default value is black.

UIBezierPath (bessercurve) UIBezierPath method:

• Initialization Method:

+ (Instancetype) bezierPath 
Generate a UIBezierPath object, which is mostly used to draw irregular curves or multilateral images.

*

+ (Instancetype) bezierPathWithOvalInRect :( CGRect) rect: Generate an inner-tangent oval UIBezierPath object of a rectangle. If the rectangle is a square, it is an inner circle.

*

+ (Instancetype) bezierPathWithRoundedRect :( CGRect) rect cornerRadius :( CGFloat) cornerRadius
Generate a UIBezierPath object with a custom rounded corner size. For example, add a rounded corner to a view.

*

+ (Instancetype) bezierPathWithRoundedRect :( CGRect) rect byRoundingCorners :( UIRectCorner) corners cornerRadii :( CGSize) cornerRadii
Add a custom rounded corner for a certain corner of the rectangle (when the size of the custom rounded corner exceeds half of the width or height of the rectangle, the width or height of the rectangle is automatically used as the rounded corner size ), for example, add a rounded corner to the upper left corner of the rectangle.

• Other methods

-(Void) moveToPoint :( CGPoint) point: Add path start point
-(Void) addLineToPoint :( CGPoint) point: Add other points outside the path start point
-(Void) closePath: Closed curve (the starting and ending points of the connection curve form a closed curve)

Combined with UIBezierPath and CAShapeLayer

Convert the UIBezierPath object to the CGPathRef object and assign it to the path attribute of CAShapeLayer to draw various lines and graphs.

layer.path = bezierPath.CGPath;

The specific application is as follows:

• Draw a line

Code:

// UIView * lineView = [[UIView alloc] initWithFrame: CGRectMake (CGRectGetMidX (self. view. frame)-100, CGRectGetMidY (self. view. frame) + 100,200,200)]; lineView. backgroundColor = [UIColor lightGrayColor]; [self. view addSubview: lineView]; // The line path UIBezierPath * linePath = [UIBezierPath bezierPath]; // The starting point [linePath moveToPoint: CGPointMake (20, 20)]; // other points [linePath addLineToPoint: CGPointMake (130,130)]; [linePath addLineToPoint: CGPointMake (140, 50)]; CAShapeLayer * lineLayer = [CAShapeLayer layer]; lineLayer. lineWidth = 2; lineLayer. strokeColor = [UIColor redColor]. CGColor; lineLayer. path = linePath. CGPath; lineLayer. fillColor = nil; // The default value is blackColor [lineView. layer addSublayer: lineLayer];

• Draw a polygon

Code:

// UIView * polygonView = [[UIView alloc] initWithFrame: CGRectMake (CGRectGetMidX (self. view. frame)-100, CGRectGetMidY (self. view. frame) + 100,200,200)]; polygonView. backgroundColor = [UIColor lightGrayColor]; [self. view addSubview: polygonView]; // line path UIBezierPath * polygonPath = [UIBezierPath bezierPath]; // start point [polygonPath moveToPoint: CGPointMake (20, 20)]; // other points [polygonPath addLineToPoint: CGPointMake (130,130)]; [polygonPath addLineToPoint: CGPointMake (140, 50)]; [polygonPath closePath]; // Add a CAShapeLayer * polygonLayer = [CAShapeLayer layer]; polygonLayer. lineWidth = 2; polygonLayer. strokeColor = [UIColor redColor]. CGColor; polygonLayer. path = polygonPath. CGPath; polygonLayer. fillColor = nil; // The default value is blackColor [polygonView. layer addSublayer: polygonLayer];

• Circle

Returns a rounded corner to a view.

// UIView * view = [[UIView alloc] initWithFrame: CGRectMake (CGRectGetMidX (self. view. frame)-100, CGRectGetMidY (self. view. frame)-100,200,200)]; view. backgroundColor = [UIColor lightGrayColor]; [self. view addSubview: view]; // line path UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect: view. bounds]; CAShapeLayer * pathLayer = [CAShapeLayer layer]; pathLayer. lineWidth = 2; pathLayer. strokeColor = [UIColor redColor]. CGColor; pathLayer. path = path. CGPath; pathLayer. fillColor = nil; // The default value is blackColor [view. layer addSublayer: pathLayer];

Code:

UIView * view = [[UIView alloc] initWithFrame: CGRectMake (CGRectGetMidX (self. view. frame)-100, CGRectGetMidY (self. view. frame)-100,200,200)]; view. backgroundColor = [UIColor lightGrayColor]; [self. view addSubview: view]; // line path UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect: view. bounds]; CAShapeLayer * pathLayer = [CAShapeLayer layer]; pathLayer. lineWidth = 2; pathLayer. strokeColor = [UIColor redColor]. CGColor; pathLayer. path = path. CGPath; // [view. layer addSublayer: pathLayer]; // pathLayer. fillColor = nil; // The default value is blackColor view. layer. mask = pathLayer; // adds a mask to the mask attribute of the layer.

• Add a rounded corner to a rectangle to customize the rounded corner size

// UIView * view = [[UIView alloc] initWithFrame: CGRectMake (CGRectGetMidX (self. view. frame)-100, CGRectGetMidY (self. view. frame)-100,200,200)]; view. backgroundColor = [UIColor lightGrayColor]; [self. view addSubview: view]; // line path UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect: view. bounds cornerRadius: 50]; CAShapeLayer * pathLayer = [CAShapeLayer layer]; pathLayer. lineWidth = 2; pathLayer. strokeColor = [UIColor redColor]. CGColor; pathLayer. path = path. CGPath; pathLayer. fillColor = [UIColor lightGrayColor]. CGColor; // The default value is blackColor // [polygonView. layer addSublayer: polygonLayer]; view. layer. mask = pathLayer; // adds a mask to the mask attribute of the layer.

• Rounded corner of a single rectangle

You only need to add the UIBezierPath object as a mask to switch the rounded corner of a single view.

Code:

// UIView * view = [[UIView alloc] initWithFrame: CGRectMake (CGRectGetMidX (self. view. frame)-100, CGRectGetMidY (self. view. frame)-100,200,200)]; view. backgroundColor = [UIColor lightGrayColor]; [self. view addSubview: view]; // line path UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect: view. bounds byRoundingCorners: UIRectCornerTopLeft cornerRadii: CGSizeMake (100, 0)]; CAShapeLayer * pathLayer = [CAShapeLayer layer]; pathLayer. lineWidth = 2; pathLayer. strokeColor = [UIColor redColor]. CGColor; pathLayer. fillColor = nil; // The default value is blackColor pathLayer. path = path. CGPath; [view. layer addSublayer: pathLayer];

• CAShapeLayer (mainly used to set the layer shape)
  • Attribute:
• UIBezierPath (besell curve)
  • UIBezierPath method:
• Combined with UIBezierPath and CAShapeLayer
  • The specific application is as follows: