【问题标题】:Custom layer mask for UIViewUIView 的自定义图层蒙版
【发布时间】:2014-11-09 06:21:31
【问题描述】:

我正在尝试为 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的主视图设置为具有清晰的背景颜色来实现透明度。

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

当旋转时,结果如下:

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

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

【问题讨论】:

    标签: ios objective-c uiview cashapelayer


    【解决方案1】:

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

    【讨论】:

    【解决方案2】:

    确保您的视图在旋转时被重绘。您需要重写此方法:

     didRotateFromInterfaceOrientation
    

    然后确保您调用的是 setNeedsDisplay 和 setNeedsUpdateConstratints。

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

    【讨论】:

    • 是的,我已经这样做了。产生不一致结果的是重绘本身
    • 你在使用自动布局吗?
    • 您能否描述一些结果,而不仅仅是“不一致”?它可以帮助我/其他人。另外,您是否尝试过取消自动布局?
    • 感谢您的帮助。编辑已发布
    猜你喜欢
    • 1970-01-01
    • 2018-01-03
    • 2011-08-08
    • 2018-05-19
    • 2011-08-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多