UGUI - 屏幕坐标和世界坐标关系详解

本文主要分析ugui的屏幕坐标和世界坐标的关系，至于ugui的属性参考其他的文章学习下。

本文以一个RawImage为例，目录结构如图：

1.png

RawImage的属性如图：

2.png

这里为了方便观察把pivot设置为左上点（0,1）
注意：

 //获取UI坐标系的2D坐标，就是X,Y值
 GetComponent<RectTransform>().anchoredPosition;
 //获取UI坐标系的3D坐标，
 GetComponent<RectTransform>().anchoredPosition3D;
//获取该UI在世界坐标系的3D坐标
 GetComponent<RectTransform>().position;
 //和上一个值是一样的是世界坐标系
 transform.position;
 //和世界坐标系transform.up是一样的，都是单位长度
 GetComponent<RectTransform>().up;

于是写个简单的脚本，如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class uguiposition : MonoBehaviour {

    public GameObject obj;
    // Use this for initialization
    void Start () {
        var rect = obj.GetComponent<RectTransform>();
        print("anchoredPosition: "+rect.anchoredPosition);
        print("anchoredPosition3D: "+rect.anchoredPosition3D);
        print("position: " + rect.position);
        //rect.position = Vector3.Lerp(rect.position,new Vector3(rect.position.x + 10, rect.position.y + 10, rect.position.z+100), 10);
        //print("position: " + rect.position);
    }
}

把这个脚本挂在RawImage上，Obj赋值RawImage自身即可，
运行打印log如下：

3.png

可以看到，RectTranform组件中的X，Y，Z是屏幕坐标，也就是
anchoredPosition3D， 那么position又是怎么来的呢？

相机的坐标是（0,0,0），也就是世界坐标的中心，仔细观察下，canvas的左下角世界坐标是（0,0,0），

4.png

RawImage的anchoredPosition3D是相对于canvas的，canvas屏幕坐标如下：

5.png
这样就能计算出RawImage的世界坐标了，算法如下：

 x=anchoredPosition3D.x  //这是因为，canvas的x坐标于世界中心x对齐
 y=canvas.Height-anchoredPosition3D.y  //世界坐标y轴朝上 也就是419-160=259
 z=anchoredPosition3D.z