美文网首页
核心动画-绘制贝塞尔曲线

核心动画-绘制贝塞尔曲线

作者: 一达 | 来源:发表于2017-02-20 11:47 被阅读59次

一、贝塞尔曲线作用:

*贝塞尔曲线就是这样的一条曲线,它是依据四个位置任意的点坐标绘制出的一条光滑曲线。在历史上,研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”,也就是说,随着点有规律地移动,曲线将产生皮筋伸引一样的变换,带来视觉上的冲击。

二、常见阶段

*贝塞尔曲线一阶


cmd-markdown-logo

*贝塞尔曲线二阶


cmd-markdown-logo
*贝塞尔曲线三阶
cmd-markdown-logo

*贝塞尔曲线四阶


cmd-markdown-logo
*贝塞尔曲线五阶
cmd-markdown-logo

三、二阶和三阶贝塞尔曲线绘制

- (void)drawRect:(CGRect)rect {

    UIColor *color = [UIColor redColor];
    [color set]; //设置线条颜色

    //定义一个二级的赛贝尔曲线 重点|拐弯点
    UIBezierPath *mPath1 = [UIBezierPath bezierPath];
    [mPath1 moveToPoint:CGPointMake(10,260)];
    [mPath1 addQuadCurveToPoint:CGPointMake(200,200) controlPoint:CGPointMake(285, 440)];
    [mPath1 setLineWidth:3];
    [mPath1 stroke];

    //定义一个三级的赛贝尔曲线 终点|拐点1|拐点2
    UIBezierPath *mPath7 = [UIBezierPath bezierPath];
    [mPath7 moveToPoint:CGPointMake(10,40)];
    [mPath7 addCurveToPoint:CGPointMake(self.bounds.size.width,self.bounds.size.height)
              controlPoint1:CGPointMake(0, 0)
              controlPoint2:CGPointMake(self.bounds.size.height*3/4,self.bounds.size.height*3/4)];
    [mPath7 stroke];
}

相关文章

网友评论

      本文标题:核心动画-绘制贝塞尔曲线

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