CAShaperLayer&UIBezierPath profile

Using UIbezierPath and CAShapeLayer you can draw any shape you want. You can’t do it without UIbezierPath and CAShapeLayer. You can easily customize any control you want by doing them.

CAShaperLayer

Apple draws A layer that draws A cubic Bezier spline in its coordinate space.

Inherited from CALayer. Each CAShapeLayer object represents an arbitrary shape that will be rendered to the screen.

Meanwhile, CAShaperLayer has the following characteristics:

  1. CAShapeLayer can be touched and filled, and the CAShapeLayer can be shaped using the Path property
  2. CAshapeLayer has a number of animation features that, combined with UIBezierPath, make it easy to customize the graphics you want
  3. CAshapeLayer can render on the GPU, increasing efficiency and reducing CPU burden

Note:

Shape rasterization may favor speed over accuracy. For example, pixels with multiple intersecting path segments may not give exact results.

Since CAShapeLayer prefers speed over accuracy, graphics drawn with CAShapeLayer will appear jagged. (It should be hard to tell the difference without a magnifying glass.)

Description of the problem

An introduction to common attributes

1.CGPathRef path

/* The path defining the shape to be rendered. If the path extends * outside the layer bounds it will not automatically be clipped to the * layer, only if the normal layer masking rules cause that. Upon * assignment the path is copied. Defaults to null. Animatable. *  (Note that although the path property is animatable, no implicit * animation will be created when the property is changed.) */
Copy the code

The path defines the rendering of the shape, and if the path exceeds the layer’s bounds, that part of the path is not displayed on the layer. Path will also be deep-copied when assigned. The default value is null. Note that although the PATH property is animatable, no implicit animation is created when the property is changed.

An implicit animation

Some animation effects are automatically generated by default when some Properties of the non-root Layer are modified, and these Properties are called Animatable Properties

  • bounds: Sets the width and height of the CALayer. Modifying this property produces a scaling animation
  • backgroundColor: Used to set the background color of CALayer. Changing this property produces a gradient animation of the background color
  • position: Sets the location of the CALayer. Modifying this property produces a pan animation

You can turn off the default implicit animation effects through the animation transaction CATransaction

 [CATransaction begin];
 [CATransaction setDisableActions:YES];
 self.myview.layer.position = CGPointMake(10.10);
 [CATransaction commit];

Copy the code

2.CGFloat strokeStart && CGFloat strokeEnd

/* These values define the subregion of the path used to draw the

The values must be in The range [0,1] with zero

* representing the start of the path and one the end. Values in

* between zero and one are interpolated linearly along the path

* length. strokeStart defaults to zero and strokeEnd to one. Both are

* animatable. */

  • StrokeStart represents the percentage of the total path where the stroke begins
  • The strokeStart stokeEnd comparison represents the percentage of the total path of the local station where the drawing ends

UIBezierPath

A path that consists of straight and curved line segments that you can render in your custom views.

The UIBezierPath object is a wrapper around the CGPathRef data type. There are two ways to use it:

1. Overwrite the view drawRect method

- (void)drawRect:(CGRect)rect {
    
    UIColor *color = [UIColor redColor];
    [color set]; // Set the line color
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10.10)];
    [path addLineToPoint:CGPointMake(200.80)];
   
    path.lineWidth = 5.0;
    path.lineCapStyle = kCGLineCapRound; // Line corner
    path.lineJoinStyle = kCGLineJoinRound; // Endpoint processing
    
    [path stroke];
}
Copy the code
  • Path. Our lineWidth = 5.0Sets the width of the line
  • path.lineCapStyleTerminal style
    • kCGLineCapButtThe value of this property specifies that no endpoints are drawn and that the end of the line ends directly. This is the default value
    • kCGLineCapRoundThis property specifies the drawing of circular endpoints and the drawing of a semicircle whose diameter is the width of the line at the end of the line.
    • kCGLineCapSquareThis property value specifies the draw square endpoint. At the end of the line draw half a square with sides as wide as the line. It should be noted that the end points of this shape are very similar to the end points of the “butt” shape, with slightly longer lines
  • path.lineJoinStyleSets the style of the point where two lines join
    • kCGLineJoinMitermiter
    • kCGLineJoinRoundSmooth cohesion
    • kCGLineJoinBevelBevel connection
  • [path stroke]stroke
  • [path fill]Fill the inside of the border

2. Use it with CAShaperLayer

	UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(110.100.150.100)];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor blackColor].CGColor;
    layer.fillColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];
Copy the code
  • stokeColorSets the color of the graphics border
  • fillColorSets the color of the graphic fill. If not, the default isstokeColor