带有 UIBezierPath 的 CAShapeLayer答案

【问题标题】：CAShapeLayer with UIBezierPath带有 UIBezierPath 的 CAShapeLayer
【发布时间】：2015-04-06 17:49:06
【问题描述】：

我想像这样在 UITableView 单元格中显示三角形视图。

我设法通过使用 Blow 代码完成了这项工作。

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)

但这根本行不通。没有显示任何形状。

我是否需要做任何额外的事情才能使它正常工作？

【问题讨论】：

你必须创建一个新的上下文来绘制。

标签： ios swift drawing uibezierpath cashapelayer

【解决方案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)
    }
}

【讨论】：

第二层可以换成简单的self.backgroundColor = UIColor.blueColor()吗？
抱歉，我的错误 - 我认为就像 OP 一样，您添加了一个蒙版并插入了一个相同的子图层，而蒙版和 backgroundColor 就足够了
如何使用渐变颜色而不是简单的颜色作为形状填充颜色 @rdelmar

【解决方案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)
    }
}

【讨论】：