美文网首页杂项
UIBezierPath绘制小猪佩奇

UIBezierPath绘制小猪佩奇

作者: 明若晴空 | 来源:发表于2018-06-14 20:25 被阅读102次

    首先我们需要先了解一下UIBezierPath的语法及相关API的使用方法。

    顾名思义,UIBezierPath是一个路径,这个路径由一些直线或者曲线组成,可以画出一些像矩形,椭圆,弧形或者多边形等图形。

    我们可以把这些路径通过特定的方法渲染到当前绘画的上下文环境中。

    过程分为这样几个步骤:

    1、创建;

    2、配置;

    3、渲染;

    UIBezierPath对象可以在代码中被重用,特可以多次使用相同的对象去渲染相同的图形。

    画多边形:

    1、创建一个空路径,当前点还没有被指定,但必须明确指定;

    2、在还没开始画之前,通过 moveToPoint:指定当前点。

    3、其他的方法都会添加一条直线或者曲线到路径中。这些新添加的线都会开始于当前点,结束于我们指定的点。

    4、添加完成以后,新的线的终点就会自动成为当前点。

    一个UIBezierPath包含许多开的或闭的子路径,其中每条子路径代表一个连通路径。

    我们可以调用 closePath方法通过添加一条从当前点到子路径的第一个点的方式来关闭一个子路径。

    我们也可以调用moveToPoint:方法结束当前子路径(没有关闭子路径),设置新的子路径的起点。

    UIBezierPath对象的子路径共享相同的绘制属性。如果要对不同子路径使用不同的绘制属性,那么我们必须把不同的路径配置到不同的UIBezierPath对象中。

    配置完UIBezierPath对象的几何路径和属性后,我们可以使用stroke和fill方法来在当前的图文上下文环境中进行路径绘制。stroke方法通过使用当前的stroke颜色和UIBezierPath对象的属性(如 lineWidth、lineCapStyle、lineJoinStyle等)来勾画出路径的轮廓。同样的,fill方法是通过使用当前的填充色,在路径所包围起来的区域填充颜色。

    另外,使用UIBezierPath对象来绘制图形,我们还可以使用它来定义新的切图区域。addClip方法会将UIBezierPath对象所表示的形状和当前图文环境的切图区域做交集。在接下来的绘制中,只有位于这个交集区域的内容才会被绘制在图文环境中。

    创建UIBezierPath对象的方法:

    1、 + bezierPath

    创建并返回UIBezierPath对象;

    2、 + bezierPathWithRect:

    初始化矩形路径;

    3、 + bezierPathWithOvalInRect:

    初始化椭圆路径;

    4、 + bezierPathWithRoundedRect:cornerRadius:

    初始化圆角矩形路径,cornerRadius是圆角的半径;

    5、 + bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:

    初始圆角矩形路径,可以特定的圆化矩形的某个角;

    6、 + bezierPathWithArcCenter:radius:startAngle:endAngle:clockwise:

    初始化圆弧路径,可以指定半径,开始角度,结束角度,以及是否顺时针绘制;

    7、 + bezierPathWithCGPath:

    初始化 Core Graphics path对象;

    8、 - bezierPathByReversingPath

    通过反转当前UIBezierPath的路径来创建新的UIBezierPath路径;

    9、- init

    创建返回一个空的路径对象;

    构造路径的方法:

    1、 - moveToPoint:

    指定当前点;

    2、 - addLineToPoint:

    追加直线到当前路径;

    3、- addArcWithCenter:radius:startAngle:endAngle:clockwise:

    追加圆弧到当前路径;

    4、- addCurveToPoint:controlPoint1:controlPoint2:

    追加三次贝塞尔曲线到路径中;

    5、- addQuadCurveToPoint:controlPoint:

    追加四次贝塞尔曲线到路径中;

    6、- closePath

    关闭最近添加的子路径;

    7、- removeAllPoints

    删除所有点,也就是删除所有的子路径;

    8、- appendPath:

    追加特定的路径到该路径;

    9、CGPath

    路径的Core Graphics 表示.

    10、- CGPath路径的Core Graphics 表示.

    11、currentPoint

    绘制路径的当前点

    绘制属性:

    1、lineWidth

    路径线条宽度;

    2、lineCapStyle

    终点的形状;

    3、lineJoinStyle

    路径连接处节点的形状;

    4、miterLimit

    有助于避免线条连接处的尖峰的极限值;

    5、flatness

    决定曲线段渲染准确度的因子;

    6、usesEvenOddFillRule

    指示奇偶卷积规则是否用于绘制路径的布尔值;

    7、- setLineDash:count:phase:

    Sets the line-stroking pattern for the path.

    getLineDash:count:phase:

    Retrieves the line-stroking pattern for the path.

    绘制路径的方法:

    1、- fill

    使用当前的绘制属性画出路径所包围的区域;

    2、- fillWithBlendMode:alpha:

    使用特定的混合模式和透明度绘制路径所包围的区域;

    3、- stroke

    使用当前的绘制属性沿着路径画一条线;

    4、- strokeWithBlendMode:alpha:

    使用特定的混合模式和透明度沿着路径画一条线;

    切图路径的方法:

    addClip

    把路径所包围的区域和当前图文环境的切图路径做交集的结果作为当前的切图路径;

    命中检测的方法:

    1、- containsPoint:

    返回路径所包围的区域是否包含特定点的布尔值;

    2、empty

    返回路径是否没有有效元素的布尔值

    bounds

    路径的边框;

    1、- applyTransform:

    使用特定的放射变换矩阵转换路径上的所有点;

    CGAffineTransformMakeRotation(旋转的弧度)

    这个方法旋转的时候,是坐标系的旋转,正弧度表示逆时针旋转,负弧度表示顺时针旋转;

    CAShapeLayer

    在其坐标空间内可以画三次贝塞尔曲线的图层。

    形状由图层的内容和它的第一个子层之间复合而成的;

    下来我们使用上面的这些API绘制一个简单的动画片人物–小猪佩奇

    话不多说,我们先上一个最终的效果图:

    下面我们来介绍一下具体的绘制过程是怎样的!!!

    自定义一个UIView–PeppaPigView

    首先我们在自定义的UIView–PeppaPigView中,重写其- (void)drawRect:(CGRect)rect;方法:

    - (void)drawRect:(CGRect)rect

    {

        [self drawLeftArm];

        [self drawRightArm];

        [self drawBody];

        [self drawHead];

        [self drawNose];

        [self drawEyes];

        [self drawMouse];

        [self drawLegs];

        [self drawEar];

    }

    在这里我们把绘制小猪佩奇按照其不同的身体部位分成这样几个步骤:

    1、绘制左胳膊;

    2、绘制右胳膊;

    3、绘制身体;

    4、绘制头部;

    5、绘制鼻子;

    6、绘制眼睛;

    7、绘制嘴巴;

    8、绘制双腿;

    9、绘制耳朵;

    这些绘制的顺序,也是有技巧和次序的。部分部位的绘制顺序不能随意调换。比如绘制耳朵的方法必须放在最后,因为其中使用了addClip方法来确定切图的交集区域。如果放在最前面,必须重新设定和注意切图的交集区域。

    下面按照绘制的顺序来逐一介绍绘制的方法:

    1、绘制左胳膊:

    //左胳膊

    - (void)drawLeftArm

    {

        UIBezierPath *armPath1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(195, 700) radius:350 startAngle:-0.585 * M_PI endAngle:-0.68 * M_PI clockwise:NO];

        armPath1.lineWidth = 10.0;

        armPath1.lineCapStyle = kCGLineCapRound;

        armPath1.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor1 = [self colorWithHexValue:0xFC9BD7];

        [strokeColor1 set];

        [armPath1 stroke];

        UIColor *fillColor1 = [UIColor clearColor];

        [fillColor1 set];

        [armPath1 fill];

        UIBezierPath *armPath2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(7.5, 404.5) radius:20 startAngle:0.1 * M_PI endAngle:-0.5 * M_PI clockwise:NO];

        armPath2.lineWidth = 10.0;

        armPath2.lineCapStyle = kCGLineCapRound;

        armPath2.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor2 = [self colorWithHexValue:0xFC9BD7];

        [strokeColor2 set];

        [armPath2 stroke];

        UIColor *fillColor2 = [UIColor clearColor];

        [fillColor2 set];

        [armPath2 fill];

    }

    左胳膊的绘制很简单,主要绘制了一条弧;

    2、绘制右胳膊:

    //右胳膊

    - (void)drawRightArm

    {

        UIBezierPath *armPath1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(195, 700) radius:350 startAngle:-0.415 * M_PI endAngle:-0.32 * M_PI clockwise:YES];

        armPath1.lineWidth = 10.0;

        armPath1.lineCapStyle = kCGLineCapRound;

        armPath1.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor1 = [self colorWithHexValue:0xFC9BD7];

        [strokeColor1 set];

        [armPath1 stroke];

        UIColor *fillColor1 = [UIColor clearColor];

        [fillColor1 set];

        [armPath1 fill];

        UIBezierPath *armPath2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(382.5, 404.5) radius:20 startAngle:-0.5 * M_PI endAngle:-1.1* M_PI clockwise:NO];

        armPath2.lineWidth = 10.0;

        armPath2.lineCapStyle = kCGLineCapRound;

        armPath2.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor2 = [self colorWithHexValue:0xFC9BD7];

        [strokeColor2 set];

        [armPath2 stroke];

        UIColor *fillColor2 = [UIColor clearColor];

        [fillColor2 set];

        [armPath2 fill];

    }

    右胳膊的绘制和左胳膊的绘制基本相似。

    3、绘制身体:

    //身体

    - (void)drawBody

    {

        UIBezierPath *bodyPath1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(410, 620) radius:400 startAngle:-0.737 * M_PI endAngle:-0.93 * M_PI clockwise:NO];

        bodyPath1.lineWidth = 2.0;

        bodyPath1.lineCapStyle = kCGLineCapRound;

        bodyPath1.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor1 = [self colorWithHexValue:0xD01E34];

        [strokeColor1 set];

        [bodyPath1 stroke];

        UIColor *fillColor1 = [self colorWithHexValue:0xE03E4C];

        [fillColor1 set];

        [bodyPath1 fill];

        CGPoint currentPoint1 = [bodyPath1 currentPoint];

        UIBezierPath *bodyPath2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(-20, 620) radius:400 startAngle:-0.264 * M_PI endAngle:-0.07 * M_PI clockwise:YES];

        [bodyPath2 addLineToPoint:currentPoint1];

        bodyPath2.lineWidth = 2.0;

        bodyPath2.lineCapStyle = kCGLineCapRound;

        bodyPath2.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor2 = [self colorWithHexValue:0xD01E34];

        [strokeColor2 set];

        [bodyPath2 stroke];

        UIColor *fillColor2 = [self colorWithHexValue:0xE03E4C];

        [fillColor2 set];

        [bodyPath2 fill];

        CGPoint p0 = currentPoint1;

        CGPoint p1 = [[bodyPath1 bezierPathByReversingPath] currentPoint];

        CGPoint p2 = [[bodyPath2 bezierPathByReversingPath] currentPoint];

        UIBezierPath *innerPath = [UIBezierPath bezierPath];

        [innerPath moveToPoint:p0];

        [innerPath addLineToPoint:p1];

        [innerPath addLineToPoint:p2];

        [innerPath closePath];

        UIColor *strokeColorInner = [self colorWithHexValue:0xE03E4C];

        [strokeColorInner set];

        [innerPath stroke];

        UIColor *fillColorInner = [self colorWithHexValue:0xE03E4C];

        [fillColorInner set];

        [innerPath fill];

    }

    身体部分的绘制,也是由两条圆弧和一条直线绘制而成。后面的innerPath主要是为了最后上色用的封闭路径。

    4、绘制头部:

    //头(含脸颊)

    - (void)drawHead

    {

        UIBezierPath *headPath1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(120, 355) radius:240 startAngle:-0.57 * M_PI endAngle:-0.27 * M_PI clockwise:YES];

        headPath1.lineWidth = 2.0;

        headPath1.lineCapStyle = kCGLineCapRound;

        headPath1.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor1 = [self colorWithHexValue:0xE675C4];

        [strokeColor1 set];

        [headPath1 stroke];

        UIColor *fillColor1 = [self colorWithHexValue:0xFC9BD7];

        [fillColor1 set];

        [headPath1 fill];

        UIBezierPath *headPath2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(192, 235) radius:105 startAngle:-0.2 * M_PI endAngle:0.85 * M_PI clockwise:YES];

        headPath2.lineWidth = 2.0;

        headPath2.lineCapStyle = kCGLineCapRound;

        headPath2.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor2 = [self colorWithHexValue:0xE675C4];

        [strokeColor2 set];

        [headPath2 stroke];

        UIColor *fillColor2 = [self colorWithHexValue:0xFC9BD7];

        [fillColor2 set];

        [headPath2 fill];

        UIBezierPath *headPath3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(160, 250) radius:70 startAngle:0.85 * M_PI endAngle:-0.72 * M_PI clockwise:YES];

        headPath3.lineWidth = 2.0;

        headPath3.lineCapStyle = kCGLineCapRound;

        headPath3.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor3 = [self colorWithHexValue:0xE675C4];

        [strokeColor3 set];

        [headPath3 stroke];

        UIColor *fillColor3 = [self colorWithHexValue:0xFC9BD7];

        [fillColor3 set];

        [headPath3 fill];

        UIBezierPath *headPath4 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(130, 110) radius:90 startAngle:0.55 * M_PI endAngle:0.78 * M_PI clockwise:YES];

        headPath4.lineWidth = 2.0;

        headPath4.lineCapStyle = kCGLineCapRound;

        headPath4.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor4 = [self colorWithHexValue:0xE675C4];

        [strokeColor4 set];

        [headPath4 stroke];

        UIColor *fillColor4 = [self colorWithHexValue:0xFC9BD7];

        [fillColor4 set];

        [headPath4 fill];

        UIBezierPath *headPath5 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(220, 215, 60, 60)];

        headPath5.lineWidth = 2.0;

        headPath5.lineCapStyle = kCGLineCapRound;

        headPath5.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor5 = [self colorWithHexValue:0xFA72C7];

        [strokeColor5 set];

        [headPath5 stroke];

        UIColor *fillColor5 = [self colorWithHexValue:0xFA72C7];

        [fillColor5 set];

        [headPath5 fill];

        CGPoint p0 = [[headPath1 bezierPathByReversingPath] currentPoint];

        CGPoint p1 = [headPath1 currentPoint];

        CGPoint p2 = [headPath2 currentPoint];

        CGPoint p3 = [headPath3 currentPoint];

        CGPoint p4 = [headPath4 currentPoint];

        UIBezierPath *innerPath = [UIBezierPath bezierPath];

        [innerPath moveToPoint:p0];

        [innerPath addLineToPoint:p1];

        [innerPath addLineToPoint:p2];

        [innerPath addLineToPoint:CGPointMake(p3.x-4, p3.y)];

        [innerPath addLineToPoint:p4];

        [innerPath closePath];

        UIColor *strokeColorInner = [self colorWithHexValue:0xFC9BD7];

        [strokeColorInner set];

        [innerPath stroke];

        UIColor *fillColorInner = [self colorWithHexValue:0xFC9BD7];

        [fillColorInner set];

        [innerPath fill];

    }

    头部的绘制主要是有四段圆弧拼接而成,其中headPath5的圆表示脸颊部分,innerPath也是为了最终上色使用的封闭路径。

    5、绘制鼻子;

    - (void)drawNose

    {

        UIBezierPath *nosePath1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(90, 90, 40, 50)];

        nosePath1.lineWidth = 2.0;

        nosePath1.lineCapStyle = kCGLineCapRound;

        nosePath1.lineJoinStyle = kCGLineCapRound;

        CGAffineTransform transform1 = CGAffineTransformMakeRotation(0.1*M_PI);

        [nosePath1 applyTransform: transform1];

        UIColor *strokeColor1 = [self colorWithHexValue:0xE675C4];

        [strokeColor1 set];

        [nosePath1 stroke];

        UIColor *fillColor1 = [self colorWithHexValue:0xFC9BD7];

        [fillColor1 set];

        [nosePath1 fill];

        UIBezierPath *nosePath2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(99, 109, 8, 10)];

        nosePath2.lineWidth = 1.5;

        nosePath2.lineCapStyle = kCGLineCapRound;

        nosePath2.lineJoinStyle = kCGLineCapRound;

        CGAffineTransform transform2 = CGAffineTransformMakeRotation(0.1*M_PI);

        [nosePath2 applyTransform: transform2];

        UIColor *strokeColor2 = [self colorWithHexValue:0xE675C4];

        [strokeColor2 set];

        [nosePath2 stroke];

        UIColor *fillColor2 = [self colorWithHexValue:0xE675C4];

        [fillColor2 set];

        [nosePath2 fill];

        UIBezierPath *nosePath3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(114, 113, 8, 10)];

        nosePath3.lineWidth = 1.5;

        nosePath3.lineCapStyle = kCGLineCapRound;

        nosePath3.lineJoinStyle = kCGLineCapRound;

        CGAffineTransform transform3 = CGAffineTransformMakeRotation(0.1*M_PI);

        [nosePath3 applyTransform: transform3];

        UIColor *strokeColor3 = [self colorWithHexValue:0xE675C4];

        [strokeColor3 set];

        [nosePath3 stroke];

        UIColor *fillColor3 = [self colorWithHexValue:0xE675C4];

        [fillColor3 set];

        [nosePath3 fill];

    }

    佩奇鼻子的绘制主要主要由一个大的椭圆和两个小的椭圆鼻孔组成的,只是对需要对我们平常所绘制的椭圆使用applyTransform做一个旋转。旋转的角度(弧度制)作为参数传给CGAffineTransformMakeRotation方法。

    6、绘制眼睛:

    //眼睛

    - (void)drawEyes

    {

        UIBezierPath *eyePath1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(135, 143, 45, 45)];

        eyePath1.lineWidth = 2.0;

        eyePath1.lineCapStyle = kCGLineCapRound;

        eyePath1.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor1 = [UIColor blackColor];

        [strokeColor1 set];

        [eyePath1 stroke];

        UIColor *fillColor1 = [UIColor whiteColor];

        [fillColor1 set];

        [eyePath1 fill];

        UIBezierPath *eyePath2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(190, 165, 45, 45)];

        eyePath2.lineWidth = 2.0;

        eyePath2.lineCapStyle = kCGLineCapRound;

        eyePath2.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor2 = [UIColor blackColor];

        [strokeColor2 set];

        [eyePath2 stroke];

        UIColor *fillColor2 = [UIColor whiteColor];

        [fillColor2 set];

        [eyePath2 fill];

        UIBezierPath *eyePath3 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(145, 163, 10, 10)];

        eyePath3.lineWidth = 2.0;

        eyePath3.lineCapStyle = kCGLineCapRound;

        eyePath3.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor3 = [UIColor blackColor];

        [strokeColor3 set];

        [eyePath3 stroke];

        UIColor *fillColor3 = [UIColor blackColor];

        [fillColor3 set];

        [eyePath3 fill];

        UIBezierPath *eyePath4 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(200, 185, 10, 10)];

        eyePath4.lineWidth = 2.0;

        eyePath4.lineCapStyle = kCGLineCapRound;

        eyePath4.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor4 = [UIColor blackColor];

        [strokeColor4 set];

        [eyePath4 stroke];

        UIColor *fillColor4 = [UIColor blackColor];

        [fillColor4 set];

        [eyePath4 fill];

    }

    眼睛的绘制很简单,不需要任何多余的操作,只需要绘制四个圆即可。

    7、绘制嘴巴;

    //嘴巴

    - (void)drawMouse

    {

        UIBezierPath *mousePath1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(190, 235) radius:60 startAngle:0.45 * M_PI endAngle:0.9 * M_PI clockwise:YES];

        mousePath1.lineWidth = 2.0;

        mousePath1.lineCapStyle = kCGLineCapRound;

        mousePath1.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor1 = [self colorWithHexValue:0xC62D80];

        [strokeColor1 set];

        [mousePath1 stroke];

        UIColor *fillColor1 = [UIColor clearColor];

        [fillColor1 set];

        [mousePath1 fill];

    }

    嘴巴的绘制是最简单的,只需要一条圆弧。

    8、绘制双腿:

    //双腿

    - (void)drawLegs

    {

        UIBezierPath *LegPath = [UIBezierPath bezierPath];

        [LegPath moveToPoint:CGPointMake(115, 533)];

        [LegPath addLineToPoint:CGPointMake(115, 601)];

        [LegPath addLineToPoint:CGPointMake(135, 603)];

        [LegPath addLineToPoint:CGPointMake(135, 533)];

        [LegPath moveToPoint:CGPointMake(255, 533)];

        [LegPath addLineToPoint:CGPointMake(255, 601)];

        [LegPath addLineToPoint:CGPointMake(275, 603)];

        [LegPath addLineToPoint:CGPointMake(275, 533)];

        LegPath.lineWidth = 2.0;

        LegPath.lineCapStyle = kCGLineCapRound;

        LegPath.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor = [self colorWithHexValue:0xFC9BD7];

        [strokeColor set];

        [LegPath stroke];

        UIColor *fillColor = [self colorWithHexValue:0xFC9BD7];

        [fillColor set];

        [LegPath fill];

        UIBezierPath *footPath1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(135, 613) radius:10 startAngle:-0.5 * M_PI endAngle:0.5 * M_PI clockwise:YES];

        footPath1.lineWidth = 2.0;

        footPath1.lineCapStyle = kCGLineCapRound;

        footPath1.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor1 = [UIColor blackColor];

        [strokeColor1 set];

        [footPath1 stroke];

        UIColor *fillColor1 = [UIColor blackColor];

        [fillColor1 set];

        [footPath1 fill];

        UIBezierPath *footPath2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(275, 613) radius:10 startAngle:-0.5 * M_PI endAngle:0.5 * M_PI clockwise:YES];

        footPath2.lineWidth = 2.0;

        footPath2.lineCapStyle = kCGLineCapRound;

        footPath2.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor2 = [UIColor blackColor];

        [strokeColor2 set];

        [footPath2 stroke];

        UIColor *fillColor2 = [UIColor blackColor];

        [fillColor2 set];

        [footPath2 fill];

        UIBezierPath *footPath3 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(55, 613) radius:15 startAngle:-0.5 * M_PI endAngle:0.5 * M_PI clockwise:NO];

        footPath3.lineWidth = 2.0;

        footPath3.lineCapStyle = kCGLineCapRound;

        footPath3.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor3 = [UIColor blackColor];

        [strokeColor3 set];

        [footPath3 stroke];

        UIColor *fillColor3 = [UIColor blackColor];

        [fillColor3 set];

        [footPath3 fill];

        UIBezierPath *footPath4 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(195, 613) radius:15 startAngle:-0.5 * M_PI endAngle:0.5 * M_PI clockwise:NO];

        footPath4.lineWidth = 2.0;

        footPath4.lineCapStyle = kCGLineCapRound;

        footPath4.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor4 = [UIColor blackColor];

        [strokeColor4 set];

        [footPath4 stroke];

        UIColor *fillColor4 = [UIColor blackColor];

        [fillColor4 set];

        [footPath4 fill];

        UIBezierPath *footPath = [UIBezierPath bezierPath];

        [footPath moveToPoint:CGPointMake(55, 598)];

        [footPath addLineToPoint:CGPointMake(135, 603)];

        [footPath addLineToPoint:CGPointMake(135, 623)];

        [footPath addLineToPoint:CGPointMake(55, 628)];

        [footPath moveToPoint:CGPointMake(195, 598)];

        [footPath addLineToPoint:CGPointMake(275, 603)];

        [footPath addLineToPoint:CGPointMake(275, 623)];

        [footPath addLineToPoint:CGPointMake(195, 628)];

        footPath.lineWidth = 2.0;

        footPath.lineCapStyle = kCGLineCapRound;

        footPath.lineJoinStyle = kCGLineCapRound;

        UIColor *strokeColor5 = [UIColor blackColor];

        [strokeColor5 set];

        [footPath stroke];

        UIColor *fillColor5 = [UIColor blackColor];

        [fillColor5 set];

        [footPath fill];

    }

    双腿的绘制是由一些直线条和半圆形的弧组成的。

    9、绘制耳朵:

    //耳朵

    - (void)drawEar

    {

        UIBezierPath *clipPath1 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(210, 130) radius:120 startAngle:0.19 * M_PI endAngle: 1.08 * M_PI clockwise:NO];

        [clipPath1 addLineToPoint:CGPointMake(210, 130)];

        [clipPath1 closePath];

        [clipPath1 addClip];

        UIBezierPath *earPath1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(200, 10, 55, 80)];

        earPath1.lineWidth = 2.0;

        earPath1.lineCapStyle = kCGLineCapRound;

        earPath1.lineJoinStyle = kCGLineCapRound;

        CGAffineTransform transform1 = CGAffineTransformMakeRotation(0.09*M_PI);

        [earPath1 applyTransform: transform1];

        UIColor *strokeColor2 = [self colorWithHexValue:0xE675C4];

        [strokeColor2 set];

        [earPath1 stroke];

        UIColor *fillColor2 = [self colorWithHexValue:0xFC9BD7];

        [fillColor2 set];

        [earPath1 fill];

        UIBezierPath *earPath2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(270, 10, 55, 80)];

        earPath2.lineWidth = 2.0;

        earPath2.lineCapStyle = kCGLineCapRound;

        earPath2.lineJoinStyle = kCGLineCapRound;

        CGAffineTransform transform2 = CGAffineTransformMakeRotation(0.1*M_PI);

        [earPath2 applyTransform: transform2];

        UIColor *strokeColor3 = [self colorWithHexValue:0xE675C4];

        [strokeColor3 set];

        [earPath2 stroke];

        UIColor *fillColor3 = [self colorWithHexValue:0xFC9BD7];

        [fillColor3 set];

        [earPath2 fill];

    }

    耳朵的绘制咋一看不是很难,由两个椭圆组成,并作了一点旋转,但是需要截取椭圆的小部分。在实现这个截取小部分时,使用addClip方法来设定新的切图交集区域,只要在切图交集区域内的路径,才会绘制,这样就可以把椭圆的那一小部分截取了。

    但是后面的绘制也都会在新的切图交集区域内绘制,因此,需要把耳朵的绘制放在所有绘制的最后,防止其他部分绘制不能正常绘制。

    这样我们就绘制完了这只可爱的社会人–小猪佩奇:

    相关文章

      网友评论

      本文标题:UIBezierPath绘制小猪佩奇

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