【问题标题】:Using an UIView as a Mask in another UIView on Swift在 Swift 上的另一个 UIView 中使用 UIView 作为掩码
【发布时间】:2017-09-25 21:08:32
【问题描述】:

我正在使用 Swift 在 xCode 上开发应用程序。我的屏幕上有一个动物的图像(出口“backImage”),在这个图像上我有一个视图(出口“coverView”),黑色,它覆盖了整个屏幕。到目前为止,您还看不到动物图像,因为“coverView”在它的前面。然后我有另一个视图(插座“maskView”),它更小,位于大视图“coverView”上方。我想要的是使用这个“maskView”作为掩码,因此可以通过它看到“backImage”,就像一个窗口一样。

有没有人能解决这个问题?

这是我的屏幕,我想通过较小的白色视图看到大灰色视图后面的女性角色:

【问题讨论】:

    标签: swift xcode uiview mask masking


    【解决方案1】:

    您可以在掩码视图中设置alpha 属性并添加到另一个视图的前面,例如:

    let maskView = UIView()
    maskView.backgroundColor = UIColor(white: 0, alpha: 0.5) //you can modify this to whatever you need
    maskView.frame = CGRect(x: 0, y: 0, width: imageView.frame.width, height: imageView.frame.height)
    
    yourView.addSubview(maskView)
    

    编辑:现在您使用图像编辑了您的问题,现在我看到了您需要什么,所以这里是您如何完成它。

    func setMask(with hole: CGRect, in view: UIView){
    
        // Create a mutable path and add a rectangle that will be h
        let mutablePath = CGMutablePath()
        mutablePath.addRect(view.bounds)
        mutablePath.addRect(hole)
    
        // Create a shape layer and cut out the intersection
        let mask = CAShapeLayer()
        mask.path = mutablePath
        mask.fillRule = kCAFillRuleEvenOdd
    
        // Add the mask to the view
        view.layer.mask = mask
    
    }
    

    使用此功能,您只需要拥有一个视图并创建一个形状,它将成为该视图中的一个孔,例如:

    // Create the view (you can also use a view created in the storyboard)
    let newView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
    newView.backgroundColor = UIColor(white: 0, alpha: 1)
    
    // You can play with these values and find one that fills your need
    let rectangularHole = CGRect(x: view.bounds.width*0.3, y: view.bounds.height*0.3, width: view.bounds.width*0.5, height: view.bounds.height*0.5)
    
    // Set the mask in the created view        
    setMask(with: rectangularHole, in: newView)
    

    【讨论】:

    • 嗨,Alexandre,不确定我是否做得正确,但没有奏效。如果我正确理解了您的代码,您将创建一个背景白色 0 和 alpha 0.5 的 UIView,然后定义大小并添加到我的大视图下。我想看到的问题是在大视图后面,所以这个新的 UIView 有在我的大视野中打个洞。感谢您的帮助!
    • 我现在已经附加了我的屏幕
    • @DevRenanGaspar 现在我看到了这张图片,我想我知道你需要什么,所以我编辑了我的答案。
    • 你是最棒的!太感谢了。它真的很好用!只需稍作改动,就可以将我的故事板中的视图用作矩形孔,而不是像您那样通过编码来创建矩形孔?我知道我可以替换你在我的 SB 中创建的 newView,我明白这一点,并且我确实做到了。但是我可以对这个洞做同样的事情吗?再次感谢!
    • 我想我明白了!不敢相信,这个问题花费了太多时间......我用“let rectangleHole = windowView.frame.integral”替换了 CGRect 创建的 rectangleHole ...如果你会做不同的事情,请告诉我,但它有效!谢谢!
    【解决方案2】:

    谢谢@Alexandre Lara!你做到了!

    解决方法如下:

    @IBOutlet weak var windowView: UIView!
    @IBOutlet weak var bigCoverView: UIView!
    
    func setMask(with hole: CGRect, in view: UIView){
    
        // Create a mutable path and add a rectangle that will be h
        let mutablePath = CGMutablePath()
        mutablePath.addRect(view.bounds)
        mutablePath.addRect(hole)
    
        // Create a shape layer and cut out the intersection
        let mask = CAShapeLayer()
        mask.path = mutablePath
        mask.fillRule = kCAFillRuleEvenOdd
    
        // Add the mask to the view
        view.layer.mask = mask
    
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    
        let rectangularHole = windowView.frame.integral
    
        // Set the mask in the created view
        setMask(with: rectangularHole, in: bigCoverView!)
    
    }
    

    【讨论】:

    • 嗨@DevRenanGaspar,我的项目有同样的要求。我已经使用了您发布的上述代码。这不符合我的目的。请帮助我提供一些示例应用程序或更多解释。谢谢
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-05-17
    • 1970-01-01
    • 2020-03-18
    • 2020-10-21
    • 1970-01-01
    • 2019-04-14
    • 1970-01-01
    相关资源
    最近更新 更多