UIView 的clipsToBound导致气泡阴影显示不正常

最新推荐文章于 2023-03-11 23:20:47 发布

MSTDO

最新推荐文章于 2023-03-11 23:20:47 发布

阅读量1.2k

点赞数

分类专栏： iOS 文章标签： uiview clipstobou shadow

本文链接：https://blog.csdn.net/johnzhjfly/article/details/69215416

版权

iOS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

最近实现一个气泡的效果，使用CGPathRef自定义不规则的气泡样式，但是由于使用了UIView的clipsToBounds属性导致气泡显示不一样，如果设置了clipsToBounds 会导致设置的shadow不能正常显示，带入如下：

UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 140, 45)];
    [self.view addSubview:contentView];
    contentView.clipsToBounds = YES;

    ShadowView *shadowView = [[ShadowView alloc] initWithFrame:contentView.bounds];
    [contentView addSubview:shadowView];

设置clipsToBounds=YES 显示效果如下：
这里写图片描述
这是由于设置contentView的clipsToBound=YES, 那contentView上的subview在绘制shadow的时候，由于shadow已经超出frame，所以shadow
绘制出来不是预期的效果，superview的clipsToBound 会影响subview的阴影绘制，个人觉得是一个比较大的坑。
设置clipsToBounds=NO 显示正常：
这里写图片描述

其中ShadowView 的设置气泡样式的代码如下:

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _bubbleHeight = 5;
        CGPathRef bubblePath = [self bubblePath];
        self.opaque = FALSE;
        self.backgroundColor = [UIColor clearColor];
        self.layer.shadowPath = bubblePath;
        self.layer.shadowColor = [UIColor greenColor].CGColor;
        self.layer.shadowRadius = 5;
        self.layer.shadowOpacity = 1.0;
        self.layer.shadowOffset = CGSizeMake(0, 0);
        CGPathRelease(bubblePath);
    }
    return self;
}

- (CGPathRef)bubblePath {
    CGFloat radius = CGRectGetHeight(self.bounds) / 2.0 - 5;
    CGFloat bubbleHeight = _bubbleHeight;
    CGFloat bubbleWidth = 8;
    CGFloat drawWidth = CGRectGetWidth(self.bounds);
    CGFloat drawHeight = CGRectGetHeight(self.bounds) - bubbleHeight;

    //left corner
    CGMutablePathRef bubblePath = CGPathCreateMutable();
    CGPathMoveToPoint(bubblePath, NULL, radius, 0);
    CGPathAddArcToPoint(bubblePath, NULL, 0, 0, 0, radius, radius);

    //left-bottom corner
    CGPathAddLineToPoint(bubblePath, NULL, 0, drawHeight - radius);
    CGPathAddArcToPoint(bubblePath, NULL, 0, drawHeight, radius, drawHeight, radius);

    //bottom down-arrow
    CGPathAddLineToPoint(bubblePath, NULL, (drawWidth - bubbleWidth) / 2, drawHeight);
    CGPathAddLineToPoint(bubblePath, NULL, drawWidth / 2, drawHeight + bubbleHeight);
    CGPathAddLineToPoint(bubblePath, NULL, (drawWidth + bubbleWidth) / 2, drawHeight);

    //right-bottom corner
    CGPathAddLineToPoint(bubblePath, NULL, drawWidth - radius, drawHeight);
    CGPathAddArcToPoint(bubblePath, NULL, drawWidth, drawHeight, drawWidth, drawHeight - radius, radius);

    //right-top corner
    CGPathAddLineToPoint(bubblePath, NULL, drawWidth, radius);
    CGPathAddArcToPoint(bubblePath, NULL, drawWidth, 0, drawWidth - radius, 0, radius);

    //move brush to start point
    CGPathAddLineToPoint(bubblePath, NULL, radius, 0);
    return bubblePath;
}