UI连线功能

最新推荐文章于 2023-10-04 13:57:55 发布

原创最新推荐文章于 2023-10-04 13:57:55 发布 · 944 阅读

CC 4.0 BY-SA版权

本文探讨了UI设计中的一项重要功能——连线功能的实现。通过连线，用户可以直观地建立元素之间的关系，常见于流程图、网络拓扑图等应用场景。文章详细介绍了连线的绘制原理、交互设计以及在不同UI框架中的实现方法，为开发者提供了实现此类功能的实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/// <summary>
/// UI连线功能
/// </summary>
public class LinkLine : MonoBehaviour
{
//Y值小的是A
public RectTransform buttonA;
public RectTransform buttonB;

public RectTransform rt;

void Awake(){
rt = GetComponent<RectTransform>();
}

public void InitData(GameObject A, GameObject B) {
if (A.transform.localPosition.y >= B.transform.localPosition.y)
{
buttonB = A.GetComponent<RectTransform>();
buttonA = B.GetComponent<RectTransform>();
}
else
{
buttonA = A.GetComponent<RectTransform>();
buttonB = B.GetComponent<RectTransform>();
}
Link();

}

void Link() {
Vector3 posA = buttonA.localPosition;
Vector3 posB = buttonB.localPosition;

Vector3 midPos = (posA + posB) / 2;
rt.transform.localPosition = midPos;

Vector2 size = rt.sizeDelta;
size.x = Vector3.Distance(posA, posB);
rt.sizeDelta = size;

Vector3 relativePos = posB - posA;
float angle = Mathf.Acos(Vector3.Dot(relativePos.normalized, buttonA.right)) * Mathf.Rad2Deg;

Vector3 euler = rt.localEulerAngles;
euler.z = angle;
rt.localEulerAngles = euler;
}

public static void Link(GameObject A, GameObject B, Transform parent)
{
GameObject lineClone = ResourcesManager.Instance.LoadAsset("Image", parent);
lineClone.transform.SetAsFirstSibling();
LinkLine line = lineClone.GetComponent<LinkLine>();
line.InitData(A, B);

}