如何在Swift中绘制图像？

Question

我需要能够以编程方式在图像上绘制，并将该图像保存以供以后使用。比如，在图像的特定x和y坐标上画一条线，保存该图像，并显示它在一个简单的视图控制器中。我该如何用Swift实现这个功能？（最好是Swift 2，因为我还在开发中，还没有将我的Mac升级到Sierra）

更新：可能与将UIImage转换为CGLayer有关，然后在其上绘制，最后再将其转换回UIImage。

- caleb

---

你需要将UIImage转换为CGContext，而不是CGLayer。 - kennytm

Answer 1

您只需要创建并获取一个图像上下文对象，然后访问它所有强大的绘图方法即可。您可以在这里了解有关CGContext对象功能的更多信息。

此函数在UIImage上绘制一条线和一个圆，并返回修改后的图像：

Swift 4

func drawOnImage(_ image: UIImage) -> UIImage {
     
     // Create a context of the starting image size and set it as the current one
     UIGraphicsBeginImageContext(image.size)
     
     // Draw the starting image in the current context as background       
     image.draw(at: CGPoint.zero)

     // Get the current context
     let context = UIGraphicsGetCurrentContext()!

     // Draw a red line
     context.setLineWidth(2.0)
     context.setStrokeColor(UIColor.red.cgColor)
     context.move(to: CGPoint(x: 100, y: 100))
     context.addLine(to: CGPoint(x: 200, y: 200))
     context.strokePath()
     
     // Draw a transparent green Circle
     context.setStrokeColor(UIColor.green.cgColor)
     context.setAlpha(0.5)
     context.setLineWidth(10.0)
     context.addEllipse(in: CGRect(x: 100, y: 100, width: 100, height: 100))
     context.drawPath(using: .stroke) // or .fillStroke if need filling
     
     // Save the context as a new UIImage
     let myImage = UIGraphicsGetImageFromCurrentImageContext()
     UIGraphicsEndImageContext()
     
     // Return modified image
     return myImage
}

- Jorge Ramírez

Answer 2

很简单：

1. 创建一个图像上下文。（在iOS 10之前，您可以通过调用 UIGraphicsBeginImageContextWithOptions 来实现。在iOS 10中有另一种方式 UIGraphicsImageRenderer，但如果您不想使用它，也可以不用。）

2. 将图像绘制（即复制）到上下文中。（UIImage实际上有用于此目的的draw...方法。）

3. 将你的线条绘制到上下文中。（有CGContext函数可用于此。）

4. 从上下文中提取生成的图像。（例如，如果您使用了UIGraphicsBeginImageContextWithOptions，则应该使用UIGraphicsGetImageFromCurrentImageContext。）然后关闭上下文。

- matt

---

我写了一本在线阅读的书，教你如何做到这一点：http://www.apeth.com/iOSBook/ch15.html#_graphics_contexts - matt

在Swift 2中，实际上都是一样的，因为它只是一堆C函数调用，而Swift直接调用它们。Swift 3则非常不同。 - matt

实际上，使用UIGraphicsBeginImageContextWithOptions和UIGraphicsGetImageFromCurrentImageContext比使用UIGraphicsImageRenderer API会消耗更多的内存。 - Chris Forever

@ChrisForever 我现在总是使用图像渲染器，因为它是一个更好的API，但我没有理由相信有内存差异；一个图像上下文就是一个图像上下文，一个大小与图像相同的缓冲区。 - matt

Answer 3

细节

Xcode 9.1，Swift 4

解决方案

extension UIImage

extension UIImage {

    typealias RectCalculationClosure = (_ parentSize: CGSize, _ newImageSize: CGSize)->(CGRect)

    func with(image named: String, rectCalculation: RectCalculationClosure) -> UIImage {
        return with(image: UIImage(named: named), rectCalculation: rectCalculation)
    }

    func with(image: UIImage?, rectCalculation: RectCalculationClosure) -> UIImage {

        if let image = image {
            UIGraphicsBeginImageContext(size)

            draw(in: CGRect(origin: .zero, size: size))
            image.draw(in: rectCalculation(size, image.size))

            let newImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return newImage!
        }
        return self
    }
}

扩展 UIImageView

    extension UIImageView {

    enum ImageAddingMode {
        case changeOriginalImage
        case addSubview
    }

    func drawOnCurrentImage(anotherImage: UIImage?, mode: ImageAddingMode, rectCalculation: UIImage.RectCalculationClosure) {

        guard let image = image else {
            return
        }

        switch mode {
        case .changeOriginalImage:
            self.image = image.with(image: anotherImage, rectCalculation: rectCalculation)

        case .addSubview:
            let newImageView = UIImageView(frame: rectCalculation(frame.size, image.size))
            newImageView.image = anotherImage
            addSubview(newImageView)
        }
    }
}

---

图片示例

父级图片：

子级图片：

---

用法示例1

func sample1(imageView: UIImageView) {
    imageView.contentMode = .scaleAspectFit
    imageView.image = UIImage(named: "parent")?.with(image: "child") { parentSize, newImageSize in
        print("parentSize = \(parentSize)")
        print("newImageSize = \(newImageSize)")
        return CGRect(x: 50, y: 50, width: 90, height: 90)
    }
}

结果 1

---

用法示例 2

func sample2(imageView: UIImageView) {
    imageView.contentMode = .scaleAspectFit
    imageView.image = UIImage(named: "parent")
    imageView.drawOnCurrentImage(anotherImage: UIImage(named: "child"), mode: .changeOriginalImage) { parentSize, newImageSize in
        print("parentSize = \(parentSize)")
        print("newImageSize = \(newImageSize)")
        let sideLength:CGFloat = 90
        let indent:CGFloat = 50
        return CGRect(x: parentSize.width-sideLength-indent, y: parentSize.height-sideLength-indent, width: sideLength, height: sideLength)
    }
}

结果2

---

使用示例3

func sample3(imageView: UIImageView) {
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true
    imageView.image = UIImage(named: "parent")
    imageView.drawOnCurrentImage(anotherImage: UIImage(named: "child"), mode: .addSubview) { parentSize, newImageSize in
        print("parentSize = \(parentSize)")
        print("newImageSize = \(newImageSize)")
        let sideLength:CGFloat = 90
        let indent:CGFloat = 15
        return CGRect(x: parentSize.width-sideLength-indent, y: indent, width: sideLength, height: sideLength)
    }
}

结果 3

完整的样例代码

不要忘记在此处添加解决方案代码

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let imageView = UIImageView(frame: UIScreen.main.bounds)
        view.addSubview(imageView)
        sample1(imageView: imageView)
       // sample2(imageView: imageView)
       // sample3(imageView: imageView)
    }

    func sample1(imageView: UIImageView) {
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(named: "parent")?.with(image: "child") { parentSize, newImageSize in
            print("parentSize = \(parentSize)")
            print("newImageSize = \(newImageSize)")
            return CGRect(x: 50, y: 50, width: 90, height: 90)
        }
    }

    func sample2(imageView: UIImageView) {
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(named: "parent")
        imageView.drawOnCurrentImage(anotherImage: UIImage(named: "child"), mode: .changeOriginalImage) { parentSize, newImageSize in
            print("parentSize = \(parentSize)")
            print("newImageSize = \(newImageSize)")
            let sideLength:CGFloat = 90
            let indent:CGFloat = 50
            return CGRect(x: parentSize.width-sideLength-indent, y: parentSize.height-sideLength-indent, width: sideLength, height: sideLength)
        }
    }

    func sample3(imageView: UIImageView) {
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.image = UIImage(named: "parent")
        imageView.drawOnCurrentImage(anotherImage: UIImage(named: "child"), mode: .addSubview) { parentSize, newImageSize in
            print("parentSize = \(parentSize)")
            print("newImageSize = \(newImageSize)")
            let sideLength:CGFloat = 90
            let indent:CGFloat = 15
            return CGRect(x: parentSize.width-sideLength-indent, y: indent, width: sideLength, height: sideLength)
        }
    }
}

- Vasily Bodnarchuk

---

我该如何自定义我添加的图像？比如说把它的角变成圆形，或者加标签？ - user11182249

@NCT127 这是一个比较困难的问题。这取决于你所得到的结果。我认为如果你能创建一个带有代码分享的单独问题会更好。我可以帮助你。 - Vasily Bodnarchuk

有没有UIImage的解决方案，而不是UIImageView？ - famfamfam

Answer 4

iOS 10之后，您可以使用UIGraphicImageRenderer，它的语法更好，并且具有一些很棒的功能！

Swift 4

let renderer = UIGraphicsImageRenderer(size: view.bounds.size)
let image = renderer.image { context in
    // draw your image into your view
    context.cgContext.draw(UIImage(named: "myImage")!.cgImage!, in: view.frame)
    // draw even more...
    context.cgContext.setFillColor(UIColor.red.cgColor)
    context.cgContext.setStrokeColor(UIColor.black.cgColor)
    context.cgContext.setLineWidth(10)
    context.cgContext.addRect(view.frame)
    context.cgContext.drawPath(using: .fillStroke)
}

- appsunited

---

这个答案很棒，不需要预先存在的图像。例如，在将CTFont（）字符转换为图像的函数中会很有用（使用ctx.showGlyphs()）。 - clearlight

Answer 5

更新后的回答：一旦获得了起点和终点坐标，就可以按照这些坐标在UIImage中绘制一条直线。 起点和终点坐标是以图像像素为单位的。

func drawLineOnImage(size: CGSize, image: UIImage, from: CGPoint, to: CGPoint) -> UIImage {

// begin a graphics context of sufficient size
UIGraphicsBeginImageContext(size)

// draw original image into the context
image.drawAtPoint(CGPointZero)

// get the context for CoreGraphics
let context = UIGraphicsGetCurrentContext()

// set stroking width and color of the context
CGContextSetLineWidth(context, 1.0)
CGContextSetStrokeColorWithColor(context, UIColor.blueColor().CGColor)

// set stroking from & to coordinates of the context
CGContextMoveToPoint(context, from.x, from.y)
CGContextAddLineToPoint(context, to.x, to.y)

// apply the stroke to the context
CGContextStrokePath(context)

// get the image from the graphics context 
let resultImage = UIGraphicsGetImageFromCurrentImageContext()

// end the graphics context 
UIGraphicsEndImageContext()

return resultImage }

- Nadeesha Lakmal

---

详细解释这段代码如何回答问题将有助于未来的访问者。 - JAL

先生，您能帮我解决这个问题吗？https://dev59.com/Oarka4cB1Zd3GeqPib9o - sarah