封闭的三次贝塞尔曲线的填充

接上一篇博文,记载一下怎样将封闭的贝塞尔曲线填充颜色。
设计师要求的效果图如下:
这里写图片描述
我的步骤是先描点,然后将其组成一个封闭区间,最后上色。上代码:(代码可能写的不怎么样,以后尽量追求优质代码。)

//根据points中的点画出曲线
- (void)drawCurveChartWithPoints:(NSMutableArray *)points
{
    UIBezierPath* path1 = [UIBezierPath bezierPath];
    [path1 moveToPoint:[[points objectAtIndex:0] CGPointValue]];//这一步很重要
    //遍历各个点,画曲线
    for(int i=0; i<[points count]-1; i++){
        CGPoint startPoint = [[points objectAtIndex:i] CGPointValue];
        CGPoint endPoint = [[points objectAtIndex:i+1] CGPointValue];
        [UIView animateWithDuration:.1 animations:^(){
            [path1 addCurveToPoint:endPoint controlPoint1:CGPointMake((endPoint.x-startPoint.x)/2+startPoint.x, startPoint.y) controlPoint2:CGPointMake((endPoint.x-startPoint.x)/2+startPoint.x, endPoint.y)];
        }];
    }
    CGPoint firstPoint = [[points firstObject] CGPointValue];
    CGPoint lastPoint = [[points lastObject] CGPointValue];
    CGPoint secondPoint = CGPointMake(lastPoint.x+2, lastPoint.y);
    CGPoint thirdPoint = CGPointMake(secondPoint.x, ViewHeight(self)+1);
    CGPoint forthPoint = CGPointMake(firstPoint.x-1, thirdPoint.y);
    CGPoint fifthPoint = CGPointMake(forthPoint.x, firstPoint.y);

    //把曲线封闭起来
    [path1 addLineToPoint:secondPoint];
    [path1 addLineToPoint:thirdPoint];
    [path1 addLineToPoint:forthPoint];
    [path1 addLineToPoint:fifthPoint];
    [path1 addLineToPoint:firstPoint];

    [path1 closePath];
    [[UIColor colorWithRed:80.0/255.0 green:187.0/255.0 blue:255/255.0 alpha:0.5] setFill];
    [path1 fill];

    [self.lineColor set];       //设置画笔颜色
    [path1 setLineWidth:2];     //设置画笔宽度
    path1.lineCapStyle = kCGLineCapRound;
    [path1 strokeWithBlendMode:kCGBlendModeNormal alpha:1];
}

代码里面本来只要将首位端点拉下来,然后相连就行的。我这里因为当时设计的原因,所以连到了外界区域。

之后添加点后的图如下:
这里写图片描述

基本完成了设计师的要求。
(看过后觉得有什么地方可以更正或者改进的地方,请给我回复,谢谢。。)

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值