博客> 绘制多边形和不规则按钮
绘制多边形和不规则按钮
2017-11-20 17:25 评论:0 阅读:364 xiaomu

绘制多边形和不规则按钮。要结合上次提到的贝塞尔曲线和CAShapeLayer,去绘制你想要的形状。然后通过layer层的遮罩mask,进行设置,但仅仅这样是不够的,没有遮挡的部分也会响应点击。所以要重写Button的这个方法:pointInside,之后会详细介绍

先简单介绍一下遮罩mask这个属性: 比如layerA是layerB的mask,即layerB.mask = layerA; 那么layerA上透明的部分,会被绘制成白色挡住layerB(貌似都是白色,不知道能不能弄成其他颜色); layerA上不透明的部分,会被绘制成透明,显示出layerB的内容 即把你用贝塞尔曲线绘制的shapeLayer赋给button的layer.mask就OK了。

然后介绍一下 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event:点击button时,会回调这个方法,参数是你点击的坐标。在里面判断该坐标点是否在path内,YES则响应,NO则不响应。

自定义封装的Button: //绘制按钮时添加path遮罩

  • (void)drawRect:(CGRect)rect { [super drawRect:rect]; CAShapeLayer *shapLayer = [CAShapeLayer layer]; shapLayer.path = self.path.CGPath; self.layer.mask = shapLayer; }

//覆盖方法,点击时判断点是否在path内,YES则响应,NO则不响应

  • (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { BOOL res = [super pointInside:point withEvent:event]; if (res) { if ([self.path containsPoint:point]) { return YES; } return NO; } return NO; }

ViewController:

  • (void)viewDidLoad {

    //六边形 MCShapedButton *btn1 = [MCShapedButton buttonWithType:UIButtonTypeCustom]; btn1.frame = CGRectMake(50, 250, 100, 100); btn1.path = [self getPath:1]; [btn1 setTitle:@"按钮1" forState:UIControlStateNormal]; [btn1 addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside]; btn1.backgroundColor = [UIColor greenColor]; [self.view addSubview:btn1];

    //五边形 MCShapedButton *btn2 = [MCShapedButton buttonWithType:UIButtonTypeCustom]; btn2.frame = CGRectMake(160, 250, 100, 90); btn2.path = [self getPath:2]; [btn2 setTitle:@"按钮2" forState:UIControlStateNormal]; [btn2 addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside]; btn2.backgroundColor = [UIColor greenColor]; [self.view addSubview:btn2];

    //随意 MCShapedButton *btn3 = [MCShapedButton buttonWithType:UIButtonTypeCustom]; btn3.frame = CGRectMake(10, 370, 200, 100); btn3.path = [self getPath:3]; [btn3 setTitle:@"按钮3" forState:UIControlStateNormal]; [btn3 addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside]; btn3.backgroundColor = [UIColor greenColor]; [self.view addSubview:btn3]; }

//获取遮罩path

  • (UIBezierPath )getPath:(NSInteger)num { switch (num) { case 1: { float viewWidth = 100; UIBezierPath path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake((sin(M_1_PI / 180 60)) (viewWidth / 2), (viewWidth / 4))]; [path addLineToPoint:CGPointMake((viewWidth / 2), 0)]; [path addLineToPoint:CGPointMake(viewWidth - ((sin(M_1_PI / 180 60)) (viewWidth / 2)), (viewWidth / 4))]; [path addLineToPoint:CGPointMake(viewWidth - ((sin(M_1_PI / 180 60)) (viewWidth / 2)), (viewWidth / 2) + (viewWidth / 4))]; [path addLineToPoint:CGPointMake((viewWidth / 2), viewWidth)]; [path addLineToPoint:CGPointMake((sin(M_1_PI / 180 60)) (viewWidth / 2), (viewWidth / 2) + (viewWidth / 4))]; [path closePath]; return path; } break; case 2: { UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(50.0, 0.0)]; [path addLineToPoint:CGPointMake(100.0, 35.0)]; [path addLineToPoint:CGPointMake(80, 90)]; [path addLineToPoint:CGPointMake(20.0, 90)]; [path addLineToPoint:CGPointMake(0.0, 35.0)]; [path closePath]; return path; } break; default: return nil; break; } }
收藏
0
sina weixin mail 回到顶部