Question

我想为带有渐变的视图添加内边框。以下代码有效，并给出了我的结果

import UIKit

class InnerGradientBorderView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.clear
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        backgroundColor = UIColor.clear
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        addGradientInnerBorder(width: 8, color: FlatWhite())
    }

    func addGradientInnerBorder(width: CGFloat, color: UIColor) {

        // Setup
        let topLeftO = CGPoint(x: 0, y: 0)
        let topLeftI = CGPoint(x: width, y: width)

        let topRightO = CGPoint(x: frame.width, y: 0)
        let topRightI = CGPoint(x: frame.width - width, y: width)

        let bottomLeftO = CGPoint(x: 0, y: frame.height)
        let bottomLeftI = CGPoint(x: width, y: frame.height - width)

        let bottomRightO = CGPoint(x: frame.width, y: frame.height)
        let bottomRightI = CGPoint(x: frame.width - width, y: frame.height - width)

        // Top
        let topPoints = [topLeftO, topLeftI, topRightI, topRightO, topLeftO]
        let topGradientPoints = [CGPoint(x: 0, y: 0), CGPoint(x: 0, y: 1)]
        addGradientToBeizerPath(path: addClosedPathForPoints(points: topPoints), color: color, gradientPoints: topGradientPoints)

        // Left
        let leftPoints = [topLeftO, topLeftI, bottomLeftI, bottomLeftO, topLeftO]
        let leftGradientPoints = [CGPoint(x: 0, y: 0), CGPoint(x: 1, y: 0)]
        addGradientToBeizerPath(path: addClosedPathForPoints(points: leftPoints), color: color, gradientPoints: leftGradientPoints)

        // Right
        let rightPoints = [topRightO, topRightI, bottomRightI, bottomRightO, topRightO]
        let rightGradientPoints = [CGPoint(x: 1, y: 0), CGPoint(x: 0, y: 0)]
        addGradientToBeizerPath(path: addClosedPathForPoints(points: rightPoints), color: color, gradientPoints: rightGradientPoints)

        // Bottom
        let bottomPoints = [bottomLeftO, bottomLeftI, bottomRightI, bottomRightO, bottomLeftO]
        let bottomGradientPoints = [CGPoint(x: 0, y: 1), CGPoint(x: 0, y: 0)]
        addGradientToBeizerPath(path: addClosedPathForPoints(points: bottomPoints), color: color, gradientPoints: bottomGradientPoints)
    }

    func addClosedPathForPoints(points: [CGPoint]) -> UIBezierPath? {
        guard points.count == 5 else { return nil }

        let path = UIBezierPath()
        path.move(to: points[0])
        path.addLine(to: points[1])
        path.addLine(to: points[2])
        path.addLine(to: points[3])
        path.addLine(to: points[4])

        path.close()

        return path
    }

    func addGradientToBeizerPath(path: UIBezierPath?, color: UIColor, gradientPoints: [CGPoint]) {
        guard let path = path, gradientPoints.count == 2 else { return }

        let gradient = CAGradientLayer()
        gradient.frame = path.bounds
        gradient.colors = [color.cgColor, UIColor.clear.cgColor]
        gradient.startPoint = gradientPoints[0]
        gradient.endPoint = gradientPoints[1]

//        let shapeMask = CAShapeLayer()
//        shapeMask.path = path.cgPath
//        gradient.mask = shapeMask

        self.layer.insertSublayer(gradient, at: 0)
    }
}

你会注意到边缘看起来不那么好。为了解决这个问题，我给边缘一个角度。当我使用此角度对此渐变应用蒙版时，右侧和底部路径将消失，如下所示：

我在这里所做的就是使用一些封闭的bezierPaths并对它们应用渐变。如果渐变具有掩码（注释的代码未注释），则其中两个路径将消失。我有一种感觉，我不理解某些东西，所以希望有人可以告诉我如何正确使用CAShapeLayer。

Answer 1

This comment至CALayer mask property 完美地解释道：

掩模层位于蒙版图层的坐标系中，就像它是一个子图层一样。

在您的情况下，右侧和底部渐变层的原点不是位于封闭视图的(0, 0)，但位于(frame.width - width, 0) 和(frame.height - width, 0)分别。另一方面，点的坐标 o shapeMask.path相对于封闭视图的(0, 0)。

一个可能的简单修复方法是转换坐标系形状图层使其使用与点相同的坐标给定路径：

    let gradient = CAGradientLayer()
    gradient.frame = path.bounds
    gradient.bounds = path.bounds // <<--- ADDED HERE!
    gradient.colors = [color.cgColor, UIColor.clear.cgColor]
    gradient.startPoint = gradientPoints[0]
    gradient.endPoint = gradientPoints[1]

    let shapeMask = CAShapeLayer()
    shapeMask.path = path.cgPath
    gradient.mask = shapeMask

    self.layer.addSublayer(gradient)

向CAGradientLayer添加掩码会使UIBezierPath消失

1 个答案: