参考
屏幕坐标（Input.mousePosition）转换UI坐标
unity鼠标点击处生成UI
【Unity API 翻译】UGUI 屏幕坐标转UI坐标方法 – ScreenPointToLocalPointInRectangle()
一、方式一
1.屏幕坐标
屏幕坐标的起点位置 左下角为（0，0）点，右上角为（Screen.width，Screen.height）。我们在Unity中使用Input.mousePosition获取的鼠标的坐标，就是屏幕坐标。将如下脚本挂在canvas上，测试结果如下：
public class UIClick : MonoBehaviour
{
public Transform img; //要改变位置的UI
void Update()
{
if (Input.GetMouseButtonUp(0))
{
Vector2 pos = Input.mousePosition;
Debug.Log("screen w:" + Screen.width + ", h:" + Screen.height);
Debug.Log("click pos x:" + pos.x + ",pos y:" + pos.y);
}
}
}
2.UI坐标
UI坐标的起点位置是屏幕中心点，如果想实现一个鼠标点击到哪，图片就出现在哪，需要将屏幕坐标Input.mousePosition转化为UI坐标。比如屏幕坐标值是（Screen.width/2，Screen.height/2），在UI坐标里正好是0
public class UIClick : MonoBehaviour
{
public Transform img; //要改变位置的UI
void Update()
{
if (Input.GetMouseButtonUp(0))
{
Vector2 pos = Input.mousePosition;
Debug.Log("screen w:" + Screen.width + ", h:" + Screen.height);
Debug.Log("click pos x:" + pos.x + ",pos y:" + pos.y);
float X = Input.mousePosition.x - Screen.width / 2f;
float Y = Input.mousePosition.y - Screen.height / 2f;
Vector2 tranPos = new Vector2(X, Y);
img.localPosition = tranPos;
}
}
}
上面这个代码，运行起来后，切换屏幕分辨率，就会发现错位了：
image.png
这是因为当前的Canvas做了屏幕适配：
image.png
可以使用sizeDelta得到缩放后的尺寸：
public class UIClick : MonoBehaviour
{
public Transform img; //要改变位置的UI
void Update()
{
if (Input.GetMouseButtonUp(0))
{
Vector2 pos = Input.mousePosition;
Debug.Log("screen w:" + Screen.width + ", h:" + Screen.height);
Debug.Log("click pos x:" + pos.x + ",pos y:" + pos.y);
float X = Input.mousePosition.x - Screen.width / 2f;
float Y = Input.mousePosition.y - Screen.height / 2f;
Vector2 tranPos = new Vector2(X, Y);
img.localPosition = tranPos;
//得到画布的尺寸
Vector2 uisize = this.GetComponent<RectTransform>().sizeDelta;
Debug.Log("sizeDelta w:" + uisize.x + ", h:" + uisize.y);
}
}
}
当前分辨率为1280*3000，点击屏幕右上角，得到如下数据
image.png
按照比例缩放即可：
缩放后的坐标除以缩放前的坐标=缩放后的屏幕尺寸除以缩放前的屏幕尺寸=uisize.x/Screen.width
变形一下得到最终位置：
public class UIClick : MonoBehaviour
{
public Transform img; //要改变位置的UI
void Update()
{
if (Input.GetMouseButtonUp(0))
{
Vector2 pos = Input.mousePosition;
Debug.Log("screen w:" + Screen.width + ", h:" + Screen.height);
Debug.Log("click pos x:" + pos.x + ",pos y:" + pos.y);
float X = Input.mousePosition.x - Screen.width / 2f;
float Y = Input.mousePosition.y - Screen.height / 2f;
Vector2 tranPos = new Vector2(X, Y);
img.localPosition = tranPos;
//得到画布的尺寸
Vector2 uisize = this.GetComponent<RectTransform>().sizeDelta;
Debug.Log("sizeDelta w:" + uisize.x + ", h:" + uisize.y);
Vector2 finalPos = new Vector2(X * (uisize.x / Screen.width), Y * (uisize.y / Screen.height));
img.localPosition = finalPos;
}
}
}
二、方式二
public class UIClick : MonoBehaviour
{
public Transform img; //要改变位置的UI
void Update()
{
if (Input.GetMouseButtonUp(0))
{
//屏幕坐标转换世界坐标
var camera = this.GetComponent<Canvas>().worldCamera;
Vector3 worldPos = camera.ScreenToWorldPoint(Input.mousePosition);
//世界坐标转换位本地坐标
Vector2 uiPos = this.transform.InverseTransformPoint(worldPos);
img.localPosition = uiPos;
}
}
}
三、方式三
RectTransformUtility.ScreenPointToLocalPointInRectangle(
RectTransform rect,
Vector2 screenPoint,
Camera cam,
out Vector2 localPoint);
参数 rect：
这个参数需要你提供一个父物体的RectTransform。因为这个方法是取得UI坐标，而UI坐标都是局部坐标，所以一定需要一个父物体，才能计算出局部坐标。(有父物体才有局部坐标对吧！)
最后，这个方法就会把屏幕上的点转化为这个父物体下的局部坐标。
参数 screenPoint：
这个参数需要你提供一个屏幕空间 的坐标 (屏幕坐标)。
最后，这个方法会把这个屏幕坐标 转化为ui坐标。
参数 cam：
这个参数需要你指定一个相机。
因为UI坐标是根据相机来确定的。(如果Canvas是Screen Space-overlay模式，cam参数应为null)
参数 localPoint：
这个参数需要你提供一个装"返回值"的容器给方法。(如果不能理解高级参数out，可以在这里了解下：https://www.cnblogs.com/linfenghp/p/6618580.html)
最后，这个方法会把屏幕点的UI坐标的结果，装到这个变量中。、
你也可以这样理解：你给指定一个Vector2变量给这个参数，这个方法最后会把转换好的UI坐标赋值给你指定的这个变量。
返回值 - bool类型：
这个方法有一个返回值，但是我自己没使用过这个返回值（感觉用处不大？）。
官方的说法是：这个返回值是，判断此点是否在Rect所在的平面上。
如果在，就返回true。
public class UIClick : MonoBehaviour
{
public Transform img; //要改变位置的UI
void Update()
{
if (Input.GetMouseButtonUp(0))
{
var camera = this.GetComponent<Canvas>().worldCamera;
Vector2 uipos = Vector3.one;
RectTransformUtility.ScreenPointToLocalPointInRectangle(
this.GetComponent<RectTransform>(), Input.mousePosition, camera, out uipos);
img.localPosition = uipos;
}
}
}
网友评论