繁体   English   中英

UIView的自定义图层蒙版

[英]Custom layer mask for UIView

我正在尝试为UIView创建一个图层蒙版,它将作为一个滑出面板作为服务器使用。 我需要的效果是,此圆形右下角的插图约为50像素。 到目前为止,我已经可以通过创建具有清晰背景色的UIView xib以及在其顶部和底部和右侧分别插入50 px的另一个较小的UIView(子视图)来实现此效果。 我想在不使用较小子视图的情况下实现此效果。 换句话说,创建一个从底部和右侧插入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的主视图设置为具有清晰的背景色来实现透明。

在此处输入图片说明

编辑这是横向打开时的视图。 我将UIView的背景设置为白色,以显示在设备旋转时无法正确呈现的子视图。

在此处输入图片说明

当旋转时,结果如下:

在此处输入图片说明

如前所述,由于主视图可以正确渲染,因此似乎更好的方法似乎是创建一个具有类似效果的蒙版,但不确定,这就是我在这里的原因!

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

您不应该在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;
}

确保旋转时重新绘制视图。 您需要重写此方法:

 didRotateFromInterfaceOrientation

然后确保您要调用setNeedsDisplay和setNeedsUpdateConstratints。

这将确保视图在每次旋转时都在上方调用您的draw方法。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM