What's an easy way to align a UI element with a Raycast?

I'm working on a photography type game and want to implement bonus scores being rewarded for things such as rule of thirds, which appears as a grid on the screen for the player to lineup. However, I can't seem to get the raycasts for where it should trigger as a rule of thirds hit to quite line up with the UI element.

Here's what I've been doing:

         RaycastHit hit;
         Ray photoRay = new Ray (transform.position, transform.forward);
         Ray rotRay1 = new Ray (new Vector3 (transform.localPosition.x - 4.5f, transform.localPosition.y + 2.5f, transform.position.z), transform.forward);
         Ray rotRay2 = new Ray (new Vector3 (transform.localPosition.x - 4.5f, transform.localPosition.y - 2.5f, transform.position.z), transform.forward);
         Ray rotRay3 = new Ray (new Vector3 (transform.localPosition.x + 5, transform.localPosition.y + 2.5f, transform.position.z), transform.forward);
         Ray rotRay4 = new Ray (new Vector3 (transform.localPosition.x + 5, transform.localPosition.y - 2.5f, transform.position.z), transform.forward);
 
         //Debug.DrawRay (cam.transform.position, Vector3.forward * focalLength);
         if (cameraOut && Input.GetMouseButtonDown (0)) {
              if ((Physics.Raycast (rotRay1, out hit, focalLength)) || (Physics.Raycast (rotRay2, out hit, focalLength)) || (Physics.Raycast (rotRay3, out hit, focalLength)) || (Physics.Raycast (rotRay4, out hit, focalLength))) {
                 if (hit.collider.tag == "Front") {
                     Debug.DrawRay (new Vector3 (transform.position.x - 3.2f, transform.position.y + 1.5f, transform.position.z), transform.forward);
                     print ("Rule of Thirds photo of animal front");
                 } else if (hit.collider.tag == "Back") {
                     print ("Rule of Thirds photo of animal back");
                 }
             }
             else if (Physics.Raycast (photoRay, out hit, focalLength)) {
                 if (hit.collider.tag == "Front") {
                     print ("Take photo of animal front");
                 } else if (hit.collider.tag == "Back") {
                     print ("Take photo of animal back");
                 }
             }
         }

The code isn't pasting very nicely but essentailly what I'm doing right now is assigning the starting position of the raycast via the transform.localPosition. No matter how much I change the values, it never seems to line up. Am I approaching this the wrong way or do I need to keep adjusting the position of the rays?