如何使用蒙版裁剪视图，但让裁剪掉的部分部分不透明而不是隐藏? [英] How to crop view with mask, but leave cropped-out parts partially opaque instead of hidden?

问题描述

我想裁剪视图的一部分.我关注了这篇文章:

我尝试添加一个子视图，其背景颜色的 alpha 值较小:

let maskView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 300))maskView.backgroundColor = UIColor.blue.withAlphaComponent(0.3)让 maskView2 = UIView(frame: CGRect(x: 80, y: 100, width: 100, height: 100))maskView2.backgroundColor = UIColor.blue.withAlphaComponent(1)maskView2.alpha = 0maskView.addSubview(maskView2)imageView.mask = maskView

但这就是结果:

解决方案

这一切都取决于您绘制蒙版的颜色的透明度.(色调——我们通常认为的颜色——无关紧要.)遮罩取决于透明度.部分透明的蒙版区域将使蒙版视图部分透明.

因此使蒙版与目标视图的整个大小相同，并使整个蒙版为部分透明的颜色，除了中心区域是不透明的颜色.

I want to crop out a portion of a view. I followed this article: "How to mask one UIView using another UIView", and this is my code currently:

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        /// show a green border around the image view's original frame
        let backgroundView = UIView(frame: CGRect(x: 50, y: 50, width: 200, height: 300))
        backgroundView.layer.borderColor = UIColor.green.cgColor
        backgroundView.layer.borderWidth = 4
        view.addSubview(backgroundView)
        
        let imageView = UIImageView(frame: CGRect(x: 50, y: 50, width: 200, height: 300))
        imageView.image = UIImage(named: "TestImage")
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        view.addSubview(imageView)
        
        // MARK: - Mask code
        let maskView = UIView(frame: CGRect(x: 80, y: 100, width: 100, height: 100))
        maskView.backgroundColor = .blue /// ensure opaque
        view.addSubview(maskView)
        
        imageView.mask = maskView
        
    }
}

The mask is working fine:

Without mask	With mask

However, I want the parts of the image view that are cropped out to still be there, but just have a lower alpha. This is what it should look like:

I've tried changing maskView.alpha to 0.25, but that just makes the part with the mask be less opaque.

How can I make the cropped-out parts still be there, but just a bit more transparent?

Preferably I don't want to make another view, because eventually I'll be using this on a camera preview layer — an extra view might have a cost on performance.

---

Edit: matt's answer

I tried adding a subview with a background color with less alpha:

let maskView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 300))
maskView.backgroundColor = UIColor.blue.withAlphaComponent(0.3)

let maskView2 = UIView(frame: CGRect(x: 80, y: 100, width: 100, height: 100))
maskView2.backgroundColor = UIColor.blue.withAlphaComponent(1)
maskView2.alpha = 0

maskView.addSubview(maskView2)

imageView.mask = maskView

But this is the result:

解决方案

It’s all in the transparency of the colors you paint the mask with. (The hues — what we usually think of as color — are irrelevant.) The masking depends upon the degree of transparency. Areas of the mask that are partially transparent will make the masked view be partially transparent.

So make the mask the whole size of the target view, and make the whole mask a partially transparent color, except for the central area which is an opaque color.

这篇关于如何使用蒙版裁剪视图，但让裁剪掉的部分部分不透明而不是隐藏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！