三角形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 
    } 
}