如何将新的 Canvas ui 图像位置转换为 linerenderer 位置？

Question

我在画布中有一个带有屏幕空间 - 相机渲染模式的图像 UI。我喜欢做的是通过循环遍历所有LineRenderer 位置并更改其y 轴，将我的LineRenderer 移动到图像垂直位置。我的问题是我无法获得LineRenderer 可以理解的图像的正确位置。我试过使用ViewportToWorldPoint 和ScreenToWorldPoint，但位置不同。

    Vector3 val = Camera.main.ViewportToWorldPoint(new Vector3(image.transform.position.x, image.transform.position.y, Camera.main.nearClipPlane));

    for (int i = 0; i < newListOfPoints.Count; i++)
    {
        line.SetPosition(i, new Vector3(newListOfPoints[i].x, val.y, newListOfPoints[i].z));
    }

使用Vector3 val = Camera.main.ScreenToWorldPoint(new Vector3(image.transform.localPosition.x, image.transform.localPosition.y, -10));的截图结果

绿色的LineRenderer 是改变y 位置的结果。它应该在方形图像的底部。

Answer 1

哇，这既烦人又复杂。

这是我最终得到的代码。您问题中的代码是Update() 函数的下半部分。我唯一改变的是传递给ScreenToWorldPoint() 方法的内容。该值在Update() 函数的上半部分计算。

RectTransformToScreenSpace() 函数改编自 this Unity Answer 帖子¹ 关于获取 RectTransform 的屏幕空间坐标（这正是我们想要从屏幕空间坐标转换回来进入世界空间！）唯一的区别是我得到了反向 Y 值，所以我从 Screen.height - transform.position.y 更改为 transform.position.y，这完美地完成了这个技巧。

之后，只需抓住该矩形的左下角，将其设为 Vector3 而不是 Vector2，然后将其传递回ScreenToWorldPoint()。唯一的技巧那里是因为透视相机，我需要知道线与相机最初的距离以保持相同的距离（否则线比图像更快地在屏幕上上下移动）。对于正交相机，此值可以是任何值。

void Update () {
    //the new bits:
    float dist = (Camera.main.transform.position - newListOfPoints[0]).magnitude;
    Rect r = RectTransformToScreenSpace((RectTransform)image.transform);
    Vector3 v3 = new Vector3(r.xMin, r.yMin, dist);

    //more or less original code:
    Vector3 val = Camera.main.ScreenToWorldPoint(v3);
    for(int i = 0; i < newListOfPoints.Count; i++) {
        line.SetPosition(i, new Vector3(newListOfPoints[i].x, val.y, newListOfPoints[i].z));
    }
}

//helper function:
public static Rect RectTransformToScreenSpace(RectTransform transform) {
    Vector2 size = Vector2.Scale(transform.rect.size, transform.lossyScale);
    Rect rect = new Rect(transform.position.x, transform.position.y, size.x, size.y);
    rect.x -= (transform.pivot.x * size.x);
    rect.y -= ((1.0f - transform.pivot.y) * size.y);
    return rect;
}

¹从“如何获取 UI 对象的屏幕坐标”的广义搜索中找到 该 帖子并不容易。出现了一堆其他帖子并有一些代码，但没有一个能达到我想要的效果（包括将屏幕空间坐标转换回 UI 对象的世界空间坐标，这很简单而且不可逆，谢谢RectTransformUtility！）