斯威夫特圖片遮罩

Question

試圖實現類似下面的圖片。圖像具有掩碼來顯示圖像的某個部分。下面是創建形狀

let shape = CAShapeLayer()  
shape.opacity = 0.5 
shape.lineWidth = 2 
shape.lineJoin = kCALineJoinMiter   

let path = UIBezierPath() 
path.moveToPoint(CGPointMake(0 , 0)) 
path.addLineToPoint(CGPointMake(200, 0)) 
path.addLineToPoint(CGPointMake(160, 200)) 
path.addLineToPoint(CGPointMake(0, 200)) 
path.closePath() 
shape.path = path.CGPath 

代碼有沒有一種方法來添加圖像到這一層。所以它的邊界是根據形狀設置的？ BEFORE/AFTER圖像可以忽略。

任何線索將不勝感激。謝謝！

Answer 1

這是我想出的解決方案。你需要有適當的蒙版圖像。

import UIKit 
import SnapKit 

class TestScreenController: UIViewController { 

let beforeView = UIImageView() 
let afterView = UIImageView() 
let maskView = UIImageView() 
let divider = UIImageView(image: UIImage(named: "before_after_image")) 

override func viewDidLoad() { 
    super.viewDidLoad() 
    // Do any additional setup after loading the view, typically from a nib. 
    setup()   
} 

override func didReceiveMemoryWarning() { 
    super.didReceiveMemoryWarning() 
    // Dispose of any resources that can be recreated. 
} 

func setup(){ 
    self.view.addSubview(maskView) 
    self.maskView.addSubview(beforeView) 
    self.maskView.addSubview(afterView) 
    self.maskView.addSubview(divider)   

    maskView.snp_makeConstraints { (make) in 
     make.top.equalTo(self.view).offset(50) 
     make.width.equalTo(300) 
     make.height.equalTo(110) 
     make.centerX.equalTo(self.view) 
    } 
    maskView.layer.cornerRadius = 15 
    maskView.layer.masksToBounds = true   


    let image = UIImage(named: "beforeWash-min.png") 
    let maskingImage = UIImage(named: "beforeImageM-1") 
    beforeView.image = maskImage(image!, mask: maskingImage!) 
    beforeView.contentMode = .ScaleToFill 
    beforeView.snp_makeConstraints { (make) in 
     make.top.left.height.equalTo(self.maskView) 
     make.width.equalTo(self.maskView).multipliedBy(0.50).offset(12) 
    } 

    let imageA = UIImage(named: "afterWash-min.png") 
    let maskingImageA = UIImage(named: "afterImageM-1") 
    afterView.image = maskImage(imageA!, mask: maskingImageA!) 
    afterView.contentMode = .ScaleToFill 
    afterView.snp_makeConstraints { (make) in 
     make.top.right.height.equalTo(self.maskView) 
     make.width.equalTo(self.maskView).multipliedBy(0.50).offset(10) 
    } 

    divider.snp_makeConstraints { (make) in 
     make.center.equalTo(maskView) 
     make.height.equalTo(maskView) 
    } 
}  

func maskImage(image:UIImage, mask:(UIImage))->UIImage{ 

    let imageReference = image.CGImage 
    let maskReference = mask.CGImage 

    let imageMask = CGImageMaskCreate(CGImageGetWidth(maskReference), 
             CGImageGetHeight(maskReference), 
             CGImageGetBitsPerComponent(maskReference), 
             CGImageGetBitsPerPixel(maskReference), 
             CGImageGetBytesPerRow(maskReference), 
             CGImageGetDataProvider(maskReference), nil, true) 

    let maskedReference = CGImageCreateWithMask(imageReference, imageMask) 

    let maskedImage = UIImage(CGImage:maskedReference!) 

    return maskedImage 
} 
}