2017-06-21 164 views
0

的面膜我要畫這樣enter image description here爲什麼我不能用CAGradientLayer

一個按鈕,於是我就用CAGradientLayerCAShapeLayerUIBezierPath。像這樣的代碼:

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),我得到的結果是這樣的:

enter image description here

有人能告訴我爲什麼嗎?

回答

0

要設置fillColor代替strokeColor,改變這一行

maskLayer.fillColor = UIColor.white.cgColor

與此

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

+0

噢,我可不象我誤解面具的概念! – iCrany