边框的绘制

作者: 最晴天 | 来源:发表于2017-07-18 09:50 被阅读6次

Android 日志工具包
Android 圆角、圆形 ImageView 实现
边框的绘制
Voxler对离散数据点插值成体
tableView中的section圆角
小鱼儿学Tkinter－relief
边框背景
css之border
day01
UIButton 绘制边框

屏幕快照 2017-07-18 上午9.42.44.png

如图，给视图添加这样的边框，最简单的办法就是使用图片作为背景。
此处，使用UIBezierPath来绘制。代码如下：

#pragma mark 线框部分的设置
- (void)drawRect:(CGRect)rect{
    [super drawRect:rect];
    [self setMaskLineLayer];
}

- (void)setMaskLineLayer{
    
    if (_maskLayer == nil) {
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
        maskLayer.strokeColor = [UIColor redColor].CGColor;
        maskLayer.fillColor = self.backgroundColor.CGColor;
        [self.layer addSublayer:maskLayer];
        _maskLayer = maskLayer;
    }
    UIBezierPath *maskPath = [self lineMaskPath];
    _maskLayer.frame = self.bounds;
    _maskLayer.path = maskPath.CGPath;
}

- (UIBezierPath *)lineMaskPath{
    
    UIBezierPath *maskPath = [UIBezierPath bezierPath];
    maskPath.lineWidth = 1.0;
    [[UIColor redColor] setStroke];
    [maskPath moveToPoint:CGPointMake(-1, 0)];
    [maskPath addLineToPoint:CGPointMake(-1, HHGet_H(self)-5)];
    [maskPath addArcWithCenter:CGPointMake(4, HHGet_H(self)-4) radius:5 startAngle:M_PI endAngle:M_PI_2 clockwise:NO];
    [maskPath addLineToPoint:CGPointMake(HHGet_W(self)-4, HHGet_H(self)+1)];
    [maskPath addArcWithCenter:CGPointMake(HHGet_W(self)-4, HHGet_H(self)-4) radius:5 startAngle:M_PI_2 endAngle:0 clockwise:NO];
    [maskPath addLineToPoint:CGPointMake(HHGet_W(self)+1, 0)];
    [maskPath stroke];

    return maskPath;
}
#pragma mark 线框部分设置结束

屏幕快照 2017-07-18 上午9.43.02.png

如图，这样的设置，可以采用为view的layer设置mask的方式

 UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, kWidthPercent*103, kRelativeHeight(30)) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(5, 5)];
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] initWithLayer:button.layer];
        maskLayer.path = maskPath.CGPath;
        maskLayer.borderWidth = 1;
        maskLayer.borderColor = HEXTOUICOLOR(@"#EE3528").CGColor;
        button.layer.mask = maskLayer;