首页 文章

UIView的自定义图层蒙版

提问于
浏览
2

我正在尝试为UIView创建一个图层蒙版,它将作为一个滑出面板服务器 . 我需要这个圆角右下角约50像素的效果 . 到目前为止,我已经能够通过创建一个具有清晰背景颜色的UIView xib和另一个较小的UIView(子视图)来实现这种效果,它在底部和右侧是50 px插入 . 我想在不使用较小的子视图的情况下实现此效果 . 换句话说,创建一个从底部和右侧插入50 px的蒙版,右下角有一个圆角 .

当我在子视图上绘制蒙版时,它可以在我开始的任何屏幕方向上工作,但是当设备旋转时,我得到的结果确实不一致 . 在我的子视图类中,我有以下代码:

- (void)drawRect:(CGRect)rect
{
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    CGPathRef path = [[UIBezierPath bezierPathWithRoundedRect:[_subView bounds]
                                           byRoundingCorners:UIRectCornerBottomRight
                                                  cornerRadii:(CGSize){150.0, 150.0}] CGPath];
    [maskLayer setPath:path];
    [_subView.layer setMask:maskLayer];
    CGPathRelease(path);
}

我不确定问题是什么,但是如果我可以通过使用一个带掩码的UIView来实现这个效果,似乎可能更容易处理它 . 以下是子视图的屏幕截图 . 显然,我对掩蔽技术有点新意 .

图像中显示的灰色图案是主视图控制器,顶部是xib的UIView . 通过将xib的主视图设置为具有清晰的背景颜色来实现透明度 .

enter image description here

编辑这是在景观中打开时的视图 . 我将UIView的背景设置为白色,以表明它是在设备旋转时无法正确呈现的子视图 .

enter image description here

旋转时,结果如下:

enter image description here

正如已经提到的,由于主视图正确渲染,似乎更好的方法是创建一个实现类似效果的蒙版,但不确定,这就是我在这里的原因!

我希望我已经足够清楚了 . 有人能帮忙吗?谢谢!

2 回答

  • 1

    确保您的视图在轮换时重新绘制 . 您需要覆盖此方法:

    didRotateFromInterfaceOrientation
    

    然后确保你正在调用setNeedsDisplay和setNeedsUpdateConstratints .

    这将确保每次旋转时视图都会调用上面的draw方法 .

  • 5

    您不应该在 drawRect: 中创建或更新图层 . layoutSubviews 方法是适当的时间 . 您也可以重复使用蒙版 . 您还有一些保留/释放问题 .

    - (void)layoutSubviews {
        [super layoutSubviews];
        [self layoutMask];
    }
    
    - (void)layoutMask {
        CAShapeLayer *maskLayer = [self subviewMaskLayer];
        UIBezierPath *path =  [UIBezierPath bezierPathWithRoundedRect:_subView.bounds
            byRoundingCorners:UIRectCornerBottomRight cornerRadii:(CGSize){150.0, 150.0}];
        maskLayer.path = path.CGPath;
    }
    
    - (CAShapeLayer *)subviewMaskLayer {
        CAShapeLayer *mask = (CAShapeLayer *)_subView.layer.mask;
        if (mask == nil) {
            mask = [CAShapeLayer layer];
            _subView.layer.mask = mask;
        }
        return mask;
    }
    

相关问题