在 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()
 }
}

在 iOS 上绘制圆角图像时遇到奇怪的锯齿

Encountered weird sawtooth when drawing rounded corner images on iOS

cgcontext

quartz-2d

ios

swift