首页 > Unity3D频道 > 【UGUI研究院】 > UGUI研究院之获取UI子节点在Canvas的2D坐标（十二）
2015
05-12

UGUI研究院之获取UI子节点在Canvas的2D坐标（十二）

今天一个同事问我怎么样获取UI在Canvas下的2D坐标。我查了一下API，其实很简单。如下图所示，UI比较复杂了子节点会很多，假设我想获取某个子的子节点的2D坐标。

UGUI研究院之获取UI子节点在Canvas的2D坐标（十二） - 雨松MOMO程序研究院 - 1
首先我们要搞清楚 transform.postion 和 rectTransform.anchoredPosition  这两个坐标是完全不一样的。前面的是3D坐标，后面的是2D在Rect里的坐标，并且还是相对坐标，那么节点深了坐标就更不好换算了。

C#
1
2
3
4
5
6
7
8
9
10
11
 
public Canvas canvas;
 
void Start(){
Vector2 pos;
if(RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, transform.position, canvas.camera, out pos)){
Debug.Log(pos);
}
 
}
 

所以上述代码就是用UI元素的世界坐标和canvas的RectTrasform再加上UI摄像机，换算出元素在Canvas的2D坐标。

最后在想需要赋值的UI 用 rectTransform.anchoredPosition ＝ pos 就可以了。。

今天有朋友问我，怎么通过鼠标的坐标在屏幕上移动来更新UI的显示位置。代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
using UnityEngine;
using System.Collections;
 
public class NewBehaviourScript : MonoBehaviour {
 
    Canvas canvas;
    RectTransform rectTransform;
// Use this for initialization
void Start ()
    {
        rectTransform = transform as RectTransform;
        canvas = GameObject.Find("Canvas").GetComponent<Canvas>();
}
// Update is called once per frame
void Update () {
        Vector2 pos;
        if(RectTransformUtility.ScreenPointToLocalPointInRectangle(canvas.transform as RectTransform, Input.mousePosition, canvas.worldCamera, out pos)){
            rectTransform.anchoredPosition = pos;
        }
}
}
 

 

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《UGUI研究院之获取UI子节点在Canvas的2D坐标（十二）》有 27 条评论

  1. David 说：
    2021 年 1 月 22 日下午 6:46

    大神，我遇到一个棘手的问题。我正在开发一个用UI在世界画线的功能，想法是确定世界坐标的两个点，把它们转成屏幕坐标，然后用UGUI画线。但是当世界坐标的点超出屏幕太远，用RectTransformUtility.ScreenPointToWorldPointInRectangle方法转成屏幕坐标点的时候就会有问题，坐标值有时候甚至会上亿，请问有什么解决的办法吗？

    回复
    • 雨松MOMO 说：
      2021 年 1 月 27 日下午 1:39

      可以用 RectTransform.GetWorldCorners来取世界坐标，最后比较全用transform.position来，这样单位就统一了

      回复
      • David 说：
        2021 年 1 月 28 日下午 5:58

        世界坐标我是知道的，就是世界坐标转到屏幕坐标的时候会出现问题，当画线的两个点中有一个点不在屏幕内，用RectTransformUtility.ScreenPointToWorldPointInRectangle方法转成屏幕坐标就会出现问题。

        回复
  2. 杨辉 说：
    2018 年 12 月 10 日上午 10:29

    momo大神，有个问题想请教一下，：这个方法实现了效果，但是在相机旋转180之后，UI会出现在相机视野中，有什么解决方案吗？谢谢大神了。这个问题我查了很多方法都不行，希望大神不吝赐教！非常感谢！

    回复
  3. 曲生 说：
    2017 年 8 月 17 日上午 11:16

    雨松大神，这边在不修改描点，布局样式的情况下是正常可用的。但是只要改了描点或者布局，就无法正常使用了，因为anchoredPosition是相对坐标，而ScreenPointToLocalPointInRectangle这个方法只是转换出了canvas坐标。
    修改为以下方法可正常布局
    Vector3 worldP;
    if(RectTransformUtility.ScreenPointToWorldPointInRectangle(
    canvas.transform as RectTransform, Input.mousePosition, canvas.worldCamera, out worldP)){
    rectTransform.position = worldP;
    }

    回复
  4. 菇徒 说：
    2016 年 10 月 25 日下午 3:32

    大神，按照你的代码，倒是能够显示鼠标所点的位置，但是，图片不能移动诶。求解决

    回复
  6. hello2unity 说：
    2015 年 7 月 9 日下午 7:44

    如果锚点是自定义的会有问题，localposition好像更好！

    回复
  7. ' Ne pas se résigner à 说：
    2015 年 7 月 5 日下午 5:57

    怎么那么麻烦。现在的做法其实是获得当前容器下坐标的相对位置，如果层级比较深，那么要一层层换算相对位置？

    回复
  8. 幽雨 说：
    2015 年 6 月 18 日下午 3:52

    当看到大神这么写的时候,还纳闷一下,为啥应该填屏幕坐标的参数位置填世界坐标?经测试,当相机为canvas.camera的时候,世界坐标与屏幕坐标是相等的.canvas的范围就是摄像机的范围,同时左下角又是世界坐标系原点,也是屏幕坐标系原点.这样就不用将世界坐标转换成屏幕坐标了,加快了效率.

    回复
  9. lojne 说：
    2015 年 5 月 23 日上午 8:46

    今天写的时候 rectTransform.anchoredPosition弄明白怎么给值了 但是实例化以后比例会变大

    回复
  10. lojne 说：
    2015 年 5 月 22 日下午 4:19

    大神今天写的时候又遇到问题了能帮忙写一下 一个Image从RectTrasfrom的（-100，100）移动到（100，-100）拜托啦！~

    回复
  11. 君临 说：
    2015 年 5 月 20 日下午 6:20

    你这是UI上的点转换成世界点的吧 弄错了吧

    回复
  12. 志升 说：
    2015 年 5 月 16 日下午 5:09

    搞错了，是第二参数，Vector2 你这边给的是 Vector3 不明这点

    回复
  13. 志升 说：
    2015 年 5 月 16 日下午 5:06

    雨松 大神，有一点不明的地方，ScreenPointToLocalPointInRectangle （）里面的参数不应该是 RectTransform ,Vector2,camera,out 吗，怎么你这里的第三个参数可以是 Vector3 呢？

    回复
  14. lojne 说：
    2015 年 5 月 12 日下午 4:36

    大神有没有大众点的的翻墙方法推荐下，直接发不方便可以给个链接或者度盘发个TXT，谢谢！~

    回复
  15. lojne 说：
    2015 年 5 月 12 日下午 4:35

    朋友推荐雨松大神，看了以后感觉要学的实在太多了！~

    回复

留下一个回复

你的email不会被公开。