title: How to draw the `normalizedPoints` of `VNFaceLandmarkRegion2D` on my UIView?
body: <p>I am trying to draw a circle to represent the result of leftPupil detected by <code>VNDetectFaceLandmarksRequest</code>.</p>
  
  <p>By the naming convention of <code>normalizedPoints</code>, I guess it is normalized by some rules. So, how can I scale and translate the point to my <code>AVCaptureVideoPreviewLayer</code> or other views?</p>
  
  <p>From some Vision tutorials, I have seen transformation like below:</p>
  
  <pre><code>let faceLandmarkPoints = convertedPoints.map { (point: (x: CGFloat, y: CGFloat)) -&gt; (x: CGFloat, y: CGFloat) in
                      let pointX = point.x * boundingBox.width + boundingBox.origin.x
                      let pointY = point.y * boundingBox.height + boundingBox.origin.y
  
                      return (x: pointX, y: pointY)
                  }
  </code></pre>
  
  <p>However, it doesn't really work for me. My complete code is given below.</p>
  
  <p>Transformation:</p>
  
  <pre><code>// Rescale the points from vision coordinates
  func convertPointsForFace(landmark: VNFaceLandmarkRegion2D?, _ boundingBox: CGRect)
      -&gt; [(x: CGFloat, y: CGFloat)]?{
          if let points = landmark?.normalizedPoints{
              let convertedPoints = self.convertToCGFloat(points: points)
  
              let faceLandmarkPoints = convertedPoints.map { (point: (x: CGFloat, y: CGFloat)) -&gt; (x: CGFloat, y: CGFloat) in
                  let pointX = point.x * boundingBox.width + boundingBox.origin.x
                  let pointY = point.y * boundingBox.height + boundingBox.origin.y
  
                  return (x: pointX, y: pointY)
              }
              return faceLandmarkPoints
          }
          return nil
  }
  </code></pre>
  
  <p>Draw the point:</p>
  
  <pre><code>// Draw a point on preview layer
  func drawPoint(point: (x: CGFloat, y: CGFloat)){
      // We use a CAShaperLayer to draw the circle
      let shapeLayer = CAShapeLayer()
      let circlePath = UIBezierPath(arcCenter: CGPoint(x: point.x,y: point.y),
                                    radius: CGFloat(20),
                                    startAngle: CGFloat(0),
                                    endAngle:CGFloat(Double.pi * 2),
                                    clockwise: true)
      shapeLayer.path = circlePath.cgPath
      shapeLayer.fillColor = UIColor.red.cgColor
      shapeLayer.strokeColor = UIColor.red.cgColor
      shapeLayer.lineWidth = 1.0
      self.previewLayer.addSublayer(shapeLayer)
  }
  </code></pre>
  
  <p><code>VNDetectFaceLandmarksRequest</code> completion handler:</p>
  
  <pre><code>func landmarkDetectCcompletionHandler(request: VNRequest, _ error: Error?){
      if error != nil {
          print("Errors in the landmark detection: \(error.debugDescription)")
      }
      guard let observations = request.results as? [VNFaceObservation] else {
          fatalError("Failed to convert result to VNFaceObservation type")
      }
      for face in observations {
  
          DispatchQueue.main.async {
              [weak self] in
              let faceBox = face.boundingBox
              let leftEye = face.landmarks?.leftPupil
              let leftEyePoints = self?.convertPointsForFace(landmark: leftEye,
                                                             faceBox)
              print(leftEyePoints?.first!.x, leftEyePoints?.first!.y)
              self?.drawPoint(point: (leftEyePoints?.first)!)
          }
      }
  }
  </code></pre>
  
  <p>The filled circle always shows up on the top left of my <code>AVCaptureVideoPreviewLayer</code>.</p>