IOS开发之切除你心中的那个图案

前言

      切除你心中的那个图案,主要是为了更好地复合产品需求。就是有美工的配合,有的模块出来的也不是太符合要求,这就需要抛弃美工,自己处理。

1、呼朋唤友

群的特点:

  1、iOS 开发交流群,每周都有更新新的内容。

  2、群里有3~5年的资深开发者。

  3、群员在App开发过程中遇到什么问题,可以在群里提问。

  4、群员在App开发中,如果遇到难实现的功能或者模块,可以在群里提出,有人员帮助你实现。

  5、加入群后,可以get到App 开发中的一些小功能模块。

  群号是:185341804   群名字:成功QQ吧

  群主号:1542100658 (qq)



2、效果展示


3、本demo 可以绘制的类型

typedef enum CutFigureType{

    ArrowBtn=0// 箭头按钮

    HalfAngleBtn,// 半圆角按钮

    Pentagram,   // 五角星

    Stamps,      // 邮票

    Heart,       // 心形

    Bat ,        // 蝙蝠

    Glass        // 酒杯

}CutFigureType;

更多功能等你来扩展

4、功能介绍
     本功能主要使用了 UIview 对象的 layer 层的一个 mask 属性。这个属性的功能是:切除多余的模块。就是在这个路径内的是为显性,否则,为隐性。
5、代码片段

1》尖角和半圆角按钮

#pragma mark 箭头按钮

-(void)arrowButtonTager:(UIView*)tagerView{

    CAShapeLayer  * shareLayer = [CAShapeLayerlayer];

    /**

     创建动态可变的路径

     */

    CGMutablePathRef pathRef =CGPathCreateMutable();

    /**

     获取按钮的宽度&高度

     */

    CGFloat weightBtn = tagerView.bounds.size.width;

    CGFloat heightBtn = tagerView.bounds.size.height;

    /**

     开始设置路径的走向

     */

    CGPathMoveToPoint(pathRef,NULL, 0,0);

    /**

     开始添加路径

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn- heightBtn *0.5, 0.0);

    CGPathAddLineToPoint(pathRef,NULL, weightBtn, heightBtn *0.5);

    CGPathAddLineToPoint(pathRef,NULL, weightBtn- heightBtn *0.5, heightBtn);

    CGPathAddLineToPoint(pathRef,NULL, 0.0, heightBtn);

    CGPathAddLineToPoint(pathRef,NULL, 0.0,0.0);

    /**

     闭合路径

     */

    CGPathCloseSubpath(pathRef);

    /**

     进行路径的渲染

     */

    shareLayer.path = pathRef;

    tagerView.layer.mask =  shareLayer;

    /**

     从新绘制

     */

    [tagerView setNeedsDisplay];

}


#pragma mark 半角型按钮

-(void)halfAngleBtn:(UIView*)tagerView{

    CAShapeLayer  * shareLayer = [CAShapeLayerlayer];

    /**

     创建动态可变的路径

     */

    CGMutablePathRef pathRef =CGPathCreateMutable();

    /**

     获取按钮的宽度&高度

     */

    CGFloat weightBtn = tagerView.bounds.size.width;

    CGFloat heightBtn = tagerView.bounds.size.height;

    /**

     开始设置路径的走向

     */

    CGPathMoveToPoint(pathRef,NULL, 0,0);

    /**

     开始添加路径

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn- heightBtn *0.5, 0.0);

    /**

     进行弧度变形

     */

    CGPathAddArc(pathRef,NULL, weightBtn-heightBtn *0.5, heightBtn * 0.5, heightBtn *0.5,M_PI_2, M_PI_2 *3, YES);

    CGPathAddLineToPoint(pathRef,NULL, weightBtn- heightBtn *0.5, heightBtn);

    CGPathAddLineToPoint(pathRef,NULL, 0.0, heightBtn);

    /**

     闭合路径

     */

    CGPathCloseSubpath(pathRef);

    /**

     进行路径的渲染

     */

    shareLayer.path = pathRef;

    tagerView.layer.mask =  shareLayer;

    /**

     从新绘制

     */

    [tagerView setNeedsDisplay];

}


2》五角星的绘制

#pragma mark  五角星

-(void)pentagram:(UIView*)tagerView{

    /**

     创建一个显示层

     */

    CAShapeLayer * shapeLayer = [CAShapeLayerlayer];

    /**

     创建可变路径

     */

    CGMutablePathRef pathRef  =CGPathCreateMutable();

    /**

     获取按钮的宽度&高度

     */

    CGFloat weightBtn = tagerView.bounds.size.width;

    CGFloat heightBtn = tagerView.bounds.size.height;

    /**

     选择最小的

     */

    CGFloat minValue =MIN(weightBtn, heightBtn);

    /**

     圆的半径

     */

    CGFloat radiusValue  = minValue *0.5;

    /**

     五角星内接圆半径

     */

    CGFloat inscribedRadiusValue = radiusValue *sinf(18*M_PI/180 )/sinf(54*M_PI/180 );

    /**

     起始点

     */

    CGPathMoveToPoint(pathRef,NULL, weightBtn * 0.5, heightBtn*0.5 - radiusValue);

    /**

     第二个点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn* 0.5 +sinf(36*M_PI/180)*inscribedRadiusValue, heightBtn*0.5 -cosf(36*M_PI/180)* inscribedRadiusValue);

    /**

     第三个点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn * 0.5+cosf(18 *M_PI/180)*radiusValue, heightBtn*0.5 -sinf(18 *M_PI/180)*radiusValue);

    /**

     第四个点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn* 0.5 +cosf(18 *M_PI/180)* inscribedRadiusValue, heightBtn*0.5 +sinf(18*M_PI/180)*inscribedRadiusValue);

    /**

     第五个点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn * 0.5+cosf(54*M_PI/180)*radiusValue, heightBtn*0.5 + sinf(54*M_PI/180)* radiusValue);

    /**

     插入点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn * 0.5, heightBtn*0.5 + inscribedRadiusValue);

    /**

     第六个点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn * 0.5-cosf(54*M_PI/180)*radiusValue, heightBtn*0.5 + sinf(54*M_PI/180)* radiusValue);

    /**

     第七个点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn* 0.5 -cosf(18 *M_PI/180)* inscribedRadiusValue, heightBtn*0.5 +sinf(18*M_PI/180)*inscribedRadiusValue);

    /**

     第八个点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn * 0.5-cosf(18 *M_PI/180)*radiusValue, heightBtn*0.5 -sinf(18 *M_PI/180)*radiusValue);

    /**

     第九个点

     */

    CGPathAddLineToPoint(pathRef,NULL, weightBtn* 0.5 - sinf(36*M_PI/180)*inscribedRadiusValue, heightBtn*0.5 -cosf(36*M_PI/180)* inscribedRadiusValue);

    /**

     闭合路径

     */

    CGPathCloseSubpath(pathRef);

    /**

     进行渲染

     */

    shapeLayer.path = pathRef;

    tagerView.layer.mask = shapeLayer;

    /**

     绘制

     */

    [tagerView setNeedsDisplay];

}

切割时的参考图




3》心形

#pragma mark  心形绘制

-(void)heart:(UIView*)tagerView{

    /**

     创建一个显示层

     */

    CAShapeLayer * shapeLayer = [CAShapeLayerlayer];

    /**

     创建可变路径

     */

    CGMutablePathRef pathRef  =CGPathCreateMutable();

    /**

     获取按钮的宽度&高度

     */

    CGFloat weightBtn = tagerView.bounds.size.width;

    CGFloat heightBtn = tagerView.bounds.size.height;

    /**

     曲线路径

     */

    UIBezierPath * bezierPath = [UIBezierPathbezierPath];

    bezierPath.lineWidth =0.5;

    /**

     起始点

     */

    [bezierPath moveToPoint:CGPointMake(weightBtn*0.5, heightBtn*0.5-5)];

    /**

     绘制曲线

     */

    [bezierPath addCurveToPoint:CGPointMake(weightBtn*0.5, heightBtn*0.5+60)controlPoint1:CGPointMake(weightBtn*0.5+15,heightBtn*0.5-40)controlPoint2:CGPointMake(weightBtn*0.5+80,heightBtn * 0.5+10)];

    CGPathAddPath(pathRef,NULL, bezierPath.CGPath);

    /**

     曲线路径

     */

    UIBezierPath * bezierPath2 = [UIBezierPathbezierPath];

    bezierPath2.lineWidth =0.5;

    /**

     起始点

     */

    [bezierPath2 moveToPoint:CGPointMake(weightBtn*0.5, heightBtn*0.5+60)];

    /**

     绘制曲线

     */

    [bezierPath2 addCurveToPoint:CGPointMake(weightBtn*0.5, heightBtn*0.5-5)controlPoint1:CGPointMake(weightBtn*0.5-80, heightBtn * 0.5+10)controlPoint2:CGPointMake(weightBtn*0.5-15,heightBtn*0.5-40)];

    CGPathAddPath(pathRef,NULL, bezierPath2.CGPath);

    /**

     闭合路径

     */

    CGPathCloseSubpath(pathRef);

    /**

     进行渲染

     */

    shapeLayer.path = pathRef;

    tagerView.layer.mask = shapeLayer;

    /**

     绘制

     */

    [tagerView setNeedsDisplay];

}

切割的参考图


4》蝙蝠形

-(void)Bat:(UIView*)tagerView{

    /**

     创建一个显示层

     */

    CAShapeLayer * shapeLayer = [CAShapeLayerlayer];

    /**

     创建可变路径

     */

    CGMutablePathRef pathRef  =CGPathCreateMutable();

    /**

     获取按钮的宽度&高度

     */

    CGFloat weightBtn = tagerView.bounds.size.width;

    CGFloat heightBtn = tagerView.bounds.size.height;

    /**

     绘制蝙蝠轮廓

     */

    UIBezierPath * LeftBezierPath = [UIBezierPathbezierPath];

    /**

     起始点

     */

    [LeftBezierPath moveToPoint:CGPointMake(weightBtn*0.5-140, heightBtn*0.5 + 40)];

    /**

     轮廓线1

     */

    [LeftBezierPath addCurveToPoint:CGPointMake(weightBtn*0.5-10, heightBtn * 0.5) controlPoint1:CGPointMake(weightBtn*0.5-90, heightBtn*0.5-50)controlPoint2:CGPointMake(weightBtn*0.5-30, heightBtn*0.5)];

    [LeftBezierPath addLineToPoint:CGPointMake(weightBtn*0.5-5, heightBtn * 0.5)];

    [LeftBezierPath addLineToPoint:CGPointMake(weightBtn*0.5-10, heightBtn * 0.5-15)];

    [LeftBezierPath addLineToPoint:CGPointMake(weightBtn*0.5,heightBtn*0.5-13)];

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5+5, heightBtn*0.5-4)radius:11startAngle:5/3 *M_PI endAngle:5.1/3.0 *M_PI clockwise:YES];

    [LeftBezierPath addLineToPoint:CGPointMake(weightBtn*0.5+18,heightBtn*0.5-20)];

    [LeftBezierPath addLineToPoint:CGPointMake(weightBtn*0.5+20,heightBtn*0.5-0)];

    [LeftBezierPath addCurveToPoint:CGPointMake(weightBtn*0.5+150, heightBtn * 0.5 -40)controlPoint1:CGPointMake(weightBtn*0.5+50, heightBtn*0.5-10)controlPoint2:CGPointMake(weightBtn*0.5+40, heightBtn*0.5-70)];

    /**

     绘制翅膀的图形

     */

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5+130, heightBtn*0.5-15.5)radius:27startAngle:4.8/3 *M_PI endAngle:3/3.0 *M_PI clockwise:NO];

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5+95, heightBtn*0.5+10)radius:25startAngle:4.8/3 *M_PI endAngle:3/3.0 *M_PI clockwise:NO];

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5+65, heightBtn*0.5+30.5)radius:20startAngle:4.8/3 *M_PI endAngle:3/3.0 *M_PI clockwise:NO];

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5+35, heightBtn*0.5+35)radius:10startAngle:4.8/3 *M_PI endAngle:3.2/3.0 *M_PI clockwise:NO];

    [LeftBezierPath addLineToPoint:CGPointMake(weightBtn*0.5+20,heightBtn*0.5+45)];

    [LeftBezierPath addLineToPoint:CGPointMake(weightBtn*0.5+10,heightBtn*0.5+35)];

    /**

     左边翅膀

     */

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5, heightBtn*0.5+40)radius:10startAngle:5.3/3 *M_PI endAngle:3.5/3.0 *M_PI clockwise:NO];

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5-30, heightBtn*0.5+50.5)radius:20startAngle:5.5/3 *M_PI endAngle:4.3/3.0 *M_PI clockwise:NO];

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5-55, heightBtn*0.5+44)radius:25startAngle:5.5/3 *M_PI endAngle:4.0/3.0 *M_PI clockwise:NO];

    [LeftBezierPath addArcWithCenter:CGPointMake(weightBtn*0.5-105, heightBtn*0.5+45.5)radius:30startAngle:5.6/3 *M_PI endAngle:3.5/3.0 *M_PI clockwise:NO];

    /**

     组合路线

     */

    CGPathAddPath(pathRef,NULL, LeftBezierPath.CGPath);

    /**

     闭合路径

     */

    CGPathCloseSubpath(pathRef);

    /**

     进行渲染

     */

    shapeLayer.path = pathRef;

    tagerView.layer.mask = shapeLayer;

    /**

     绘制

     */

    [tagerView setNeedsDisplay];

}

切割时的参考图


5》邮票绘制

#pragma mark  邮票

-(void)stamps:(UIView*)tagerView{

    /**

     创建一个显示层

     */

    CAShapeLayer * shapeLayer = [CAShapeLayerlayer];

    /**

     创建可变路径

     */

    CGMutablePathRef pathRef  =CGPathCreateMutable();

    /**

     获取按钮的宽度&高度

     */

    CGFloat weightBtn = tagerView.bounds.size.width;

    CGFloat heightBtn = tagerView.bounds.size.height;

    CGPathMoveToPoint(pathRef,NULL, 0,10);

    for (unsigned i =0; i<weightBtn/20; i++) {

        CGPathAddArc(pathRef,NULL, 10 + i*20,10, 10,0, M_PI,YES);

    }

    CGPathAddArc(pathRef,NULL, weightBtn-10,10, 10,M_PI, M_PI_2 *3, YES);

    for (unsigned i =0; i<heightBtn/20; i++) {

        CGPathAddArc(pathRef,NULL, weightBtn-10,30 + i*20,10, M_PI_2,M_PI_2*3,YES);

    }

    CGPathAddArc(pathRef,NULL, weightBtn-10,heightBtn-10, 10,M_PI_2 * 3,M_PI_2 * 4,YES);

    for (unsigned i =0; i<weightBtn/20; i++) {

        CGPathAddArc(pathRef,NULL,weightBtn- (30 + i*20),heightBtn-10, 10,M_PI, M_PI*2, YES);

    }

    CGPathAddArc(pathRef,NULL,10,heightBtn-10, 10,M_PI_2 * 4,M_PI_2 * 5,YES);

    for (unsigned i =0; i<heightBtn/20; i++) {

        CGPathAddArc(pathRef,NULL,10,heightBtn-(30 + i*20),10, M_PI_2*3, M_PI_2*5,YES);

    }

    CGPathAddArc(pathRef,NULL,10,10,10, M_PI_2 *3, M_PI_2 *4, YES);


    /**

     闭合路径

     */

    CGPathCloseSubpath(pathRef);

    /**

     进行渲染

     */

    shapeLayer.path = pathRef;

    tagerView.layer.mask = shapeLayer;

    /**

     绘制

     */

    [tagerView setNeedsDisplay];

}

6、代码下载
https://pan.baidu.com/s/1i4BB4vr


猜你喜欢

转载自blog.csdn.net/zhoushuangjian511/article/details/70805164