CAShapeLayer with UIBezierPath

Question

我想在這樣的UITableView單元格中顯示三角形視圖。

我設法做到這一點使用一擊代碼。

import UIKit 

class TriangleView: UIView { 

    override func drawRect(rect: CGRect) { 
     let width = self.layer.frame.width 
     let height = self.layer.frame.height 

     let path = CGPathCreateMutable() 
     CGPathMoveToPoint(path, nil, 0, 0) 
     CGPathAddLineToPoint(path, nil, width, 0) 
     CGPathAddLineToPoint(path, nil, 0, height) 
     CGPathAddLineToPoint(path, nil, 0, 0) 
     CGPathCloseSubpath(path) 

     let mask = CAShapeLayer() 
     mask.frame = self.layer.bounds 
     mask.path = path 

     self.layer.mask = mask 

     let shape = CAShapeLayer() 
     shape.frame = self.bounds 
     shape.path = path 
     shape.fillColor = UIColor.clearColor().CGColor 

     self.layer.insertSublayer(shape, atIndex: 0) 
    } 
} 

雖然我正在尋找如何創建UIViews形狀，我發現，你可以使用UIBezierPath做同樣的。所以我嘗試使用UIBezierPath複製相同的東西。

let path = UIBezierPath() 
path.moveToPoint(CGPoint(x: 0, y: 0)) 
path.moveToPoint(CGPoint(x: width, y: 0)) 
path.moveToPoint(CGPoint(x: 0, y: height)) 
path.moveToPoint(CGPoint(x: 0, y: 0)) 
path.closePath() 

let mask = CAShapeLayer() 
mask.frame = self.bounds 
mask.path = path.CGPath 

self.layer.mask = mask 

let shape = CAShapeLayer() 
shape.frame = self.bounds 
shape.path = path.CGPath 
shape.fillColor = UIColor.clearColor().CGColor 

self.layer.insertSublayer(shape, atIndex: 0) 

但是，這根本不起作用。沒有形狀顯示。

爲了得到這個工作，我需要額外做些什麼嗎？

Answer 1

你正在讓它比需要的更難。您只需要添加一個帶有路徑的形狀圖層，並設置該圖層的fillColor。您的代碼無法正常工作的主要原因是因爲您對所有行都使用moveToPoint，而對第一個行除addLineToPoint。

class TriangleView: UIView { 

    required init(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
    } 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     let path = UIBezierPath() 
     path.moveToPoint(CGPoint(x: 0, y: 0)) 
     path.addLineToPoint(CGPoint(x: frame.size.width, y: 0)) 
     path.addLineToPoint(CGPoint(x: 0, y: frame.size.height)) 
     path.closePath() 

     let shape = CAShapeLayer() 
     shape.frame = self.bounds 
     shape.path = path.CGPath 
     shape.fillColor = UIColor.blueColor().CGColor 
     self.layer.addSublayer(shape) 
    } 
} 

Answer 2

問題應該是圖層上的遮罩和形狀的顏色。
以下代碼適用於我。

class TriangleView: UIView { 
    override func drawRect(rect: CGRect) { 
     let width:CGFloat = bounds.width/9 
     let height:CGFloat = bounds.width/9 

     let path = UIBezierPath() 
     path.moveToPoint(bounds.origin) 
     path.addLineToPoint(CGPoint(x: width, y: bounds.origin.y)) 
     path.addLineToPoint(CGPoint(x: bounds.origin.x, y: height)) 
     // closePath will connect back to start point 
     path.closePath() 

     let shape = CAShapeLayer() 
     shape.path = path.CGPath 
     shape.fillColor = UIColor.blueColor().CGColor 

     self.layer.insertSublayer(shape, atIndex: 0) 

     // Setting text margin 
     textContainerInset = UIEdgeInsetsMake(8, width, 8, 0) 
    } 
}