Swift - Clipping image with UIBezierPath

问题

I would like to clip a bezier path from an image. For some reason, the image remains the unclipped. And how do I position the path so it would be properly cut?

extension UIImage {

func imageByApplyingMaskingBezierPath(_ path: UIBezierPath, _ pathFrame: CGFrame) -> UIImage {

    UIGraphicsBeginImageContext(self.size)
    let context = UIGraphicsGetCurrentContext()!
    context.saveGState()

    path.addClip()
    draw(in: CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height))

    let maskedImage = UIGraphicsGetImageFromCurrentImageContext()!

    context.restoreGState()
    UIGraphicsEndImageContext()

    return maskedImage
}

}

回答1:

You need to add your path.cgPath to your current context, also you need to remove context.saveGState() and context.restoreGState()

Use this code

func imageByApplyingMaskingBezierPath(_ path: UIBezierPath, _ pathFrame: CGRect) -> UIImage {

            UIGraphicsBeginImageContext(self.size)
            let context = UIGraphicsGetCurrentContext()!

            context.addPath(path.cgPath)
            context.clip()
            draw(in: CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height))

            let maskedImage = UIGraphicsGetImageFromCurrentImageContext()!

            UIGraphicsEndImageContext()

            return maskedImage
        }

Using it

let testPath = UIBezierPath()
testPath.move(to: CGPoint(x: self.imageView.frame.width / 2, y: self.imageView.frame.height))
testPath.addLine(to: CGPoint(x: 0, y: 0))
testPath.addLine(to: CGPoint(x: self.imageView.frame.width, y: 0))
testPath.close()

self.imageView.image = UIImage(named:"Image")?.imageByApplyingMaskingBezierPath(testPath, self.imageView.frame)

Result

回答2:

You can try like this.

 var path = UIBezierPath()
 var shapeLayer = CAShapeLayer()
 var cropImage = UIImage()


 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first as UITouch?{
        let touchPoint = touch.location(in: self.YourimageView)
        print("touch begin to : \(touchPoint)")
        path.move(to: touchPoint)
    }
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first as UITouch?{
        let touchPoint = touch.location(in: self.YourimageView)
        print("touch moved to : \(touchPoint)")
        path.addLine(to: touchPoint)
        addNewPathToImage()
    }
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first as UITouch?{
        let touchPoint = touch.location(in: self.YourimageView)
        print("touch ended at : \(touchPoint)")
        path.addLine(to: touchPoint)
        addNewPathToImage()
        path.close()
    }
}
 func addNewPathToImage(){
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = strokeColor.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = lineWidth
    YourimageView.layer.addSublayer(shapeLayer)
}
   func cropImage(){

    UIGraphicsBeginImageContextWithOptions(YourimageView.bounds.size, false, 1)
    tempImageView.layer.render(in: UIGraphicsGetCurrentContext()!)
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    self.cropImage = newImage!
    }


    @IBAction func btnCropImage(_ sender: Any) {
         cropImage()
    }

Once you draw a path on particular button action just call your imageByApplyingMaskingBezierPath

来源：https://stackoverflow.com/questions/49853122/swift-clipping-image-with-uibezierpath

标签

ios

swift

uiimage

core-graphics

uibezierpath