美文网首页
iOS:贝塞尔曲线(UIBezierPath)-----OC

iOS:贝塞尔曲线(UIBezierPath)-----OC

作者: 一个没有记忆的梦 | 来源:发表于2021-11-04 11:31 被阅读0次

    贝塞尔曲线是一个画图的类,需在drawRect方法中绘制;可以绘制直线、矩形、圆、椭圆以及其他复杂的图形
    贝塞尔曲线(UIBezierPath)的使用如下:

    类方法:
    //基本路径
    + (instancetype)bezierPath;
    //矩形路径
    + (instancetype)bezierPathWithRect:(CGRect)rect;
    //椭圆,当rect为正方形是则为圆
    + (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
    //圆角矩形、圆路径
    + (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
    //指定矩形的角为圆角
    + (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
    //弧线路径/扇形
    + (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
    //CGpath创建
    + (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
    
    对象方法
    - (instancetype)init NS_DESIGNATED_INITIALIZER;
    - (nullable instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;
    
    属性
    //返回一个不可变的CGPathRef,在UIBezierPath被进一步修改之前有效
    @property(nonatomic) CGPathRef CGPath;
    - (CGPathRef)CGPath NS_RETURNS_INNER_POINTER CF_RETURNS_NOT_RETAINED;
    //判断是否为空 只读属性
    @property(readonly,getter=isEmpty) BOOL empty;
    //整个路径的位置
    @property(nonatomic,readonly) CGRect bounds;
    //当前路径的位置
    @property(nonatomic,readonly) CGPoint currentPoint;
    //线的宽度
    @property(nonatomic) CGFloat lineWidth;
    //线的末端的类型
    @property(nonatomic) CGLineCap lineCapStyle;
    typedef CF_ENUM(int32_t, CGLineCap) {
        kCGLineCapButt, //无端点
        kCGLineCapRound,//圆形端点
        kCGLineCapSquare//方形端点
    };
    //相交线的交点类型
    @property(nonatomic) CGLineJoin lineJoinStyle;
    typedef CF_ENUM(int32_t, CGLineJoin) {
        kCGLineJoinMiter,//直接连接
        kCGLineJoinRound,//圆角连接
        kCGLineJoinBevel//斜角连接
    };
    //miterLimit 属性设置或返回最大斜接长度,只有当 lineJoinStyle 属性为 "kCGLineJoinMiter" 时,miterLimit 才有效
    @property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter
    //线的精细程度
    @property(nonatomic) CGFloat flatness;
    //填充区域的方法
    @property(nonatomic) BOOL usesEvenOddFillRule; // Default is NO. When YES, the even-odd fill rule is used for drawing, clipping, and hit testing.
    
    方法
    //设置画笔的起始点
    - (void)moveToPoint:(CGPoint)point;
    //从当前点到指定点绘制直线
    - (void)addLineToPoint:(CGPoint)point;
    //绘制曲线(三阶贝塞尔曲线) 从起点到结束点的曲线,有两个控制点坐标controlPoint1、controlPoint2
    - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
    //绘制曲线(二阶贝塞尔曲线)从起点到终点的曲线,一个控制点
    - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
    //绘制弧线 中线点、半径、开始角、结束角、绘制方向
    - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise API_AVAILABLE(ios(4.0));
    //设置为封闭的路径
    - (void)closePath;
    //移除所有的点
    - (void)removeAllPoints;
    //两个贝塞尔曲线路径拼接
    - (void)appendPath:(UIBezierPath *)bezierPath;
    //创建并返回一个与当前路径相反的新的贝塞尔曲线
    - (UIBezierPath *)bezierPathByReversingPath API_AVAILABLE(ios(6.0));
    //用CGAffineTransform变换路径的所有点
    - (void)applyTransform:(CGAffineTransform)transform;
    //是否包含指定的点
    - (BOOL)containsPoint:(CGPoint)point;
    //设置虚线
    - (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
    //获取虚线
    - (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;
    //填充
    - (void)fill;
    //绘制路径
    - (void)stroke;
    
    //描边的混合模式
    - (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
    //填充的混合模式
    - (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
    //修改当前图形上下文的绘制的可见区域,之后绘图操作显示的内容只有发生在指定路径的填充区域
    - (void)addClip;
    
    
    使用

    1、绘制直线

    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 3.f;
    path.lineCapStyle = kCGLineCapRound;
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(300, 300)];
    [path stroke];
    
    line.png

    2、矩形

    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 200)];
    path.lineWidth = 3.f;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinBevel;
    [path stroke];
    
    Rect.png

    3、椭圆/圆

    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 300)];
    path.lineWidth = 3.f;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinBevel;
    [path stroke];
    
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 200)];
    
    Oval_C.png
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 300)];
    
    Oval_O.png

    4、圆/圆角矩形曲线,
    a、半径大于或等于正方形的边长一半时为圆,此时半径不起作用(此处描述有问题)
    b、半径小于于正方形的边长一半时为圆角矩形
    c、当图形长和宽不等时为圆角矩形,如图"Rounded_R"

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 180, 150) cornerRadius:80];
    path.lineWidth = 3.f;
    [path stroke];
    

    问题:a的描述,当为正方形且半径时边长的一半是时圆。
    当初始化的时候设置半径为32时,此时是一个圆角矩形。
    当初始化的时候设置半径为33时,此时是一个圆。
    希望知道的小伙伴解答一下,感激不尽!!!

    [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:32];
    
    32.png
    [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:33];
    
    33.png Rounded_R.png

    5、圆角矩形

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 200, 100, 100) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(40, 40)];
    path.lineWidth = 3.f;
    [path fill];//填充
    [path stroke];
    
    typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
        UIRectCornerTopLeft     = 1 << 0,
        UIRectCornerTopRight    = 1 << 1,
        UIRectCornerBottomLeft  = 1 << 2,
        UIRectCornerBottomRight = 1 << 3,
        UIRectCornerAllCorners  = ~0UL
    };
    
    

    UIRectCornerTopLeft | UIRectCornerBottomRight 用“|”或连接可以切指定位置的圆角,cornerRadii为圆角的大小


    R.png

    6、绘制贝塞尔曲线三阶

    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 3.f;
    path.lineCapStyle = kCGLineCapRound;
    [path moveToPoint:CGPointMake(100, 100)];
    [path addCurveToPoint:CGPointMake(300, 100) controlPoint1:CGPointMake(130, 70) controlPoint2:CGPointMake(160, 160)];
    [path stroke];
    
    Curve.png

    7、绘制贝塞尔曲线二阶

    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 3.f;
    path.lineCapStyle = kCGLineCapRound;
    [path moveToPoint:CGPointMake(100, 100)];
    [path addQuadCurveToPoint:CGPointMake(300, 100) controlPoint:CGPointMake(180, 180)];
    [path stroke];
    
    QuadCurve.png

    8、弧线

    UIBezierPath *path = [UIBezierPath bezierPath];
    path.lineWidth = 3.f;
    path.lineCapStyle = kCGLineCapRound;
    [path moveToPoint:CGPointMake(100, 100)];
    [path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 clockwise:YES];
    [path stroke];
    
    
    [path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 NO];
    
    Arc_NO.png
    [path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 clockwise:YES];
    
    Arc_YES.png
    拓展

    修改线的颜色

    UIColor *color = [UIColor redColor];
    [color set];//修改线和填充颜色
    [color setFill];//修改填充颜色
    [color setStroke];//修改线的颜色
    

    如果想要线条颜色和填充的颜色不同,可以再次创建一个新的color。

    相关文章

      网友评论

          本文标题:iOS:贝塞尔曲线(UIBezierPath)-----OC

          本文链接:https://www.haomeiwen.com/subject/fkkczltx.html