迅速比3戰平UIImage的編程

Question

我沒有核芯顯卡的經驗，但我需要繪製看起來像這些動態的uImage：

left

whole

（其實我想的灰色區域明確所以紅色會看起來像漂浮）

這是我試過的代碼：

公共推廣的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

這裏是一個例子，如果您將isWhole屬性設置爲false，並且將第二個圖像設置爲true，則可以擁有第一個圖像。你可以在viewDidLoad中粘貼這段代碼來測試並使用它。

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

如果您需要紅色矩形與圓邊角只是改變填充（RECT：的CGRect）這樣與路徑：

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

我建議創建在您創建的第一個上下文兩條路徑，即

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

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

然後你可以從當前上下文的圖像。

Answer 3

我知道你在你的評論說，你不能使用UIViews，但你想通過視圖輕鬆完成「看起來」。爲什麼不做那，然後簡單地把它變成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! 
}