How to draw UIBezierPath with different colors?

Taken from the handPose (https://developer.apple.com/documentation/vision/detecting_hand_poses_with_vision) example, camerView.swift file:

func showPoints(_ points: [CGPoint], color: UIColor) {
    pointsPath.removeAllPoints()
    for point in points {
      pointsPath.move(to: point)
      pointsPath.addArc(withCenter: point, radius: 5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
    }
    overlayLayer.fillColor = color.cgColor
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    overlayLayer.path = pointsPath.cgPath
    CATransaction.commit()
  }

Instead of drawing two points, I want to modify the code so it draws four points, and using a different color for each finger points.

   func showPoints2(_ points: [CGPoint], color: [UIColor]) {
    pointsPath.removeAllPoints()
    pointsPath.move(to: points[0])
    pointsPath.addArc(withCenter: points[0], radius: 5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
    overlayLayer.fillColor = UIColor.red.cgColor
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    overlayLayer.path = pointsPath.cgPath
    pointsPath.move(to: points[1])
    pointsPath.addArc(withCenter: points[1], radius: 5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
    overlayLayer.fillColor = UIColor.green.cgColor
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    overlayLayer.path = pointsPath.cgPath
    pointsPath.move(to: points[2])
    pointsPath.addArc(withCenter: points[2], radius: 5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
    overlayLayer.fillColor = UIColor.blue.cgColor
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    overlayLayer.path = pointsPath.cgPath
    pointsPath.move(to: points[3])
    pointsPath.addArc(withCenter: points[3], radius: 5, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
    overlayLayer.fillColor = UIColor.black.cgColor
    CATransaction.begin()
    CATransaction.setDisableActions(true)
    overlayLayer.path = pointsPath.cgPath
    CATransaction.commit()
  }

My modified code does render the 4 points, but the color is always the last color I have selected in the function, in this case black color. How to to make it renders 4 different colors?

CATransaction.begin() and CATransaction.commit() should be paired.

Have you tried using 4 pairs of CATransaction.begin() and CATransaction.commit() for each stroke?


By the way, Vision does not seem to be the right tag for your question. You are not using Vision framework, are you?

How to draw UIBezierPath with different colors?
 
 
Q