Unity：使用WorldToScreenPoint实现Canvas与视口元素碰撞异常排查

Hey there! It sounds like you're hitting a common pitfall with coordinate system mismatches when moving collision data from world/viewport space to Canvas UI space. Let's break down the likely issues and fix your code step by step.

Key Reasons for the Deviation #

The big culprits here are almost always coordinate system mismatches and incorrect space conversions:

• Screen space vs. Canvas local space: Canvas UI uses its own local coordinate system (not raw screen pixels), and the origin differs from Unity's default screen space.
• Y-axis flip: Unity's WorldToScreenPoint returns coordinates with the origin at the bottom-left of the screen, but Canvas (in Overlay mode) uses top-left as the origin.
• Forgetting to convert local → world space first: EdgeCollider2D points are stored in the object's local space, not world space.
• Ignoring Canvas scaling: If your Canvas uses a Scaler (like Scale With Screen Size), raw screen coordinates won't map correctly to UI space.

Corrected Code Implementation #

Here's a revised version of your code that addresses all these issues:

Step 1: Get Viewport Collider's World Space Points #

First, convert the viewport EdgeCollider2D's local points to world space, then map them to Canvas-compatible coordinates:

using UnityEngine;
using System.Collections.Generic;

public class CollisionConverter : MonoBehaviour
{
    [SerializeField] private EdgeCollider2D viewportEdgeCollider;
    [SerializeField] private EdgeCollider2D canvasEdgeCollider;
    [SerializeField] private Canvas targetCanvas;
    [SerializeField] private Camera mainCamera; // Assign the camera rendering your viewport elements

    public void UpdateCanvasCollision()
    {
        // 1. Convert viewport collider's local points to world space
        List<Vector2> worldPoints = new List<Vector2>();
        foreach (Vector2 localPoint in viewportEdgeCollider.points)
        {
            Vector3 worldPoint = viewportEdgeCollider.transform.TransformPoint(localPoint);
            worldPoints.Add(worldPoint);
        }

        // 2. Convert world points to screen space (with Y-axis flip for Canvas)
        List<Vector2> screenPoints = new List<Vector2>();
        foreach (Vector2 worldPoint in worldPoints)
        {
            Vector3 screenPoint = mainCamera.WorldToScreenPoint(worldPoint);
            // Flip Y to match Canvas's top-left origin
            screenPoint.y = Screen.height - screenPoint.y;
            screenPoints.Add(screenPoint);
        }

        // 3. Convert screen points to Canvas local space (handles scaling automatically)
        RectTransform canvasRect = targetCanvas.GetComponent<RectTransform>();
        List<Vector2> canvasLocalPoints = new List<Vector2>();
        foreach (Vector2 screenPoint in screenPoints)
        {
            if (RectTransformUtility.ScreenPointToLocalPointInRectangle(
                canvasRect, 
                screenPoint, 
                targetCanvas.worldCamera, 
                out Vector2 localPoint))
            {
                canvasLocalPoints.Add(localPoint);
            }
        }

        // 4. Assign converted points to Canvas EdgeCollider2D
        canvasEdgeCollider.points = canvasLocalPoints.ToArray();
    }
}

Additional Checks to Ensure Accuracy #

• Verify Camera Assignment: Make sure mainCamera is the one rendering your viewport elements (not the Canvas camera if using Screen Space - Camera mode).
• Canvas Rendering Mode: If using Screen Space - Camera, ensure targetCanvas.worldCamera is set correctly in the Inspector.
• Debug Single Points: Log one or two key points (e.g., viewport collider corners) at each conversion step to pinpoint where deviation occurs.
• Canvas Scaler: If you're using Scale With Screen Size, RectTransformUtility handles scaling automatically—no extra math needed.

Give these changes a shot, and you should see the red collision area align properly with your expected UI region!

内容的提问来源于stack exchange，提问作者agiro