Buat UIImage dengan warna solid di Swift

140

Saya ingin secara pemrograman membuat UIImage yang diisi oleh warna solid. Adakah yang tahu cara melakukan ini di Swift?

ios swift uiimage

— Henry Pham
sumber

UIImagetidak memiliki -initWithSize:andColor:metode, tetapi NSImagetidak pada OS X. Apakah Anda menggunakan perpustakaan khusus atau kategori untuk ini?

— ttarik

Maaf, memang benar saya menggunakannya melalui kategori (melihat proyek lama). Cukup edit pertanyaan saya.

— Henry Pham

194

Solusi bagus lainnya, Swift 2.2 kompatibel, adalah membuat konstruktor lain di UIImage, dengan cara ini:

public extension UIImage {
    public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
        let rect = CGRect(origin: .zero, size: size)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        color.setFill()
        UIRectFill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        guard let cgImage = image?.CGImage else { return nil }
        self.init(CGImage: cgImage)
    }  
}

Dengan cara ini Anda dapat membuat gambar berwarna khusus dengan cara ini:

let redImage = UIImage(color: .redColor())

Atau, secara opsional, buat gambar dengan ukuran khusus:

let redImage200x200 = UIImage(color: .redColor(), size: CGSize(width: 200, height: 200))

Swift 3.0

public extension UIImage {
  public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
    let rect = CGRect(origin: .zero, size: size)
    UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
    color.setFill()
    UIRectFill(rect)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    guard let cgImage = image?.cgImage else { return nil }
    self.init(cgImage: cgImage)
  }
}

— Luca Davanzo
sumber

1

jika Anda ingin membuat gambar dengan ukuran 1x, mulailah dengan kode ini UIGraphicsBeginImageContextWithOptions(rect.size, true, 1.0) ref: developer.apple.com/library/ios/documentation/UIKit/Reference/…

— nahung89

3

Bagaimana kita bisa membuat sudut-sudut gambar ini lebih bulat?

— Umair Afzal

Kenapa kita tidak bisa kembali begitu saja image? Mengapa perlu melakukan ini? self.init(cgImage: cgImage)

— Andrey Gagan

@AndreyGagan AFAIK, Anda tidak dapat "mengganti" diri dengan yang baru dibuat UIImagedalam sebuah konstruktor, tetapi Anda dapat berantai melalui UIImage.init(cgImage: )konstruktor sebagai gantinya.

— Alnitak

2

Gambar tidak dibuat dengan skala yang tepat. Misal ketika ukurannya 1x1, gambar 2x2 dikembalikan ketika skala layar utama 2.0. Anda harus meneleponself.init(cgImage: cgImage, scale: image!.scale, orientation: image!.imageOrientation)

— Marián Černý

92

Ini pilihan lain. Saya yakin Anda menginginkan objek UIImage yang tepat.

func getImageWithColor(color: UIColor, size: CGSize) -> UIImage {
    let rect = CGRectMake(0, 0, size.width, size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

Masukkan ini ke dalam kode Swift Anda dan panggil saja

Swift 3.1:

func getImageWithColor(color: UIColor, size: CGSize) -> UIImage {
    let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image
}

— anthonyliao
sumber

Saya pikir tidak ada metode UIRectMake(0, 0, size.width, size.height), ini tampaknya menjadi yang benar: CGRectMake(0, 0, size.width, size.height).

— Henry Pham

1

Secara umum, cobalah untuk menggunakan letalih-alih varuntuk variabel yang tidak dapat diubah; di sini sepertinya tidak rectjuga imageharus menggunakan vardeklarasi.

— Zorayr

1

Bagaimana kita bisa membuat sudut-sudut gambar ini lebih bulat?

— Umair Afzal

83

Versi Swift 4:

extension UIColor {
    func image(_ size: CGSize = CGSize(width: 1, height: 1)) -> UIImage {
        return UIGraphicsImageRenderer(size: size).image { rendererContext in
            self.setFill()
            rendererContext.fill(CGRect(origin: .zero, size: size))
        }
    }
}

Pemakaian:

let image0 = UIColor.orange.image(CGSize(width: 128, height: 128))
let image1 = UIColor.yellow.image()

— neoneye
sumber

3

Saya suka bahwa gambar yang dibuat bukan opsional

— jlukanta

1

Saya sangat suka ini, bagi saya itu masuk akal untuk ekstensi dari warna daripada gambar.

— quemeful

1

(⚠️ iOS 10 atau lebih baru). Bagus dan bersih, btw.

— frouo

19

Pendekatan yang lebih bersih adalah merangkum logika di dalam UIImageekstensi:

import UIKit

extension UIImage {
  class func imageWithColor(color: UIColor) -> UIImage {
    let rect: CGRect = CGRectMake(0, 0, 1, 1)
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
  }
}

Sekarang konsumen dapat menelepon, UIImage.imageWithColor(UIColor.blackColor())untuk membuat gambar dengan latar belakang hitam.

— Zorayr
sumber

Bagaimana kita bisa membuat sudut-sudut gambar ini lebih bulat?

— Umair Afzal

10

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView.backgroundColor = UIColor.redColor()
    }
}

Metode serupa jika Anda ingin menggambar gambar sendiri vs menghubungkan satu melalui IBOutlet.

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        var frame = CGRectMake(100,100,100,100)
        var imageView2 = UIImageView(frame: frame)
        imageView2.backgroundColor = UIColor.redColor()
        self.view.addSubview(imageView2)
    }
}

Metode ketiga meminjam dari anthonyliao. Sedikit lebih rumit:

class ViewController: UIViewController {

    func getImageWithColor(color: UIColor, size: CGSize) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(CGRectMake(0, 0, 100, 100))
        var image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        var imageView = UIImageView(frame: CGRectMake(100,100,100,100))
        let screenImage = getImageWithColor(UIColor.redColor(), size: CGSize(width: 100, height: 100))
        imageView.image = screenImage
        self.view.addSubview(imageView)
    }
}

— Steve Rosenberg
sumber

2

Ini mungkin mencapai efek yang diinginkan OP tetapi tidak ada artinya bahwa mereka memiliki metode untuk membuat UIImage, bukan untuk menetapkan UIImageView.

— ttarik

Metode kedua Anda masih membuat tampilan gambar, bukan gambar, yang ditunjukkan oleh @ ev0lution.

— rdelmar

sunting 3 terlampir. Sekarang kita punya banyak cara. Final dengan UIImageView.

— Steve Rosenberg

1

Metode getImageWithColor(color: UIColor, size: CGSize) -> UIImageini cukup sebagai jawabannya, karena saya pikir tidak semua orang akan menggunakan ini bersama-sama dengan UIImageView

— Henry Pham

Bagaimana kita bisa membuat sudut-sudut gambar ini lebih bulat?

— Umair Afzal

9

Tweak kecil untuk jawaban luar biasa @ neoneye, memungkinkan kode panggilan untuk tidak perlu membuat CGSize, dan mengubah nama agar tidak bertabrakan dengan banyak orang lain:

Cepat 4

extension UIColor {
    func imageWithColor(width: Int, height: Int) -> UIImage {
        let size = CGSize(width: width, height: height)
        return UIGraphicsImageRenderer(size: size).image { rendererContext in
            self.setFill()
            rendererContext.fill(CGRect(origin: .zero, size: size))
        }
    }
}

— menggambar ..
sumber

8

Anda dapat menggunakan iOS 10 UIGraphicsImageRenderer API baru.

Berikut ini adalah ekstensi pada UIColor di Swift 3.1

extension UIColor {
func getImage(size: CGSize) -> UIImage {
    let renderer = UIGraphicsImageRenderer(size: size)
    return renderer.image(actions: { rendererContext in
        self.setFill()
        rendererContext.fill(CGRect(x: 0, y: 0, width: size.width, height: size.height))
    })
}}

— Moustafa Baalbaki
sumber

6

Cara yang bagus adalah memiliki properti yang dihitung seperti ini:

extension UIColor {
    var imageRepresentation : UIImage {
      let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0)
      UIGraphicsBeginImageContext(rect.size)
      let context = UIGraphicsGetCurrentContext()

      context?.setFillColor(self.cgColor)
      context?.fill(rect)

      let image = UIGraphicsGetImageFromCurrentImageContext()
      UIGraphicsEndImageContext()

    return image!
  }
}

Pemakaian:

let redImage = UIColor.red.imageRepresentation

— iOSGeek
sumber

Saya pikir beberapa jawaban di sini sedikit menyesatkan. Sebagian besar waktu Anda perlu menentukan ukuran gambar, bukan kasus tertentu (seperti 1x1). Tapi ini pendekatan yang bagus.

— Henry Pham

4

Versi Swift 3 dari @anthonyliao Jawaban yang diterima:

class func getImageWithColor(color: UIColor, size: CGSize) -> UIImage
{
    let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: size.width, height: size.height))
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(rect)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image
}

— Ayman Ibrahim
sumber

0

Persegi dengan sudut bulat

extension UIImage {
convenience init?(color: UIColor) {
    let rect = CGRect(x: 0, y: 0, width: 10, height: 2)
    UIGraphicsBeginImageContextWithOptions(CGSize(width: 10, height: 2), false, 0)
    let bezierPath = UIBezierPath(roundedRect: rect, cornerRadius: 8)
    color.setFill()
    bezierPath.fill()
    let image = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    guard  let cgImage = image.cgImage else {
        return nil
    }
    self.init(cgImage: cgImage)
}

}

— droid
sumber