在Unity UI中实现UILineRenderer组件绘制线条

news/2024/12/22 20:02:38/

背景介绍

        在Unity的UI系统中,绘制线条并不像在3D世界中那样直观(使用Unity自带的LineRender组件在UI中连线并不方便,它在三维中更合适)。没有内置的工具来处理这种需求。如果你希望在UI元素之间绘制连接线(例如在UI上连接不同的图标或控件),需要自己编写逻辑。

         目前只适配常规ui情况

        为了满足这种需求,我封装了一个名为UILineRenderer的组件。该组件能够处理UI中的线条绘制,并且可以适应UI元素复杂的父子关系,提供线条宽度、颜色设置等功能,非常适合在UI界面中使用。

功能简介

UILineRenderer的主要功能包括:

连接两个UI元素(当然你也可以根据我的思路拓展更多).

支持自定义线条宽度与颜色

能够根据UI元素的坐标变化实时更新线条

通过鼠标位置动态调整线条的终点位置

处理UI元素复杂的父子层级关系

        

        目前仅支持连接两个Ui元素(有一个中间状态就是只添加了一个UI元素,你可以设置鼠标作为第二个临时点,然后在合适的时候设置第二个UI元素)

        但是我重写的OnPopulateMesh逻辑实际上是支持连接多个点的,你可以修改这个组件实现你的需求.

先看效果

可以连接两个UI元素

d63c2a97eb7d4e5ca5403bba7af8ad71.png

在设置了第一个UI元素的时候,可以设置鼠标位置,从而实现始终连接鼠标(这里截图导致鼠标没了)

4ac6293ab07f480db46aedde2d3da172.png

源码

using UnityEngine.UI;
using UnityEngine;
using System.Collections.Generic;[RequireComponent(typeof(CanvasRenderer))]//需要该组件才能生效
public class UILineRenderer : Graphic
{private List<Vector2> points = new List<Vector2>(); // 用于存储线条的点[SerializeField] private float lineWidth = 5f; // 线条宽度[SerializeField] private Color lineColor = Color.white; // 默认线条颜色// 每次需要重新绘制UI时调用protected override void OnPopulateMesh(VertexHelper vh){vh.Clear(); // 清空当前顶点数据// 如果没有足够的点,则不绘制任何东西if (points == null || points.Count < 2)return;// 遍历每个点,创建线段for (int i = 0; i < points.Count - 1; i++){Vector2 start = points[i];Vector2 end = points[i + 1];// 计算垂直方向的法线,使线条有宽度Vector2 direction = (end - start).normalized;Vector2 perpendicular = new Vector2(-direction.y, direction.x) * lineWidth / 2f;// 四个顶点(左下、左上、右上、右下)UIVertex vertex = UIVertex.simpleVert;vertex.color = lineColor; // 定义颜色// 左下vertex.position = new Vector3(start.x - perpendicular.x, start.y - perpendicular.y);vh.AddVert(vertex);// 左上vertex.position = new Vector3(start.x + perpendicular.x, start.y + perpendicular.y);vh.AddVert(vertex);// 右上vertex.position = new Vector3(end.x + perpendicular.x, end.y + perpendicular.y);vh.AddVert(vertex);// 右下vertex.position = new Vector3(end.x - perpendicular.x, end.y - perpendicular.y);vh.AddVert(vertex);// 添加两个三角形来组成矩形线条int index = vh.currentVertCount;vh.AddTriangle(index - 4, index - 3, index - 2);vh.AddTriangle(index - 4, index - 2, index - 1);}}/// <summary>/// 设置一个Ui元素/// 为什么要转换坐标?因为UI元素极可能不在同一个父物体下,存在错综复杂的父子关系/// 先获取UiElement世界坐标系转屏幕坐标系再转到此脚本所在的Ui坐标系/// </summary>/// <param name="uiElement"></param>public void AppendUIElement(RectTransform uiElement){Vector2 localPoint;RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, // 当前 UILineRenderer 的 RectTransformRectTransformUtility.WorldToScreenPoint(null, uiElement.position), // UI 元素的世界坐标转换为屏幕坐标null,out localPoint // 输出的局部坐标);// 如果已经有两个点,则移除第二个点,以保持绘制最新线条if (points.Count == 2){points.RemoveAt(1);}// 添加转换后的局部坐标到点列表中points.Add(localPoint);// 标记为需要重新绘制SetVerticesDirty();}/// <summary>/// 设置鼠标位置为第二个点,此时鼠标和第一个UiElement可以构成一条线/// </summary>/// <param name="point"></param>public void SetMouse(){if (points.Count==2){points.RemoveAt(1);}var mousePostion = Input.mousePosition;RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, mousePostion, null, out Vector2 point);points.Add(point);SetVerticesDirty();}/// <summary>/// 设置线的颜色/// </summary>/// <param name="newColor"></param>public void SetLineColor(Color newColor){lineColor = newColor;SetVerticesDirty();}/// <summary>/// 设置线的宽带/// </summary>/// <param name="width"></param>public void SetWidth(float width){lineWidth = width;SetVerticesDirty();}/// <summary>/// 重置组件/// </summary>public void ResetSelf(){points.Clear();lineColor = Color.white;lineWidth = 5f;SetVerticesDirty();}
}

示例

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Test : MonoBehaviour
{public UILineRenderer t;public Image img1;//拖拽public Image img2;private bool keyA = false;// Start is called before the first frame updatevoid Start(){t.AppendUIElement(img1.rectTransform);}// Update is called once per framevoid Update(){if (keyA==false){t.SetMouse();}if (Input.GetKeyDown(KeyCode.A)){keyA = true;t.AppendUIElement(img2.rectTransform);}}}

示例结构图

挂载了UILineRender的组件和其他UI元素一样,所以要放在下面

e8bb621fc0a64837a0a1e86c44b75206.png


http://www.ppmy.cn/news/1527200.html

相关文章

用 Python 实现将长 Markdown 文档从二级标题开始拆分

以下是一个简单的Python脚本&#xff0c;它可以将Markdown文档按照二级标题&#xff08;##&#xff09;进行拆分&#xff0c;并保存到指定的输出路径。 import osdef split_markdown_by_headers(input_path, output_folder):# 确保输出文件夹存在if not os.path.exists(output…

如何快准稳 实现MySQL大表历史数据迁移?

历史迁移解决方案以微服务架构为基础&#xff0c;使用多种设计模式&#xff0c;如&#xff1a;单例、桥接、工厂、模板、策略等。其中涉及的核心技术有多线程、过滤器等&#xff0c;致力于解决MySQL大表迁移的问题&#xff0c;提供多种迁移模式&#xff0c;如&#xff1a;库到库…

明明没有程序占用端口,但是启动程序却提示端口无法使用,项目也启动失败

明明没有程序占用端口&#xff0c;但是启动程序却提示端口无法使用&#xff0c;项目也启动失败 win10、端口占用、port、netstat、used背景 曾在springboot中遇到过&#xff0c;新建spring cloud时又遇到这个问题&#xff0c;如果不从根本上解决&#xff0c;就需要改端口&…

uniapp点击跳转到对应位置

其实就是标签选择器 获取到对应标签所在的高度&#xff0c;然后用uni.pageScrollTo跳转&#xff0c;这是在正常页面上的跳转&#xff0c;scroll-view中更方便 <template><view class"product-page"><scroll-view scroll-y"true" class&quo…

c语言--力扣简单题目(回文链表)讲解

题目如下&#xff1a; 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表。 如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true 示例 2&#xff1…

力扣刷题--3033. 修改矩阵【简单】

题目描述 给你一个下标从 0 开始、大小为 m x n 的整数矩阵 matrix &#xff0c;新建一个下标从 0 开始、名为 answer 的矩阵。使 answer 与 matrix 相等&#xff0c;接着将其中每个值为 -1 的元素替换为所在列的 最大 元素。 返回矩阵 answer 。 算法分析 利用max_element…

基于鸿蒙API10的RTSP播放器(四:沉浸式播放窗口)

前言&#xff1a; 典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条&#xff0c;其中状态栏和导航条&#xff0c;通常在沉浸式布局下称为避让区&#xff1b;避让区之外的区域称为安全区。 开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状…

Maven入门学习

maven是一款管理和构建java项目的工具。 1.概述 1.1安装 安装步骤: 1.1.1官网下载apache-maven-3.6.1-bin.zip&#xff0c;解压 apache-maven-3.6.1-bin.zip 。 1.1.2配置本地仓库:修改conf/settings.xml中的<localRepository>为一个指定目录。 <localRepository&g…