iOS：与核心图形

Question

我想使用Core Graphics混合两个图像。

例如，我有一张图片：

此图像代表框架。我想把这个图像切成薄片。

另一张图片代表背景：

我想要实现的目标是将这两个图像视为：

重要的是，这张图片可能不一定是圆圈。它可能是可切片的。

如何使用Core Graphics实现这一目标？

Answer 1

尝试使用以下使用遮罩的方法（maskImage是代表＆＃34;框架＆＃34;的方法，因此在您的示例中，黑色圆圈周围的黑色圆圈必须是透明的） ：

import UIKit

class ViewController: UIViewController {

    fileprivate let imageView = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(imageView)
        imageView.clipsToBounds = true
        imageView.translatesAutoresizingMaskIntoConstraints = false
        let cons = [
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            imageView.heightAnchor.constraint(equalToConstant: 130),
            imageView.widthAnchor.constraint(equalToConstant: 300),
            ]
        NSLayoutConstraint.activate(cons)

        setup(image: #imageLiteral(resourceName: "image"), withMask: #imageLiteral(resourceName: "masking"))
    }

    fileprivate func setup(image: UIImage, withMask maskImage: UIImage) {
        imageView.superview?.layoutIfNeeded()
        imageView.image = maskImage
        let slicedMask = captureView(imageView: imageView)
        imageView.image = image
        let mask = CALayer()
        mask.contents = slicedMask.cgImage
        mask.frame = imageView.bounds
        imageView.layer.mask = mask
    }

    func captureView(imageView: UIImageView) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, UIScreen.main.scale)
        let context: CGContext = UIGraphicsGetCurrentContext()!
        imageView.layer.render(in: context)
        let img: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return img
    }
}

我在这里处理切片＆＃34; hacky＆＃34;：首先我在imageView中渲染掩码以将其切片，然后我拍摄＆＃34;截图＆＃34;渲染的切片蒙版，并使用屏幕截图作为蒙版。

请记住mask.frame = imageView.bounds必须正确设置框架，因此此时应该完成布局。如果稍后的图像布局发生变化，则必须再次设置遮罩。 mask.frame始终必须符合imageView.bounds（因此如果布局发生变化，请在布局更改后重新设置图像）。