CAShapeLayer with UIBezierPath

问题描述：

我想在这样的UITableView单元格中显示三角形视图。CAShapeLayer with UIBezierPath

enter image description here

我设法做到这一点使用一击代码。

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)

但是，这根本不起作用。没有形状显示。

为了得到这个工作，我需要额外做些什么吗？

你必须创建一个新的上下文进行绘图。 –

答

你正在让它比需要的更难。您只需要添加一个带有路径的形状图层，并设置该图层的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) 
    } 
}

第二层可以用一个简单的'self.backgroundColor = UIColor.blueColor（）'代替吗？ –

@RhythmicFistman第二层？形状层？ – rdelmar

对不起，我的错误 - 我认为像OP一样，你正在添加一个蒙版，并插入一个相同的子图层，当一个蒙版和backgroundColor就足够了 –

答

问题应该是图层上的遮罩和形状的颜色。
以下代码适用于我。

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

CAShapeLayer with UIBezierPath

相关推荐