如何創建三角形UIImage

Question

如何創建三角形UIImage？以下是我現在正在做的事情，但它根本沒有生成任何圖像。

extension UIImage { 

    static func triangle(side: CGFloat, color: UIColor)->UIImage { 
     UIGraphicsBeginImageContextWithOptions(CGSize(width: side, height: side), false, 0) 
     let ctx = UIGraphicsGetCurrentContext()! 
     ctx.saveGState() 

     ctx.beginPath() 
     ctx.move(to: CGPoint(x: side/2, y: 0)) 
     ctx.move(to: CGPoint(x: side, y: side)) 
     ctx.move(to: CGPoint(x: 0, y: side)) 
     ctx.move(to: CGPoint(x: side/2, y: 0)) 
     ctx.closePath() 

     ctx.setFillColor(color.cgColor) 

     ctx.restoreGState() 
     let img = UIGraphicsGetImageFromCurrentImageContext()! 
     UIGraphicsEndImageContext() 

     return img 
    } 
} 

Answer 1

您的路徑不包含任何行，所以沒有區域可以填充。另外你不是在繪製路徑。

嘗試是這樣的：

static func triangle(side: CGFloat, color: UIColor)->UIImage { 
    UIGraphicsBeginImageContextWithOptions(CGSize(width: side, height: side), false, 0) 
    let ctx = UIGraphicsGetCurrentContext()! 
    ctx.saveGState() 

    ctx.beginPath() 
    ctx.move(to: CGPoint(x: side/2, y: 0)) 
    //### Add lines 
    ctx.addLine(to: CGPoint(x: side, y: side)) 
    ctx.addLine(to: CGPoint(x: 0, y: side)) 
    //ctx.addLine(to: CGPoint(x: side/2, y: 0)) //### path is automatically closed 
    ctx.closePath() 

    ctx.setFillColor(color.cgColor) 

    ctx.drawPath(using: .fill) //### draw the path 

    ctx.restoreGState() 
    let img = UIGraphicsGetImageFromCurrentImageContext()! 
    UIGraphicsEndImageContext() 

    return img 
} 

Answer 2

OOPer告訴你的是你缺乏線，並沒有實際繪製的三角形。

除此之外，我建議避免使用圖形上下文。 UIBezierPath使它更簡潔，更容易繪製，而不必擔心上下文。此外，您不需要保存和恢復上下文，因爲您正在創建一個臨時上下文，然後立即丟棄它。

下面是一個完整的操場，吸引你的三角形（和填充和中風的圖像矩形，以便更容易看到 - 你會刪除筆劃和可能與UIColor.clear填充形狀代替。）

import UIKit 
import PlaygroundSupport 

PlaygroundPage.current.needsIndefiniteExecution = true 


extension UIImage { 

    static func triangle(side: CGFloat, color: UIColor)->UIImage { 
    UIGraphicsBeginImageContextWithOptions(CGSize(width: side, height: side), false, 0) 

    //First fill the bounds with white 
    let rectPath = UIBezierPath(rect: CGRect(x:0, y: 0, width: side, height: side)) 
    UIColor.white.setFill() //Use clear if you want your image to only contain the triangle. 
    rectPath.fill() 

    //Now build the triangle path 
    let path = UIBezierPath() 
    path.move(to: CGPoint(x: side/2, y: 0)) 
    path.addLine(to: CGPoint(x: side, y: side)) 
    path.addLine(to: CGPoint(x: 0, y: side)) 
    path.close() //Closing the path draws the final line 
    color.setFill() 
    path.fill() 

    //Stroke the outer path in gray so you can see the bounds - remove if desired 
    UIColor.gray.setStroke() 
    rectPath.stroke() 

    let img = UIGraphicsGetImageFromCurrentImageContext()! 
    UIGraphicsEndImageContext() 

    return img 
    } 
} 

let imageView = UIImageView(frame: CGRect(x:0, y: 0, width: 200, height: 200)) 


PlaygroundPage.current.liveView = imageView 
imageView.image = UIImage.triangle(side: 200.0, color: UIColor.yellow) 

Answer 3

或者，你可以丟失核心圖形代碼，進一步簡化它：

extension UIImage { 

    static func triangle(side: CGFloat, color: UIColor) -> UIImage { 
     UIGraphicsBeginImageContextWithOptions(CGSize(width: side, height: side), false, 0) 

     let path = UIBezierPath() 
     path.move(to: CGPoint(x: side/2, y: 0)) 
     path.addLine(to: CGPoint(x: side, y: side)) 
     path.addLine(to: CGPoint(x: 0, y: side)) 
     path.close() 

     color.setFill() 
     path.fill() 

     let image = UIGraphicsGetImageFromCurrentImageContext()! 
     UIGraphicsEndImageContext() 

     return image 
    } 
}