iOS贝塞尔曲线(UIBezierPath)的应用

Apple Developer Doc中第一句这么描述到:”The UIBezierPath class lets you define a path consisting of straight and curved line segments and render that path in your custom views.”。UIBezierPath类可以定义直线路径或者曲线路径来渲染你的自定义组件。

下面将对UIBezierPath进行详细的解析。

 

1. 创建

实例化UIBezierPath有好几个函数,如下:

    • bezierPath,默认参数直接实例化。
    • bezierPathWithRect:,带入参Rect,默认绘制矩形。
    • bezierPathWithOvalInRect:,带入参Rect,绘制椭圆形。
    • bezierPathWithRoundedRect:cornerRadius:,带入参Rect,radius半径,绘制圆形。
    • bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:,带入参Rect,corner圆角,cornerRadii圆角半径,绘制自定义的圆角矩形或圆形。
    • bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:,带入参center中心点,radius半径,startAngle开始角度,endAngle结束角度,clockwise是否顺时针,绘制圆弧。
    • bezierPathWithCGPath:带入参path。根据path实例化。
      一个简单的绘图:

UIBezierPath简单示例

代码:

1
2
3
4
5
6
7
8
9
CGRect rect = CGRectMake(50, 50, 50, 50);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:rect];
CAShapeLayer *layer = [CAShapeLayer new];
layer.strokeColor = [UIColor greenColor].CGColor;
layer.fillColor = [UIColor yellowColor].CGColor;
layer.lineWidth = 1;
layer.path = bezierPath.CGPath;
layer.frame = rect;
[self.view.layer addSublayer:layer];

其他图形的话,直接按照传参来创建就行了。上面的代码还用到了CAShapeLayer,是CALayer的subclass。

 

2. 构建

来看一下UIBezierPath的示例函数。

    • moveToPoint:,将绘图起始点移动到指定point。
    • addLineToPoint:,添加一个点,从上一个点进行连线。
    • addArcWithCenter:radius:startAngle:endAngle:clockwise:,画圆弧路径,与类函数+ bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:用法类似。
    • addCurveToPoint:controlPoint1:controlPoint2:,这个有点难描述。官方图:
    • addQuadCurveToPoint:controlPoint:,这个还是得上官方图:
    • closePath,调用这个后,不再从上一个point开始连接路径,会从起始点开始连线。
    • removeAllPoints,顾名思义,但是不知add进去的point会消失,是整个绘制出来的path都被remove掉。
    • appendPath:,把append的path也绘制出来。
       

3. 属性

  • lineWidth,路径线的宽度。注意这个属性要在“graphics context”下才会有效。这个可以在自定义View的-(void)drawRect:(CGRect)rect函数里面实现。
  • lineCapStyle,路径线开头结尾的形状。
  • lineJoinStyle,线段连接点的形状。
  • miterLimit,两条线相交的角度。
  • flatness,像素点距离,一般不设置。
  • usesEvenOddFillRule,填充规则。

4.绘制

    • fill,填充。
    • fillWithBlendMode:alpha:,可设置混合模式的填充
    • stroke,连线
    • strokeWithBlendMode:alpha:,可设置混合模式的连线。

 

以上就是UIBezierPath的基本用法了,UIBezierPath是一个强大的绘制工具,后续将继续UIBezierPath的其他应用。