UIBezierPath 赛贝尔曲线

最新推荐文章于 2024-03-24 15:21:42 发布

水清_木秀

最新推荐文章于 2024-03-24 15:21:42 发布

阅读量1k

点赞数

分类专栏： iOS UI

本文链接：https://blog.youkuaiyun.com/WiKi_Su/article/details/52238388

版权

iOS UI 专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了如何在iOS开发中利用UIView的drawRect方法和UIBezierPath来绘制赛贝尔曲线。内容涵盖矩形、N边形的绘制，并详细讲解了lineCapStyle和lineJoinStyle两个绘图属性。此外，还特别提到了如何绘制赛贝尔曲线，以及弧度在图形绘制中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们创建的UIView的类，然后重写drawRect方法。在里面进行绘制赛贝尔曲线。

我们经常绘制的图案包括矩形、椭圆、N边形、（二次、三次）赛贝尔曲线、弧线、其余的图形绘制在以后将会讲到

在绘图的时候，有两个属性：

lineCapStyle 和 lineJoinStyle

    /*
     lineCapStyle :线条拐角帽的样式
     
     kCGLineCapButt,  默认
     kCGLineCapRound, 轻微圆角
     kCGLineCapSquare 正方形
     */
    path.lineCapStyle = kCGLineCapSquare;
    /*
     lineJoinStyle :两条线连接点的样式
     
     kCGLineJoinMiter, 斜接
     kCGLineJoinRound, 圆滑衔接
     kCGLineJoinBevel  斜角连接
     */
    path.lineJoinStyle = kCGLineJoinMiter;

1、画矩形。

在矩形绘制中，有三种类方法。

- (void)drawRectangle{
    
    CGRect newRect =    CGRectMake(20, 20, 220, 200);
    
    //矩形
//    UIBezierPath *path = [UIBezierPath bezierPathWithRect:newRect];
    
    //带圆角的矩形
//    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:newRect cornerRadius:8.0f];
    
    //某个角设置为圆角
    //cornerRadii： size 设置为正方形，即使不是正方形，也会按照正方形切圆角
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:newRect byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(80, 10)];
    
    
    path.lineWidth = 11.0f;
    
    
    //设置填充颜色
    UIColor *fillColor = [UIColor greenColor];
    [fillColor set];
    [path fill];
    
    //设置线条颜色
    UIColor *strokeColor = [UIColor blueColor];
    [strokeColor set];
    
    [path stroke];
    
    
}

2、绘制N边形

在此以三角形为例子，当然你也可以addLineToPoint来添加你想要添加的点

/**
 *画三角形
 */
- (void)drawTriangle{
    
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(20, 20)];
    [path addLineToPoint:CGPointMake(220, 20)];
    [path addLineToPoint:CGPointMake(80, 140)];
    
    [path closePath];

    
    //线的粗细
    path.lineWidth = 11.0f;
    
    //填充色
    [[UIColor greenColor] set];
    [path fill];
    
    //边线色
    [[UIColor redColor] set];
    
    [path stroke];
    
    
}

3、绘制椭圆

我们只要宽高大小相同，那么就会变成圆了。

/**
 *  画椭圆
 */
- (void)drawCircle{
    
    CGRect newRect =    CGRectMake(20, 20, 220, 120);

    
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:newRect];
    
    [[UIColor greenColor] set];
    [path fill];
    
    [path stroke];
    
    
}

4、绘制弧形

(图片来自于：http://www.jianshu.com/p/734b34e82135)

在这我们可以看到，float类型想要的内容是弧度度数。

/**
 *  画弧
 */
- (void)drawRAD{
    
    
    CGPoint start = CGPointMake(150, 150);
    
    
    CGFloat endFloat = M_PI/180*270; //要的是弧度。
    
    
    //clockwise（顺时针） ：YES 是顺时针，NO是逆时针
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:start radius:100 startAngle:0 endAngle:endFloat clockwise:YES];
    
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 10.0;
 
    [[UIColor redColor] set];
    
    [path stroke];
    
    
}

5、赛贝尔曲线。

/**
 *  二次赛贝尔曲线
 */
- (void)secondBezier{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(20, 230)];
    
    [path addQuadCurveToPoint:CGPointMake(220, 210) controlPoint:CGPointMake(50, 80)];
    
    
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 7.0;
    
    
    [[UIColor redColor] set];
    
    [path stroke];
    
}

/**
 *  三次赛贝尔曲线
 */
- (void)thirdBezier{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    
    [path moveToPoint:CGPointMake(20, 150)];
    
    [path addCurveToPoint:CGPointMake(280,130) controlPoint1:CGPointMake(50, 0) controlPoint2:CGPointMake(120, 250)];
    
    path.lineCapStyle = kCGLineCapRound;

    path.lineJoinStyle = kCGLineJoinBevel;
    
    path.lineWidth = 7.0;
    
    
    [[UIColor redColor] set];
    
    [path stroke];
    
}