UIBezierPath 基础(一)

作者: Sunnyyangzx | 来源:发表于2017-12-14 15:53 被阅读106次

    首先了解贝塞尔曲线的初始化方法都有那些,可以根据不同的需求来初始化;其次设置贝塞尔曲线的绘制路线;最后把贝塞尔曲线设置为layer的path,把layer添加到相应的view就能显示出你要绘制的贝塞尔曲线。
    也可以直接在继承于UIView的子类中重写drawRect方法来绘制图形,此处是绘制到layer,之后再添加到view上。
    一、贝塞尔曲线初始化方法

    /// 1.初始化贝塞尔曲线 -- 无形状
    bezierPath = [UIBezierPath bezierPath];
    
    /// 2.绘制矩形的贝塞尔曲线 -- Rect为矩形的frame
    bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(100, 10, 50, 50)];
    
    /// 3.绘制圆形(椭圆)曲线  w = h 就是圆
    bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 80, 80, 50)];
    
    /// 4.绘制圆角的贝塞尔曲线 -- 四个角都是圆角 cornerRadius -- 圆角半径
    bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 160, 50, 50) cornerRadius:5];
    
    /// 5.绘制可选择圆角方位的矩形贝塞尔曲线
    /// roundCorner - 哪个部位圆角(注意:在OC中是位枚举,在swift中是数组)
    /// cornerRadii - 圆角的CGSize
    bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 240, 50, 50) byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(5, 5)];
    
    /// 6.根据CGPathRef 绘制线
    CGMutablePathRef path = CGPathCreateMutable();
    /// 起点
    CGPathMoveToPoint(path, NULL, 100, 89);
    /// 画直线到某一点 (需要结合起点MoveToPoint) 此方法确定了终点
    CGPathAddLineToPoint(path, NULL, 200, 200);
    /// 画圆弧 (需要结合起点MoveToPoint) 此方法确定终点
    CGPathAddArcToPoint(path, NULL, 100, 100, 200, 200, 50);
    
    /// 画圆
    CGPathAddArc(path, NULL, 100, 100, 50, 0, M_PI * 2, YES);
    /// 画矩形
    CGPathAddRect(path, NULL, CGRectMake(300, 300, 100, 100));
    bezierPath = [UIBezierPath bezierPathWithCGPath:path];
    /// 不在ARC管理范围内,需要手动释放 (带有ref的一般都是C的方法,需要手动释放内存)
    CGPathRelease(path);
    
    /// 7.绘制圆弧曲线
    /// ArcCenter -- 圆心坐标
    /// startAngle--起始点角度
    /// endAngle--终点角度
    /// radius - 圆的半径
    /// clockwise -- 是否顺时针
    bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 320) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:NO];
    

    二、绘制贝塞尔曲线

        /// 设置贝塞尔曲线 起点
        [bezierPath moveToPoint:CGPointMake(200, 320)];
        /// 添加直线到该点
        [bezierPath addLineToPoint:CGPointMake(300, 320)]; /// 水平直线
        [bezierPath addLineToPoint:CGPointMake(300, 200)]; /// 垂直竖线
        [bezierPath addLineToPoint:CGPointMake(200, 320)]; /// 回到起始点的斜线
    
        /// 绘制二次贝塞尔曲线 QuadCurveToPoint -- 终点  controlPoint -- 控制点
    //    [bezierPath addQuadCurveToPoint:CGPointMake(100, 320) controlPoint:CGPointMake(150, 50)];
        /// 绘制三次贝塞尔曲线 -- 会从上一条beizerPath的终点作为起点开始绘制
        /// CurveToPoint -- 终点  controlPoint1 -- 第一个控制曲线的点 controlPoint2 -- 第二个控制曲线的点
        [bezierPath addCurveToPoint:CGPointMake(350, 320) controlPoint1:CGPointMake(50, 100) controlPoint2:CGPointMake(300, 150)];
        /// 添加圆弧(圆) radius -- 半径 startAngle -- 起始弧度 endAngle -- 终点弧度
        [bezierPath addArcWithCenter:CGPointMake(200, 400) radius:50 startAngle:0 endAngle:M_PI * 2 clockwise:YES];
        /// 端点类型
        bezierPath.lineCapStyle = kCGLineCapButt;
        /// 线条链接类型
        bezierPath.lineJoinStyle = kCGLineJoinMiter;
        // Used when lineJoinStyle is kCGLineJoinMiter -- 线条最大宽度限度
        bezierPath.miterLimit = 150;
        
    //    CGFloat dash[] = {20, 1};
    //    [bezierPath setLineDash:dash count:2 phase:0];
        bezierPath.lineWidth = 1;
        /// 填充贝塞尔曲线内部
    //    [bezierPath fill];
        /// 设置填充颜色 --- drawRect中使用(此处无效)
        [[UIColor yellowColor] set];
        /// 移除所有曲线点
    //    [bezierPath removeAllPoints];
        /// 闭合曲线
    //    [bezierPath closePath];
        /// 绘制贝塞尔曲线边框
        [bezierPath stroke];
    

    借用个图来展示控制点controlPoint的意思


    贝塞尔曲线1.jpeg
    贝塞尔曲线2.jpeg

    三、将绘制曲线的路径添加到layer上

        /// 创建layer --- 注意:layer与贝塞尔曲线相同的属性同时设置,最终以layer的属性设置形式为准
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        /// 设置layer的填充颜色  -- 会覆盖贝塞尔曲线设置的填充颜色,最终显示为无色
        shapeLayer.fillColor = [UIColor clearColor].CGColor;
        /// 设置曲线的绘制路线颜色
        shapeLayer.strokeColor = [UIColor redColor].CGColor;
        /// 将曲线的路径添加到layer上
        shapeLayer.path = bezierPath.CGPath;
        /// 将layer添加到view上
        [self.view.layer addSublayer:shapeLayer];
    

    以上就是贝塞尔曲线的基本使用,希望对您有帮助。

    相关文章

      网友评论

        本文标题:UIBezierPath 基础(一)

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