ios - 为什么 CAShapeLayer 的 strokeColor 不能带有 alpha 组件？它制作了 2 个不同颜色的边框

Question

添加我的代码。它正在添加一个带有另一个 alpha 的边框，如阴影。

let sliderLayer = CAShapeLayer()
    sliderLayer.fillColor = UIColor.white.cgColor
    sliderLayer.strokeColor = UIColor.red.withAlphaComponent(0.5).cgColor
    sliderLayer.lineWidth = 20
    sliderLayer.miterLimit = 0.0
    sliderLayer.lineCap = kCALineCapRound
    sliderLayer.lineJoin = kCALineJoinRound
    let bezierPath = UIBezierPath()
    bezierPath.addArc(withCenter: CGPoint(x:bounds.midX, y:bounds.midY), radius: 190 / 2, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)
    sliderLayer.path = bezierPath.cgPath

Answer 1

发生这种情况是因为描边如何与您的填充颜色重叠。当你给它一个 0.5 的 alpha 时，你会让白色以 50% 的比例显示出来，因此红色在你笔划的一半处看起来是粉红色的。 50% 红色和 50% 白色 = 粉红色。

这是一个 playground，展示了如何实现具有 alpha 值的寄宿生。您需要使用 2 个圆圈并将它们分层以获得所需的效果。

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func loadView() {
        super.loadView()

        self.view.backgroundColor = .black
        self.view.frame = CGRect(x: 0, y: 0, width: 1024, height: 768)

        let bezierPath = UIBezierPath()
        bezierPath.addArc(withCenter: CGPoint(x:200, y:200), radius: 190 / 2, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)

        let redCircle = CAShapeLayer()
        redCircle.fillColor = UIColor.red.withAlphaComponent(0.5).cgColor
        redCircle.path = bezierPath.cgPath

        let bezierPath2 = UIBezierPath()
        bezierPath2.addArc(withCenter: CGPoint(x:200, y:200), radius: 170 / 2, startAngle: 0, endAngle: CGFloat(Double.pi * 2), clockwise: true)

        let whiteCircle = CAShapeLayer()
        whiteCircle.fillColor = UIColor.white.cgColor
        whiteCircle.path = bezierPath2.cgPath

        redCircle.addSublayer(whiteCircle)
        self.view.layer.addSublayer(redCircle)
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
PlaygroundPage.current.needsIndefiniteExecution = true

产生: