How to erase a custom shape ( not A rectangle ) in CGContext - ios

Question

I'm trying to achieve that effect like scratch lottery in iOS. The basic effect is achieved by using clear(_rect: CGRect), but how to erase a custom shape rather than a rectangle?
Here is my code
class ImageMaskView: UIView {
var image = UIImage(named: "maskL")
var line = [CGPoint ]()
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else {return}
image?.draw(at: CGPoint(x: 0, y: 300))
// erase
line.forEach { (position) in
// print(position)
let rect = CGRect(x: position.x,y:position.y,width:50,height:50)
context.clear(rect)
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let position = touches.first?.location(in: nil) else{return }
print(position)
line.append(position)
setNeedsDisplay()
}
}
Maybe I can build a custom function clear? Anyway, I would appreciate it if you can give me some advice

Answer 1

Have you tried UIBezierPath? You definitely can use UIBezierPath to build the custom shape. But I'm not 100% sure how to clear instead of draw this path in context. Try something like this:
let starPath: UIBezierPath = UIBezierPath()
starPath.move(to: CGPoint(x: 45.25, y: 0))
starPath.addLine(to: CGPoint(x: 61.13, y: 23))
starPath.addLine(to: CGPoint(x: 88.29, y: 30.75))
starPath.addLine(to: CGPoint(x: 70.95, y: 52.71))
starPath.addLine(to: CGPoint(x: 71.85, y: 80.5))
starPath.addLine(to: CGPoint(x: 45.25, y: 71.07))
starPath.addLine(to: CGPoint(x: 18.65, y: 80.5))
starPath.addLine(to: CGPoint(x: 19.55, y: 52.71))
starPath.addLine(to: CGPoint(x: 2.21, y: 0.75))
starPath.addLine(to: CGPoint(x: 29.37, y: 23))
starPath.close();
context.setBlendMode(.destinationOut)
context.setFillColor(UIColor.clear.cgColor)
starPath.fill()
Also, don't forget to set opaque of your view to false.