swift 3 Unentschieden UIImage programmatisch

Question

nicht ich Erfahrung in Core Graphics, aber ich brauche eine dynamische uImage zu zeichnen, die wie diese aussehen:

left

whole

(Eigentlich möchte ich die Grauzone klar sein, also die rote Farbe wie floating)

ich versuchte Dies ist der Code aussehen:.

öffentliche Erweiterung UIImage {

public convenience init?(color: UIColor, size: CGSize = CGSize(width: 27, height: 5), isWhole: Bool = true) { 
    let totalHeight: CGFloat = 5.0 
    let topRectHeight: CGFloat = 1.0 

    //if (isWhole) { 
    let topRect = CGRect(origin: .zero, size: CGSize(width: size.width, height: topRectHeight)) 
    UIGraphicsBeginImageContextWithOptions(topRect.size, false, 0.0) 
    color.setFill() 
    UIRectFill(topRect) 

    let bottomRect = CGRect(origin: CGPoint(x: 0, y: topRectHeight), size: CGSize(width: size.width, height: totalHeight - topRectHeight)) 
    UIGraphicsBeginImageContextWithOptions(bottomRect.size, false, 0.0) 
    UIColor.blue.setFill() 
    UIRectFill(bottomRect) 

    let image = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 

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

Answer 1

Hier ist ein Beispiel, in dem Sie das erste Bild haben können, wenn Sie die Eigenschaft isWhole auf false setzen und ein zweites Bild haben, wenn Sie es auf true setzen. Sie können diesen Code in viewDidLoad einfügen, um ihn zu testen und damit zu spielen.

var isWhole = false 
    UIGraphicsBeginImageContextWithOptions(CGSize.init(width: 27, height: 5), false,0.0) 
    var context = UIGraphicsGetCurrentContext() 
    context?.setFillColor(UIColor.red.cgColor) 
    if(context != nil){ 
     if(isWhole){ 
      context?.fill(CGRect(x: 0, y: 0, width: 27, height: 2.5)) 
     } 
     else{ 
      context?.fill(CGRect(x: 0, y: 0, width: 13.5, height: 2.5)) 
     } 
     context?.setFillColor(UIColor.gray.cgColor) 
     context?.fill(CGRect(x: 0, y: 2.5, width: 27, height: 2.5)) 
    } 


    let newImage = UIGraphicsGetImageFromCurrentImageContext() 
    var imageView = UIImageView(frame: CGRect(x: 100, y: 200, width: 27, height: 5)) 
    imageView.image = newImage 
    self.view.addSubview(imageView) 
    UIGraphicsEndImageContext() 

Wenn Sie Ihr rotes Rechteck sein müssen, mit runder Ecken nur Füllung ändern (rect: CGRect) mit Pfad wie folgt aus:

if(isWhole){ 
     context?.addPath(CGPath(roundedRect: CGRect(x: 0, y: 0, width: 27, height: 2.5), cornerWidth: 1, cornerHeight: 1, transform: nil)) 
     context?.fillPath() 
    } 

Answer 2

Ich würde empfehlen, zwei Pfade im ersten Kontext zu schaffen, die Sie erstellen, das heißt

let topPath = UIBezierPath(rect: topRect) 
color.setFill() 
topPath.fill() 

let bottomPath = UIBezierPath(rect: bottomRect) 
UIColor.blue.setFill() 
bottomPath.fill() 

Dann können Sie das Bild aus dem aktuellen Kontext zu bekommen.

Answer 3

Ich weiß, sagte Sie Ihre Kommentare, dass Sie nicht können Verwenden Sie UIViews, aber was Sie wollen "sieht" leicht durch Ansichten. Warum nicht das, dann drehen Sie es einfach in eine UIImage?

override func viewDidLoad() { 
    super.viewDidLoad() 

    let imageContainer = UIView(frame: CGRect(x: 30, y: 40, width: 110, height: 60)) 
    imageContainer.backgroundColor = view.backgroundColor 
    view.addSubview(imageContainer) 

    let redView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 30)) 
    redView.backgroundColor = UIColor.red 
    let grayView = UIView(frame: CGRect(x: 10, y: 30, width: 100, height: 30)) 
    grayView.backgroundColor = UIColor.gray 
    imageContainer.addSubview(redView) 
    imageContainer.addSubview(grayView) 

    let imageView = UIImageView(frame: CGRect(x: 100, y: 140, width: 200, height: 200)) 
    imageView.contentMode = .scaleAspectFit 
    imageView.image = createImage(imageContainer) 

    view.addSubview(imageView) 
} 

func createImage(_ view: UIView) -> UIImage { 
    UIGraphicsBeginImageContextWithOptions(
     CGSize(width: view.frame.width, height: view.frame.height), true, 1) 
    view.layer.render(in: UIGraphicsGetCurrentContext()!) 
    let image = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 
    return image! 
}