Question

我有一个使用其他UIImage遮罩的UIImage。唯一的问题是被遮罩的UIImage之外的区域仍然是用户可交互的。如何将UIImage完全裁剪为另一个图像而不是蒙版。

@IBOutlet weak var imageView: UIImageView!

override func viewDidLoad() {
    super.viewDidLoad()
    let imageMask = UIImageView()

    imageMask.image = //image to mask

    imageMask.frame = photoImageView.bounds
    imageView.mask = imageMask
}

see this summary issue

Answer 1

条件

一个简单的测试用例可以为ViewController的视图定义背景颜色，并加载图像和蒙版。然后，将UITapGestureRecognizer添加到ViewController视图和UIImageView。

将背景色应用于ViewController视图时，很容易看出遮罩是否起作用。

如果您随后点击非透明区域，则UIImageView应该接收该点击，否则ViewController视图应该接收该点击。

图像和蒙版图像大小

在大多数情况下，图像和蒙版图像的大小或图像和蒙版图像的至少长宽比是相同的。对于UIImageView的遮罩使用与原始UIImageView相同的contentMode是有意义的，否则最晚在InterfaceBuilder中更改内容模式时会发生对齐问题。

测试用例

因此，测试用例可能如下所示：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    private let maskView = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.imageView.image = UIImage(named: "testimage")
        self.maskView.image = UIImage(named: "mask")
        self.imageView.mask = maskView

        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(backgroundTapped))
        self.view.addGestureRecognizer(tapGestureRecognizer)

        let imageViewGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(iamgeViewTapped))
        self.imageView.addGestureRecognizer(imageViewGestureRecognizer)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.maskView.contentMode = self.imageView.contentMode
        self.maskView.frame = self.imageView.bounds
    }

    @objc private func backgroundTapped() {
        print ("background tapped!")
    }

    @objc private func iamgeViewTapped() {
        print ("image view tapped!")
    }

}

此代码已在运行。但是，正如预期的那样，在UIImageView的透明区域上的点击也位于此处。

CustomImageView

因此，我们需要一个CustomImageView，当单击它不负责的透明像素时，它将返回。

这可以通过重写此方法来实现：

func point(inside point: CGPoint, 
      with event: UIEvent?) -> Bool

在此处查看文档：{{3}}

返回一个布尔值，该值指示接收方是否包含指定的点。

SO上已经有一个很酷的答案，只是略有改编：https://developer.apple.com/documentation/uikit/uiview/1622533-point

import UIKit

class CustomImageView: UIImageView {

    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        return self.alphaFromPoint(point: point) > 32
    }

    private func alphaFromPoint(point: CGPoint) -> UInt8 {
        var pixel: [UInt8] = [0, 0, 0, 0]
        let colorSpace = CGColorSpaceCreateDeviceRGB();
        let alphaInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)
        if let context = CGContext(data: &pixel,
                                   width: 1,
                                   height: 1,
                                   bitsPerComponent: 8,
                                   bytesPerRow: 4,
                                   space: colorSpace,
                                   bitmapInfo: alphaInfo.rawValue) {
            context.translateBy(x: -point.x, y: -point.y)
            self.layer.render(in: context)
        }
        return pixel[3]
    }

}

不要忘记在身份检查器的Xcode中将ImageView的自定义类更改为CustomImageView。

如果您现在点击透明区域，则背景中ViewController的视图将被点击。如果您点击非透明区域，则我们的图像视图会收到该点击。

演示

以下是上面代码的简短演示，其中使用了问题的图片和遮罩：

https://stackoverflow.com/a/27923457

如何在Swift中裁剪UIImage以进行遮罩

1 个答案: