iOSで丸みを帯びたコーナー画像を描くときに奇妙なのこぎりが発生しました

Question

丸い角のサムネイル画像とiOSの画像の下にあるバーを作成しようとしています。

extension UIImage { 
    func thumbnails(with options: SomeDrawingOptions) -> UIImage? { 
    // ... 

    UIGraphicsBeginImageContextWithOptions(targetRect.size, false, 0) 
    defer { 
     UIGraphicsEndImageContext() 
    } 
    let context = UIGraphicsGetCurrentContext()! 

    UIColor.white.setFill() 
    context.fill(targetRect) 

    UIBezierPath(roundedRect: targetRect, cornerRadius: 8).addClip() 

    // Drawing image 
    draw(in: targetRect) 

    // Drawing a transparent mask 
    UIColor.black.withAlphaComponent(0.4).setFill() 
    context.fill(targetRect) 

    // Drawing bar 
    UIColor.white.setFill() 
    context.fill(someBarRect) 

    return UIGraphicsGetImageFromCurrentImageContext() 
    } 
} 

最後に、私はちょうど次のスナップショットでそれらのような鋭い角の丸いイメージを持っている：

は、私は次のコードを持っています。

丸みを帯びた角ののこぎり波を排除するために、任意のアドバイス？

=======ソリューション======

感謝@ wj2061のための答えを追加し、問題が解決しました。そして、ここのコードです：

extension UIImage { 
    func thumbnails(with options: SomeDrawingOptions) -> UIImage? { 
    // ... 

    let targetRect = options.targetRect 
    let clippedPath = UIBezierPath(roundedRect: targetRect, cornerRadius: 8) 

    func makeImage() -> UIImage? { 
     UIGraphicsBeginImageContextWithOptions(targetRect.size, false, 0) 
     defer { UIGraphicsEndImageContext() } 
     let context = UIGraphicsGetCurrentContext()! 

     draw(in: targetRect) 

     // Drawing a transparent mask 
     UIColor.black.withAlphaComponent(0.4).setFill() 
     context.fill(targetRect) 

     // Drawing bar 
     UIColor.white.setFill() 
     context.fill(someBarRect) 

     return UIGraphicsGetImageFromCurrentContext() 
    } 

    UIGraphicsBeginImageContextWithOptions(targetRect.size, false, 0) 
    defer { UIGraphicsEndImageContext() } 
    let context = UIGraphicsGetCurrentContext()! 

    // Drawing image 
    clippedPath.addClip() 
    makeImage()?.draw(in: targetRect) 

    return UIGraphicsGetImageFromCurrentImageContext() 
    } 
} 

Answer 1

だから、この落とし穴はUIBezierPath(roundedRect: targetRect, cornerRadius: 8).addClip()とは何かを持っている、と私はステップ1で画像にマスクを追加しようと、ステップ2で画像にコーナーを追加するようなコードが似ているようですこの

extension UIImage { 
func thumbnails() -> UIImage? { 
    let targetRect = CGRect(x: 0, y: 0, width: 100, height: 150) 

    UIGraphicsBeginImageContextWithOptions(targetRect.size, false, 0) 
    defer { 
     UIGraphicsEndImageContext() 
    } 

    UIBezierPath(roundedRect: targetRect, cornerRadius: 8).addClip() 

    let makedImage = self.makedImage() 

    makedImage?.draw(in : targetRect) 

    return UIGraphicsGetImageFromCurrentImageContext() 
} 


func makedImage()->UIImage?{ 
    let targetRect = CGRect(x: 0, y: 0, width: 100, height: 150) 
    let someBarRect = CGRect(x: 0, y: 100, width: 100, height: 50) 

    UIGraphicsBeginImageContextWithOptions(targetRect.size, false, 0) 
    defer { 
     UIGraphicsEndImageContext() 
    } 
    let context = UIGraphicsGetCurrentContext()! 

    draw(in : targetRect) 


    // Drawing a transparent mask 
    UIColor.black.withAlphaComponent(0.4).setFill() 
    context.fill(targetRect) 

    // Drawing bar 
    UIColor.white.withAlphaComponent(1).setFill() 
    context.fill(someBarRect) 

    return UIGraphicsGetImageFromCurrentImageContext() 
} 
}