为什么我无法使用 CAGradientLayer 的遮罩

Question

我想画一个这样的按钮

所以我使用CAGradientLayer、CAShapeLayer和UIBezierPath。代码如下：

    let gradientLayer: CAGradientLayer = CAGradientLayer.init()
    gradientLayer.startPoint = CGPoint.init(x: 0, y: 0.7)
    gradientLayer.endPoint  = CGPoint.init(x: 1, y: 0.1)
    gradientLayer.locations = [NSNumber.init(value: 0.25), NSNumber.init(value: 0.5), NSNumber.init(value: 0.75), NSNumber.init(value: 1)]
    gradientLayer.colors = [UIColor.blue.cgColor, UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.orange.cgColor]
    gradientLayer.frame = CGRect.init(origin: self.bounds.origin, size: self.frame.size)
    gradientLayer.borderColor = UIColor.clear.cgColor
    gradientLayer.borderWidth = 1

    //make mask layer
    let hGap: CGFloat = 1
    let vGap: CGFloat = 1
    let maskLayer: CAShapeLayer = CAShapeLayer.init()
    let maskPath: UIBezierPath = UIBezierPath.init()
    let viewWidth = self.frame.size.width - hGap * 2
    let viewHeight = self.frame.size.height - vGap * 2
    maskPath.move(to: CGPoint.init(x: viewHeight / 2, y: 0))
    maskPath.addLine(to: CGPoint.init(x: viewWidth - viewHeight / 2, y: 0))
    maskPath.addArc(withCenter: CGPoint.init(x: viewWidth - viewHeight / 2, y: viewHeight / 2), radius: viewHeight / 2, startAngle: (CGFloat(1.5) * CGFloat.pi), endAngle: CGFloat.pi / 2, clockwise: true)
    maskPath.addLine(to: CGPoint.init(x: viewHeight / 2, y: viewHeight))
    maskPath.addArc(withCenter: CGPoint.init(x: viewHeight / 2, y: viewHeight / 2), radius: viewHeight / 2, startAngle: CGFloat.pi / 2, endAngle: CGFloat(1.5) * CGFloat.pi, clockwise: true)
    maskPath.close()
    maskLayer.path = maskPath.cgPath
    maskLayer.borderColor = UIColor.clear.cgColor
    maskLayer.fillColor = UIColor.white.cgColor
    maskLayer.frame = CGRect.init(x: vGap, y: hGap, width: viewWidth, height: viewHeight)
   //maskLayer.frame = CGRect.init(x: 0, y: 0, width: viewWidth, height: viewHeight)

    //TODO: Why mask not work
   //gradientLayer.mask = maskLayer


    self.layer.cornerRadius = Constant.kViewSize.height / 2
    self.layer.masksToBounds = true
    self.layer.borderColor = UIColor.clear.cgColor
    self.layer.addSublayer(gradientLayer)
    self.layer.addSublayer(maskLayer)//i use sublayer instead


    self.addSubview(self.titleLabel)
    self.titleLabel.snp.makeConstraints { maker in
        maker.center.equalTo(self.snp.center)
    }

当我使用 gradientLayer.mask = maskLayer 而不是 self.layer.addSublayer(maskLayer) 时，我得到的结果是这样的：

谁能告诉我为什么？

Answer 1

您正在设置 fillColor 而不是 strokeColor，更改此行

maskLayer.fillColor = UIColor.white.cgColor

有了这个

maskLayer.fillColor = UIColor.clear.cgColor maskLayer.strokeColor = UIColor.white.cgColor

为什么我无法使用 CAGradientLayer 的遮罩

Why i fail to use mask of CAGradientLayer

cashapelayer

quartz-core

cagradientlayer

swift