UIBezierPath를 사용하여 배경 이미지를 마스크하십시오.

Question

배경 이미지의 마스크 역할을하는 반원형 선을 그립니다. 나는이 이미지가 있습니다 Backgound image 을하고 나는이 가져올 : 나는 정의의 UIView의 그리기 방법 안에 다음 코드를 시도 Mask ,하지만 난 단지 쓰다 경로가 아닌 마스크하는 방법을 모른다 전체 호. 내가 뭘 놓치고 있니?

 let context = UIGraphicsGetCurrentContext()! 
context.saveGState() 

     context.setLineWidth(4) 

     path = UIBezierPath() 
     path.addArc(withCenter: CGPoint(x: self.bounds.midX, y: self.bounds.height), radius: self.bounds.height-10, startAngle: -180 * CGFloat.pi/180, endAngle: 0 * CGFloat.pi/180, clockwise: true) 

     context.addPath(path.cgPath) 
     context.replacePathWithStrokedPath() 
     context.clip() 

     let gradient = CGGradient(colorsSpace: nil, colors: [UIColor.clear.cgColor, UIColor.clear.cgColor] as CFArray, locations: nil)! 
     context.drawLinearGradient(gradient, start: CGPoint(x: 0, y: 0), end: CGPoint(x: 200, y: 0), options: []) 

     context.restoreGState() 

     context.saveGState() 

     let myLayer = CALayer() 
     let myImage = UIImage(named: "color")?.cgImage 
     myLayer.frame = self.bounds 
     myLayer.contents = myImage 

     let maskLayer = CAShapeLayer() 
     maskLayer.path = context.path 

     myLayer.mask = maskLayer 

     self.layer.addSublayer(myLayer) 

     context.restoreGState() 

Answer 1

그 방법에서 진행이 많이있어, 꽤 많이는의의 drawRect에 있으면 안 - 그것은 그래픽이 CPU에 작업 이동로가의 drawRect 당신이 할 수있는 경우를 방지하는 것이 가장 좋습니다.

간단히하기 위해 컨텍스트와 경로를 사용하여 이미지를 마스크하는 방법을 보여주었습니다. 위의 코드에서 문제는 경로가 매우 좁으며 어쨌든 무지개 이미지의 보이는 부분 바깥에 있었던 것입니다. 너는 아무 것도보고 있지 않았다?

놀이터에서 이렇게하는 코드를 작성하면 즉각적인 결과를보고 매우 쉽게 할 수있는 부분을 조정할 때 유용합니다. 경로를 쓰다듬는 것은 또한 아무 것도 보이지 않을 때 기대하는 곳을 볼 때 편리합니다.

import UIKit 

let image = UIImage(named: "I6BbE.jpg")! 

let renderer = UIGraphicsImageRenderer(size: image.size) 
let maskedImage = renderer.image { 
    context in 
    let cgContext = context.cgContext 
    let bounds = context.format.bounds 
    cgContext.setLineWidth(50) 

    let path = UIBezierPath() 
    path.addArc(
     withCenter: CGPoint(x: bounds.midX, y: bounds.height), 
     radius: bounds.height-100, 
     startAngle: .pi, 
     endAngle: 0, 
     clockwise: true) 

    cgContext.addPath(path.cgPath) 
    cgContext.replacePathWithStrokedPath() 
    cgContext.clip() 
    image.draw(in: bounds) 
} 

maskedImage 

나주는 : 놀이터에 원래 무지개를 추가, 내가 이런 짓을