如何从 CAShapeLayer 获取坐标

Question

所以我想做一个进度条。所以我做了一个循环路径，但是我希望圆点在进度条的末尾，但是我如何让圆点的位置在当前进度的末尾？

private func simpleShape() {
  let width: CGFloat = 10
  createCircle()

  //make circle transparant in middle
  progressLayer.fillColor = UIColor.clear.cgColor
  progressLayer.strokeColor = UIColor.blue.cgColor
  progressLayer.lineCap = CAShapeLayerLineCap.round
  progressLayer.lineWidth = width
  progressLayer.strokeStart = 0
  progressLayer.strokeEnd = 0

  //unfilled
  backLayer.lineWidth = width
  backLayer.strokeColor = #colorLiteral(red: 0.1411764706, green: 0.1725490196, blue: 0.2431372549, alpha: 1).cgColor
  backLayer.strokeEnd = 1

  self.layer.addSublayer(gradientLayer)
}

private func createCircle() {

  //create circle
  let circle = UIView(frame: bounds)
  circle.layoutIfNeeded()
  let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2)
  let circleRadius: CGFloat = circle.bounds.width / 2 * 0.83

  let circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(-0.475 * Double.pi), endAngle: CGFloat(1.525 * Double.pi), clockwise: true)

  //add layers
  progressLayer.path = circlePath.cgPath
  backLayer.path = circlePath.cgPath
  circle.layer.addSublayer(backLayer)
  circle.layer.addSublayer(progressLayer)
  addSubview(circle)

  circle.layer.addSublayer(dotLayer)
}

let dotLayer = CAShapeLayer()

public func setProgress(_ progress: CGFloat) {
  progressLayer.strokeEnd = CGFloat(progress)

  if let progressEndpoint = progressLayer.path?.currentPoint {
    dotLayer.position = progressEndpoint
  }
}

这就是我得到的

这就是我想要的

Answer 1

你得自己算算。因此，从弧的起点和终点角度计算出角度：

let angle = (endAngle - startAngle) * progress + startAngle

然后使用基本三角函数确定该点落在何处：

let point = CGPoint(x: centerPoint.x + radius * cos(angle),
                    y: centerPoint.y + radius * sin(angle))

dotLayer.position = point

顺便说一句，我建议将子层的添加（这是初始配置过程的一部分）与更新路径（这是视图布局过程的一部分，如果视图的框架发生变化，应用约束等）。因此，也许：

@IBDesignable
class ProgressView: UIView {
    var progress: CGFloat = 0 { didSet { updateProgress() } }

    private var centerPoint: CGPoint = .zero
    private var radius: CGFloat = 0
    private let startAngle: CGFloat = -0.475 * .pi
    private let endAngle: CGFloat = 1.525 * .pi
    private let lineWidth: CGFloat = 10

    private lazy var progressLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.blue.cgColor
        shapeLayer.lineCap = .round
        shapeLayer.lineWidth = lineWidth
        shapeLayer.strokeStart = 0
        shapeLayer.strokeEnd = progress
        return shapeLayer
    }()

    private lazy var backLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = lineWidth
        shapeLayer.strokeColor = #colorLiteral(red: 0.1411764706, green: 0.1725490196, blue: 0.2431372549, alpha: 1).cgColor
        return shapeLayer
    }()

    private lazy var dotLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = UIBezierPath(arcCenter: .zero, radius: lineWidth / 2 * 1.75, startAngle: 0, endAngle: 2 * .pi, clockwise: true).cgPath
        shapeLayer.fillColor = UIColor.white.withAlphaComponent(0.5).cgColor
        return shapeLayer
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        addSublayers()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        addSublayers()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        updatePaths()
        updateProgress()
    }
}

private extension ProgressView {
    func addSublayers() {
        layer.addSublayer(backLayer)
        layer.addSublayer(progressLayer)
        layer.addSublayer(dotLayer)
    }

    func updatePaths() {
        centerPoint = CGPoint(x: bounds.midX, y: bounds.midY)
        radius = min(bounds.width, bounds.height) / 2 * 0.83

        let circlePath = UIBezierPath(arcCenter: centerPoint, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)

        progressLayer.path = circlePath.cgPath
        backLayer.path = circlePath.cgPath
    }

    func updateProgress() {
        progressLayer.strokeEnd = progress

        let angle = (endAngle - startAngle) * progress + startAngle
        let point = CGPoint(x: centerPoint.x + radius * cos(angle),
                            y: centerPoint.y + radius * sin(angle))

        dotLayer.position = point
    }
}

Answer 2

你需要的是旋转动画

let progressLayer = CAShapeLayer()
    let backLayer = CAShapeLayer()
    private func simpleShape() {
      let width: CGFloat = 15
      createCircle()

      //make circle transparant in middle
      progressLayer.fillColor = UIColor.clear.cgColor
      progressLayer.strokeColor = #colorLiteral(red: 0.888897419, green: 0.5411034822, blue: 0.04008810222, alpha: 1)
      progressLayer.lineCap = CAShapeLayerLineCap.round
      progressLayer.lineWidth = width
      progressLayer.strokeStart = 0
        progressLayer.strokeEnd = 0

      //unfilled
      backLayer.lineWidth = width
      backLayer.strokeColor = #colorLiteral(red: 0.1411764706, green: 0.1725490196, blue: 0.2431372549, alpha: 1)
      backLayer.strokeEnd = 1

     // self.layer.addSublayer(gradientLayer)
    }

    private func createCircle() {

      //create circle
      let circle = UIView(frame: bounds)
      let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2)
      let circleRadius: CGFloat = circle.bounds.width / 2 * 0.83
      let distance = circle.bounds.width / 2 * 0.17


      let circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(-0.475 * Double.pi), endAngle: CGFloat(1.525 * Double.pi), clockwise: true)

      //add layers
      progressLayer.path = circlePath.cgPath
      backLayer.path = circlePath.cgPath
      circle.layer.addSublayer(backLayer)
      circle.layer.addSublayer(progressLayer)
      addSubview(circle)


        let circleCenter = CGPoint(x:centerPoint.x - distance,y:centerPoint.y - circleRadius )

         let dotCircle = UIBezierPath()


        dotCircle.addArc(withCenter:circleCenter, radius: 3, startAngle: CGFloat(-90).deg2rad(), endAngle: CGFloat(270).deg2rad(), clockwise: true)

        dotLayer.path = dotCircle.cgPath
        dotLayer.position = CGPoint(x:centerPoint.x,y:centerPoint.y )
        dotLayer.strokeColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0.6496753961)
        dotLayer.lineWidth = 10
        dotLayer.fillColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
        dotLayer.isHidden = true

      circle.layer.addSublayer(dotLayer)
    }

    let dotLayer = CAShapeLayer()

    public func setProgress(_ progress: CGFloat) {
        print(progress)
//      progressLayer.strokeEnd = progress
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.beginTime = CACurrentMediaTime() + 0.5;
        animation.fromValue = 0
        animation.toValue = progress
        animation.duration = 2
        animation.autoreverses = false
        animation.repeatCount = .nan
        animation.fillMode = .forwards
        animation.isRemovedOnCompletion = false
        progressLayer.add(animation, forKey: "line")


        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            self.dotLayer.isHidden = false
        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
       // rotateAnimation.beginTime = CACurrentMediaTime() + 0.5;
        rotateAnimation.fromValue = (CGFloat( -90)).deg2rad()
        rotateAnimation.toValue = (360*progress - 98).deg2rad()
        rotateAnimation.duration = 2
        rotateAnimation.fillMode = .forwards
        rotateAnimation.isRemovedOnCompletion = false
        self.dotLayer.add(rotateAnimation, forKey: nil)
        }

    }

如何从 CAShapeLayer 获取坐标

How do I get the coordinates from CAShapeLayer

xcode

calayer

ios

uibezierpath

swift