iOS开发贝塞尔曲线UIBezierPath

最新推荐文章于 2025-11-11 16:35:10 发布

转载最新推荐文章于 2025-11-11 16:35:10 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/whforever/blog/700375

文章标签：

#移动开发 #python

2019独角兽企业重金招聘Python工程师标准>>>

UIBezierPath基础

UIBezierPath对象是CGPathRef数据类型的封装。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

创建和使用一个path对象的过程是分开的。创建path是第一步，包含一下步骤：

（1）创建一个Bezier path对象。

（2）使用方法moveToPoint:去设置初始线段的起点。

（3）添加line或者curve去定义一个或者多个subpaths。

（4）改变UIBezierPath对象跟绘图相关的属性。

UIBezierPath 代码示例:

- (void)drawRect:(CGRect)rect {
    
#pragma mark - 1. 画一个红色五角形
    // 创建bezierPath对象
    UIBezierPath *aPath = [UIBezierPath bezierPath];
    
    // 设置颜色
    [[UIColor redColor] set];
    
    // 定义线条宽度
    aPath.lineWidth = 3;
    
    /*
     * stroke时候线条终点的效果
     *
     * kCGLineCapButt,
     * kCGLineCapRound,
     * kCGLineCapSquare
     */
    aPath.lineCapStyle = kCGLineCapRound;
    
    /*
     * stroke时候线条连接处的效果
     *
     * kCGLineJoinMiter,
     * kCGLineJoinRound,
     * kCGLineJoinBevel
     */
    aPath.lineJoinStyle = kCGLineJoinMiter;
    
    // 设置形状的起点
    [aPath moveToPoint:CGPointMake(100, 10)];
    
    // 画四条线
    [aPath addLineToPoint:CGPointMake(200.0, 50.0)];
    [aPath addLineToPoint:CGPointMake(160, 150)];
    [aPath addLineToPoint:CGPointMake(40.0, 150)];
    [aPath addLineToPoint:CGPointMake(10.0, 50.0)];
    
    // 第五条线通过 closePath 得到
    [aPath closePath];
    
    // 根据坐标将线画出来
    [aPath stroke];
    
    [[UIColor yellowColor] set];
    [aPath fill];
    
    
    
#pragma mark - 2. 创建矩形
    UIBezierPath *aPath2 = [UIBezierPath bezierPathWithRect:CGRectMake(10, 160, 100, 30)];
    
    aPath2.lineWidth = 2;
    aPath2.lineCapStyle = kCGLineCapRound;
    aPath2.lineJoinStyle = kCGLineJoinRound;
    [[UIColor blackColor] set];
    
    [aPath2 stroke];
    
    [aPath2 removeAllPoints];
    
    aPath2 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(120, 160, 100, 30) cornerRadius:5];
    [aPath2 stroke];
    
    
#pragma mark - 3. 创建圆形或者椭圆形
    /*
     * 使用如下方法创建内切圆或者内切椭圆
     * + (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect  
     * 当传入的rect是一个正方形时，绘制的图像是一个内切圆；当传入的rect是一个长方形时，绘制的图像是一个内切椭圆。
     */
    UIBezierPath *aPath3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 200, 100, 100)];
    
    [aPath3 moveToPoint:CGPointMake(60, 250)];
    
    [aPath3 stroke];
    
    [aPath3 removeAllPoints];
    [aPath3 addArcWithCenter:CGPointMake(60, 250) radius:4 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    [aPath3 fill];
    
    
#pragma mark - 4. 使用UIBezierPath创建一段弧线
    // 参数 closewise: 顺时针方向
    
    UIBezierPath *aPath4 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(60, 250) radius:70 startAngle:M_PI_4 endAngle:M_PI_4+M_PI_2 clockwise:YES];
    aPath4.lineWidth = 3;
    [aPath4 stroke];
    
    
    
#pragma mark - 5. 绘制 二次/三次 贝塞尔曲线
    UIBezierPath *aPath5 = [UIBezierPath bezierPath];
    [aPath5 moveToPoint:CGPointMake(10, 330)];
    [aPath5 addQuadCurveToPoint:CGPointMake(130, 330) controlPoint:CGPointMake(10, 400)];
    
    // 三次贝塞尔曲线
    [[UIColor redColor] set];
    [aPath5 addCurveToPoint:CGPointMake(320, 330) controlPoint1:CGPointMake(140, 400) controlPoint2:CGPointMake(320, 100)];
    
    [aPath5 stroke];
    
    
    /// 让控件在 path上面移动的效果. ****************************************
    CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    moveAnim.path = aPath5.CGPath;
    moveAnim.removedOnCompletion = YES;
    [self.imageView.layer addAnimation:moveAnim forKey:nil];
    
    
#pragma mark - 6. 将文字和图片画在画布上去.
    //将文字画在画布上
    [@"Walden" drawAtPoint:CGPointMake(10, 10) withAttributes:nil];
    
    UIImage *image = [UIImage imageNamed:@"image1.png"];
    
    [image drawInRect:CGRectMake(10, 400, 100, 100)];
    
    

    
}