iOS:与核心图形

时间:2018-01-08 14:31:17

标签: ios swift image core-graphics blending

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

例如,我有一张图片:

enter image description here

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

另一张图片代表背景:

enter image description here

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

enter image description here

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

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

1 个答案:

答案 0 :(得分:0)

尝试使用以下使用遮罩的方法(maskImage是代表"框架"的方法,因此在您的示例中,黑色圆圈周围的黑色圆圈必须是透明的) :

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
    }
}

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

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