CAShaperLayer&UIBezierPath系列

https://blog.csdn.net/weixin_33711641/article/details/91464884

 

CAShaperLayer&UIBezierPath简介

使用 UIbezierPath 和 CAShapeLayer 可以画出你想要的任何形状，没有它做不到，只有你想不到，搞定了它们你就可以轻松定制你想要的任何控件了。

CAShaperLayer

苹果官方的定义：A layer that draws a cubic Bezier spline in its coordinate space.

继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。

同时CAShaperLayer具有以下特点：

1. CAShapeLayer可以被触碰和填充，并且CAShapeLayer可以通过Path属性进行形状的调节
2. CAshapeLayer具有许多动画特性，与UIBezierPath结合，可以轻松定制你想要的图形
3. CAshapeLayer能在GPU上渲染，提升效率，减少CPU的负担

Note:

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

由于CAShapeLayer更喜欢速度超过准确性，所以用CAShapeLayer绘制的图形会出现锯齿。(如果不用放大镜的话，应该很难看出区别)

问题的描述

常用属性的介绍

1.CGPathRef path

1.  
   /* The path defining the shape to be rendered. If the path extends
2.  
   * outside the layer bounds it will not automatically be clipped to the
3.  
   * layer, only if the normal layer masking rules cause that. Upon
4.  
   * assignment the path is copied. Defaults to null. Animatable.
5.  
   * (Note that although the path property is animatable, no implicit
6.  
   * animation will be created when the property is changed.) */
7.  
   复制代码

path定义了形状的渲染，如果路径超过layer的bounds,那么那部分的path将不会在layer上显示。同时path在赋值的时候将会进行深拷贝。默认值为空。请注意，尽管path属性是可动画的，但在更改属性时不会创建隐式动画。

隐式动画

当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果，而这些属性称为Animatable Properties(可动画属性)

• bounds：用于设置CALayer的宽度和高度。修改这个属性会产生缩放动画
• backgroundColor：用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画
• position：用于设置CALayer的位置。修改这个属性会产生平移动画

可以通过动画事务CATransaction关闭默认的隐式动画效果

1.  
   [CATransaction begin];
2.  
   [CATransaction setDisableActions:YES];
3.  
   self.myview.layer.position = CGPointMake(10, 10);
4.  
   [CATransaction commit];
5.  
    
6.  
   复制代码

2.CGFloat strokeStart && CGFloat strokeEnd

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

* stroked outline. 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它表示描线开始的地方占总路径的百分比
• 对比strokeStart stokeEnd代表了绘制结束的地方站总路径的百分比

UIBezierPath

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

UIBezierPath对象是CGPathRef数据类型的封装。有两种使用方式：

1.重写view的drawRect方法

1.  
   - (void)drawRect:(CGRect)rect {
2.  
    
3.  
   UIColor *color = [UIColor redColor];
4.  
   [color set]; //设置线条颜色
5.  
    
6.  
   UIBezierPath *path = [UIBezierPath bezierPath];
7.  
   [path moveToPoint:CGPointMake(10, 10)];
8.  
   [path addLineToPoint:CGPointMake(200, 80)];
9.  
    
10.  
    path.lineWidth = 5.0;
11.  
    path.lineCapStyle = kCGLineCapRound; //线条拐角
12.  
    path.lineJoinStyle = kCGLineJoinRound; //终点处理
13.  
     
14.  
    [path stroke];
15.  
    }
16.  
    复制代码

• path.lineWidth = 5.0设置划线的宽度
• path.lineCapStyle终点的样式 
  • kCGLineCapButt 该属性值指定不绘制端点， 线条结尾处直接结束。这是默认值
  • kCGLineCapRound该属性值指定绘制圆形端点， 线条结尾处绘制一个直径为线条宽度的半圆。
  • kCGLineCapSquare该属性值指定绘制方形端点。 线条结尾处绘制半个边长为线条宽度的正方形。需要说明的是，这种形状的端点与“butt”形状的端点十分相似，只是采用这种形式的端点的线条略长一点而已
• path.lineJoinStyle 设置两条线连结点的样式 
  • kCGLineJoinMiter 斜接
  • kCGLineJoinRound 圆滑衔接
  • kCGLineJoinBevel 斜角连接
• [path stroke] 描边
• [path fill] 填充边框内部

2.结合CAShaperLayer进行使用

1.  
   UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(110, 100, 150, 100)];
2.  
   CAShapeLayer *layer = [CAShapeLayer layer];
3.  
   layer.path = path.CGPath;
4.  
   layer.strokeColor = [UIColor blackColor].CGColor;
5.  
   layer.fillColor = [UIColor redColor].CGColor;
6.  
   [self.view.layer addSublayer:layer];
7.  
   复制代码

• stokeColor 设置图形边框的颜色
• fillColor 设置图形填充的颜色，如果不设置，默认为stokeColor

 

 

转载于:https://juejin.im/post/5c8ba446e51d451bfc6dd541