Swift Image masking

Question

Trying to achieve something like below picture. Where the image has a mask to display certain portion of the image. Here is the code to create the shape

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

Is there a way to add image into this layer. so its bound are set respective to the shape? BEFORE/AFTER image can be ignored.

Any leads would be appreciated. Thanks!

http://stackoverflow.com/questions/3059622/how-to-mask-a-uiview — emrys57, Feb 26 '16 at 10:42

score 0 · Accepted Answer · answered Apr 20 '16 at 08:27

This is the solution I came up with. You need to have proper mask image.

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

Swift Image masking

1 Answers1