创建任意形状的View

项目中要求手绘小座椅，也就是一个多边形并带边框的View，效果如下图：

座椅原型图.png

1. 首先将View切成上述形状：创建类继承UIView，重写initWithFrame，代码如下：

- (id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        CGFloat W = self.bounds.size.width;
        CGFloat H = self.bounds.size.height;
        
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        [shapeLayer setFillColor:[[UIColor whiteColor] CGColor]];
        
        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, NULL, W, H);
        CGPathAddLineToPoint(path, NULL, W, H*ClipRate_H);
        CGPathAddLineToPoint(path, NULL, W*DrawRate, H*ClipRate_H);
        CGPathAddLineToPoint(path, NULL, W*DrawRate, 0);
        CGPathAddLineToPoint(path, NULL, W*ClipRate_W, 0);
        CGPathAddLineToPoint(path, NULL, W*ClipRate_W, H*ClipRate_H);
        CGPathAddLineToPoint(path, NULL, 0, H*ClipRate_H);
        CGPathAddLineToPoint(path, NULL, 0, H);
        CGPathAddLineToPoint(path, NULL, W, H);
        
        CGPathCloseSubpath(path);
        [shapeLayer setPath:path];
        
        CFRelease(path);
        self.layer.mask = shapeLayer;
        //layer的mask，是种位掩蔽，在shapeLayer的填充区域中，alpha值不为零的部分，self会被绘制；alpha值为零的部分，self不会被绘制
    }
    return self;
}

控制器中应用：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor blackColor];
    FYBaseSeatView *seat1 = [[FYBaseSeatView alloc]initWithFrame:CGRectMake(100, 200, 48, 40)];
    seat1.backgroundColor = [UIColor redColor];
    
    FYBaseSeatView *seat2 = [[FYBaseSeatView alloc]initWithFrame:CGRectMake(200, 200, 48, 40)];
    seat2.backgroundColor = [UIColor redColor];
    
    [self.view addSubview:seat1];
    [self.view addSubview:seat2];
}

效果.png

2. 加边框，重写drawRect，代码如下：

- (void)drawRect:(CGRect)rect {
    
    CGFloat W = self.bounds.size.width;
    CGFloat H = self.bounds.size.height;
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, 1);  //线宽
    CGContextSetAllowsAntialiasing(context, true);
    CGContextSetRGBStrokeColor(context, 209.0/255.0, 209.0/255.0, 209.0/255.0, 1.0);  //线的颜色
    CGContextBeginPath(context);
    
    CGContextMoveToPoint(context, W, H);  //起点坐标
    CGContextAddLineToPoint(context, W, H*ClipRate_H);
    CGContextAddLineToPoint(context, W*DrawRate, H*ClipRate_H);
    CGContextAddLineToPoint(context, W*DrawRate, 0);
    CGContextAddLineToPoint(context, W*ClipRate_W, 0);
    CGContextAddLineToPoint(context, W*ClipRate_W, H*ClipRate_H);
    CGContextAddLineToPoint(context, 0, H*ClipRate_H);
    CGContextAddLineToPoint(context, 0, H);
    CGContextAddLineToPoint(context, W, H);
    
    CGContextStrokePath(context);
}

边框效果.jpeg

至此，实现了原型效果。

3.切出只有下半部分为圆角的View

- (id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        CGFloat W = self.bounds.size.width;
        CGFloat H = self.bounds.size.height;
        CGFloat radius = 10.0;
        
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        [shapeLayer setFillColor:[[UIColor whiteColor] CGColor]];
        
        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, NULL, W - radius, H);
        CGPathAddArc(path, NULL, W-radius, H-radius, radius, M_PI/2, 0.0, YES);
        CGPathAddLineToPoint(path, NULL, W, 0.0);
        CGPathAddLineToPoint(path, NULL, 0.0, 0.0);
        CGPathAddLineToPoint(path, NULL, 0.0, H - radius);
        CGPathAddArc(path, NULL, radius, H - radius, radius, M_PI, M_PI/2, YES);
        CGPathCloseSubpath(path);
        [shapeLayer setPath:path];
        CFRelease(path);
        self.layer.mask = shapeLayer;
       
    }
    return self;
}

效果.png