Unity | 连线题_画直线的方法

深碍√TFBOYSˉ_ 2023-09-26 04:59 72阅读 0赞

工程在：[unity连线题画直线的工程-C\#文档类资源-CSDN下载][unity_-C_-CSDN]

一、弄一个自己喜欢的直线

我发现如果需要一些小元素，PPT是一个很好的素材库。

调好颜色，长度，透明度，宽度等，右键另存为就可以得到一个PNG，对不会画画PS的程序猿们无限友好

![e10b98d0134448129a927e3c4fb55165.png][]

--------------------

二、基本逻辑

1.搭一个界面（一个背景，小蓝假装问题，小绿假装答案，目标是连起来）

![7abfaff3ff0242ffaeb67ea514517581.png][]

2.点击小蓝的时候，小蓝作为起点（获取小蓝的坐标）

3.如果压着鼠标不放，拖动，会有一条直线从小蓝到鼠标跟着动

4.放手的时候，如果鼠标不在小绿上，直线消失

5.如果鼠标在小绿身上，画一条小蓝到小绿的直线

三、解决逻辑里的每一条

<一>、把小蓝做成按钮，当点击小蓝的时候，小蓝作为起点（获取小蓝的坐标），线条出现，当放开按钮的时候，线条消失。

放直线：

先建一个父物体，把线放进去，放父物体是因为你连对了要存一下这个对的线，让对的线留在里面，有父物体好管理。

![4f3718a1bdcd416e845cf2bc86e4a9f9.png][]

这段代码的详细解析在：

[Unity | 什么是委托？\_菌菌巧乐兹的博客-CSDN博客][Unity _ _-CSDN]

void Start()
        {
            //让干这件事的按钮上加EventTrigger组件
            button_Blue.gameObject.AddComponent<EventTrigger>();
    
            UnityAction<BaseEventData> click = new UnityAction<BaseEventData>(DrawLine);
            EventTrigger.Entry myclick = new EventTrigger.Entry();
            myclick.eventID = EventTriggerType.PointerDown;
            myclick.callback.AddListener(click);
            //把之前写好的那些步骤都给它
            button_Blue.gameObject.GetComponent<EventTrigger>().triggers.Add(myclick);
    
            UnityAction<BaseEventData> clickUp = new UnityAction<BaseEventData>(DispearLine);
            EventTrigger.Entry myclick2 = new EventTrigger.Entry();
            myclick2.eventID= EventTriggerType.PointerUp;
            myclick2.callback.AddListener (clickUp);
            //把之前写好的那些步骤都给它
            button_Blue.gameObject.GetComponent<EventTrigger>().triggers.Add(myclick2);
        }
    
        private void DrawLine(BaseEventData baseEventData)
        {
            //获取按钮的位置，为后面划线做准备
            position_start = button_Blue.transform.position;
    
            //线出现
            Line.SetActive(true);
        }
    
        private void DispearLine(BaseEventData baseEventData)
        {
            //线消失
            Line.SetActive(false);
        }

<二>、如果压着鼠标不放，拖动，会有一条直线从小蓝到鼠标跟着动

分析：

1. 建立一个bool press，一直更新鼠标的坐标

2.我们需要他显示成我们想要的样子，所以要更改它的长度和角度

实现方法：

1. 当鼠标按下的时候，持续更新鼠标坐标

bool press = false;
        Vector3 position_start;
        Vector3 position_end ;
      
        private void Update()
        {
            if (press == true)
            {
                position_end = Input.mousePosition;
            }
            else {
                position_end = Vector3.zero;
            }
        }
        private void DrawLine(BaseEventData baseEventData)
        {
            press = true;
            //获取按钮的位置，为后面划线做准备
            position_start = button_Blue.transform.position;
            //让线的开头放在按钮的位置
            Line.transform.position = position_start;
            //线出现
            Line.SetActive(true);
        }
    
        private void DispearLine(BaseEventData baseEventData)
        {
            press = false;
            //线消失
            Line.SetActive(false);
        }

2.先改线的坐标系，

![82a50a83b2684854b6dbbf9334bf7e31.png][]

本来线的坐标在中间，我们需要坐标移到

![584414ddabbc448293b9da085a034f51.png][]

这样我们方便设置起点，改变大小起点不会变

![5876986abcae4a4e93b7e604d037ce1c.png][]

改成这样就行了

3.计算线的长度

有专门的方法，只需要输入起始坐标和结束坐标就行了

//计算线的长度
        private float GetDistance(Vector3 startPos, Vector3 endPos)
        {
            float distance = Vector3.Distance(startPos, endPos);
            return distance;
        }

3.计算线的角度

private float GetAngle(Vector3 startPos, Vector3 endPos)
        {
            Vector3 dir = endPos - startPos;
            float angle = Vector3.Angle(Vector3.right, dir);
            Vector3 cross = Vector3.Cross(Vector3.right, dir);
            float dirF = cross.z > 0 ? 1 : -1;
            angle = angle * dirF;
            return angle;
        }

4.在update里不停的改变线的长度和角度

private void Update()
        {
            if (press == true)
            {
                position_end = Input.mousePosition;
                //得到线的长度，去改变Line的长度
                Line.GetComponent<RectTransform>().sizeDelta = new Vector2(GetDistance(position_start, position_end), Line.GetComponent<RectTransform>().sizeDelta.y);
                //得到线的角度，去改变Line的角度
                Line.GetComponent<RectTransform>().eulerAngles = new Vector3(0, 0, GetAngle(position_start, position_end));
            }
            else {
                position_end = Vector3.zero;
            }
    
        }

<三>、放手的时候，如果鼠标在小绿上，画一条小蓝到小绿的直线

在鼠标放开的时候，发射一条射线，如果打到小绿，就画这条线

if (Input.GetMouseButtonUp(0)) {
                PointerEventData eventDate = new PointerEventData(EventSystem.current);
                eventDate.position = Input.mousePosition;
                List<RaycastResult> raycastResults = new List<RaycastResult>();
                EventSystem.current.RaycastAll(eventDate, raycastResults);
    
                if (raycastResults.Count > 0 && raycastResults[0].gameObject.name == "答案") {
                    SetLine(raycastResults[0].gameObject.GetComponent<RectTransform>());
                }
            }
    
    
    
        private void SetLine(RectTransform rt) {
    
            position_end = rt.position;
            //得到线的长度，去改变Line的长度
            Line.GetComponent<RectTransform>().sizeDelta = new Vector2(GetDistance(position_start, position_end), Line.GetComponent<RectTransform>().sizeDelta.y);
            //得到线的角度，去改变Line的角度
            Line.GetComponent<RectTransform>().eulerAngles = new Vector3(0, 0, GetAngle(position_start, position_end));
    
            GameObject obj = Instantiate(Line, Line.transform.parent);
            obj.SetActive(true);
        }

[unity_-C_-CSDN]: https://download.csdn.net/download/weixin_49427945/86773186?spm=1001.2014.3001.5501
[e10b98d0134448129a927e3c4fb55165.png]: https://img-blog.csdnimg.cn/e10b98d0134448129a927e3c4fb55165.png
[7abfaff3ff0242ffaeb67ea514517581.png]: https://img-blog.csdnimg.cn/7abfaff3ff0242ffaeb67ea514517581.png
[4f3718a1bdcd416e845cf2bc86e4a9f9.png]: https://img-blog.csdnimg.cn/4f3718a1bdcd416e845cf2bc86e4a9f9.png
[Unity _ _-CSDN]: https://blog.csdn.net/weixin_49427945/article/details/127301275?spm=1001.2014.3001.5501
[82a50a83b2684854b6dbbf9334bf7e31.png]: https://img-blog.csdnimg.cn/82a50a83b2684854b6dbbf9334bf7e31.png
[584414ddabbc448293b9da085a034f51.png]: https://img-blog.csdnimg.cn/584414ddabbc448293b9da085a034f51.png
[5876986abcae4a4e93b7e604d037ce1c.png]: https://img-blog.csdnimg.cn/5876986abcae4a4e93b7e604d037ce1c.png