当前位置：首页 > news >正文

Unity中在UI上画线

news 来源：原创 2025/5/27 4:56:22

在UI中画一条曲线

我封装了一个组件,可以实现基本的画线需求.

效果

按住鼠标左键随手一画.

用起来也很简单,将组件挂到空物体上就行了,红色的背景是Panel.

你可以将该组件理解为一个Image,只不过形状更灵活一些罢了,所以它要放在下面的层级(不然可能会被挡住).

代码

可以调整一些基本的属性,如线的颜色和粗细.

using System;
using UnityEngine.UI;
using UnityEngine;
using System.Collections.Generic;
using Unity.VisualScripting;[RequireComponent(typeof(CanvasRenderer))] //需要该组件才能生效
public class UILineRenderer : Graphic
{private readonly List<Vector2> points = new List<Vector2>(); // 用于存储线条的点[SerializeField] private float lineWidth = 5f; // 线条宽度[SerializeField] private Color lineColor = Color.white; // 默认线条颜色//----用来测试,你应当使用自己的办法调用DrawLine方法,后续删除这部分-----private List<Vector2> points1 = new List<Vector2>(); // 用于存储线条的点private void Update(){if (Input.GetMouseButtonDown(0)){points1.Clear();}else if (Input.GetMouseButton(0)){points1.Add(Input.mousePosition);DrawLine(points1);}else if (Input.GetMouseButtonUp(0)){foreach (var VARIABLE in points1){Debug.Log(VARIABLE);}}}//--------------------------------------------------------// 每次需要重新绘制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);}}public void DrawLine(List<Vector2> pointArray){if (pointArray == null || pointArray.Count < 2) return;List<Vector2> newPoints = new List<Vector2>();foreach (Vector2 v2 in pointArray){Vector2 localPoint;RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, // 当前 UILineRenderer 的 RectTransformv2,null,out localPoint // 输出的局部坐标);newPoints.Add(localPoint);}this.points.Clear();this.points.AddRange(newPoints);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();}
}

Unity中在UI上画线

在UI中画一条曲线我封装了一个组件,可以实现基本的画线需求. 效果按住鼠标左键随手一画. 用起来也很简单,将组件挂到空物体上就行了,红色的背景是Panel. 你可以将该组件理解为一个Image,只不过形状更灵活一些罢了,所以它要放在下面的层级(不然可能会被挡住). 代码可以…...

编程日记 2025/5/27 4:56:22

Unity中关于实现管道水流+瀑布流动+大肠蠕动效果笔记

Unity中关于实现管道水流瀑布流动大肠蠕动效果笔记效果展示： 参考资料及链接： 1、如何在 Unity 中创建水效果 - 水弯曲教程 https://www.youtube.com/watch?v3CcWus6d_B8 关于补充个人技能中：顶点噪波影响网格着色器配合粒子实现水特效 …...

编程日记 2025/5/24 4:42:55

【ARTS】【LeetCode-704】二分查找算法

目录前言什么是ARTS？ 算法力扣704题二分查找基本思想： 二分查找算法(递归的方式): 经典写法(找单值): 代码分析: 经典写法(找数组即多个返回值) 代码分析经典题目题目描述： 官方题解深入思考模版一 (相错终止/左闭右闭) 相等返回情形…...

编程日记 2025/5/26 21:03:53

JavaWeb 学习笔记 XML 和 Json 篇 | 020

今日推荐语愿你遇见好天气,愿你的征途铺满了星星——圣埃克苏佩里日期学习内容打卡编号2025年01月23日JavaWeb笔记 XML 和 Json 篇020 前言哈喽，我是菜鸟阿康。以下是我的学习笔记，既做打卡也做分享，希望对你也有所帮助…...

编程日记 2025/5/22 10:21:19

【LeetCode】--- MySQL刷题集合

1.组合两个表（外连接） select p.firstName,p.lastName,a.city,a.state from Person p left join Address a on p.personId a.personId; 以左边表为基准，去连接右边的表。取两表的交集和左表的全集 2.第二高的薪水 （子查询、if…...

编程日记 2025/5/28 0:55:20

【深度解析Java 20天速成】04_IDEA的安装与使用

【Why IDEA ?】【注】JetBrains官方说明： 尽管我们采取了多种措施确保受访者的代表性，但结果可能会略微偏向 JetBrains 产品的用户，因为这些用户更有可能参加调查。此外，2022年，某美国软件开发商在对近千名专业的Ja…...

编程日记 2025/5/26 8:33:46

系统思考—业务协同

最近在和一些客户的沟通中，企业老板都提到一个共同的困惑：每个部门都感觉自己在解决问题，做了正确的事情，但为什么组织的绩效就是没有增长？更糟糕的是，大家都不知道问题到底出在哪里？ 在这种情…...

编程日记 2025/5/27 2:31:09

1. 下载ES 访问ES官网下载Download Elasticsearch | Elastic 2. 配置环境变量 ES_JAVA_HOME : D:\jdk-17.0.9 ES_HOME : D:\elasticsearch-8.17.1-windows-x86_64\elasticsearch-8.17.1 3. 添加一些ES的配置 <1>关闭ES安全认证打开elasticsearch-8.17.1\config\e…...

编程日记 2025/5/24 15:57:48

[java] java基础-字符串篇

目录 API String 创建字符串对象的两种方式： Java的内存模型字符串常量池（串池）存放地址两种构造方法的内存分析 String的常用方法号比较的是什么字符串比较（比较字符串的数据值） 遍历字符串 StringBui…...

编程日记 2025/5/26 19:07:06

告别手动编辑:如何用Python快速创建Ansible hosts文件?

在自动化运维领域，Ansible是一款非常强大的工具，它可以帮助我们管理和配置大量的服务器。为了让Ansible能够有效地管理这些服务器，我们需要一个hosts清单文件，该文件定义了Ansible要管理的目标主机。在实际应用中，我们…...

编程日记 2025/5/27 5:23:14

神经网络|(二)sigmoid神经元函数

【1】引言在前序学习进程中，我们已经了解了基本的二元分类器和神经元的构成，文章学习链接为： 神经网络|(一)加权平均法，感知机和神经元-CSDN博客在此基础上，我们认识到神经元本身在做二元分类，是一种非…...

编程日记 2025/5/27 6:06:03

DAY6,使用互斥锁和信号量分别实现5个线程之间的同步

题目请使用互斥锁和信号量分别实现5个线程之间的同步代码：信号量实现 void* task1(void* arg); void* task2(void* arg); void* task3(void* arg); void* task4(void* arg); void* task5(void* arg);sem_t sem[5]; //信号量变量int main(int argc, const …...

编程日记 2025/5/26 21:50:50

Redis 集群模式入门

Redis 集群模式入门一、简介 Redis 有三种集群模式：主从模式、Sentinel 哨兵模式、cluster 分片模式主从复制（Master-Slave Replication）: 在这种模式下，数据可以从一个 Redis 实例（主节点 Master）复…...

编程日记 2025/5/22 16:21:46

计算机网络（55）流失存储音频/视频

一、定义与特点定义：流式存储音频/视频是指经过压缩并存储在服务器上的多媒体文件，客户端可以通过互联网边下载边播放这些文件，也称为音频/视频点播。特点： 边下载边播放：用户无需等待整个文件下载完成即可开始播放…...

编程日记 2025/5/23 20:28:57

vue + element-ui 组件样式缺失导致没有效果

失效代码： 修改方法： 在main.js文件里面加上： import element-ui/lib/theme-chalk/index.css; 最后：...

编程日记 2025/5/24 15:39:30

在 Windows 11 中为 SMB 3.x 文件共享协议提供 RDMA 支持

注：机翻，未校。 Enable SMB Direct in Windows 11 在 Windows 11 中启用 SMB Direct Provides RDMA support for the SMB 3.x file sharing protocol 为 SMB 3.x 文件共享协议提供 RDMA 支持 Vigneshwaran Vijayakumar November 3, 2024 Last Updat…...

编程日记 2025/5/26 17:41:46

250123-对象的比较（equals()和==）

1. Object类中的equals()方法见20250103-Object类，使用构造函数创建的两个对象，见下例，即使输入参数是相同的，比较结果仍是不同，因为对象的堆内存地址不同，在任何情况下使用关键字new都会开辟出一个新的内…...

编程日记 2025/5/27 17:38:44

UE求职Demo开发日志#6 测试用强化页面UI搭建

1 反向实现思路设计先看最终效果： 先做了一个大致的分区，右侧的上半部分用来显示数据，下半部分用来强化和显示需要的材料，至于这个背景设定上强化应该叫什么，。。。。，还没定，反正应该不叫强…...

编程日记 2025/5/25 15:16:32

华为支付接入规范

为了确保用户获得良好的支付体验，Payment Kit制定了相关接入设计规范，请开发者遵照执行，具体要求（非强制性）如下： 一、支付方式呈现涉及支付公司名称，请统一使用：花瓣支付&#xff…...

编程日记 2025/5/24 15:38:12

论文速读|Matrix-SSL：Matrix Information Theory for Self-Supervised Learning.ICML24

论文地址：Matrix Information Theory for Self-Supervised Learning 代码地址：https://github.com/yifanzhang-pro/matrix-ssl bib引用： article{zhang2023matrix,title{Matrix Information Theory for Self-Supervised Learning},author{Zh…...

编程日记 2025/5/26 10:52:22

左叶子之和(力扣404)

这道题需要将左右子树的左叶子结点之和不断返回给该左右子树的父节点，这是典型的后序遍历。如果大家对于二叉树的遍历不熟悉的话，可以先去看一下我的关于二叉树遍历的博客。否则直接看这道题是很容易懵逼的。熟悉了二叉树的遍历之后，大家可以…...

编程日记 2025/5/24 11:50:08

微信小程序使用picker根据接口给的省市区的数据实现省市区三级联动或者省市区街道等多级联动

接口数据如上图省市区多级联动，都是使用的一个接口通过传参父类的code。返回我们想要的数据比如获取省就直接不要参数。市就把省得code传给接口，区就把市的code作为参数。 <picker mode"multiSelector" :range"mulSelect1" …...

编程日记 2025/5/24 6:14:33

iconfont等图标托管网站上传svg显示未轮廓化解决办法

打开即时设计即时设计 - 可实时协作的专业 UI 设计工具导入图标后拖入画板里面，右键选择轮廓化将图标导出...

编程日记 2025/5/25 0:55:07

Mysql索引（学习自用）

目录一、索引概述优缺点二、索引结构 1、索引数据结构 2、索引支持结构 3、B树 4、B树 5、hash索引 6、为啥采用B树索引三、索引分类四、索引语法五、索引性能分析 5.1查看执行频率 5.2慢查询日志 5.3profiling 5.4explain 六、索引使用规则 6.1验证索…...

编程日记 2025/5/26 6:35:16

封装svg图片展示及操作组件——svgComponent——js技能提升

template部分 <template><div class"canvas-wrapper" ref"canvasWrapper"><svg:viewBox"computedViewBox"ref"svgCanvas"xmlns"http://www.w3.org/2000/svg"xmlns:xlink"http://www.w3.org/1999/xlink…...

编程日记 2025/5/26 15:36:27

数据从前端传到后端入库过程分析

数据从前端传到后端入库过程分析概述积累了一些项目经验，成长为一个老程序员了，自认为对各种业务和技术都能得心应手的应对了，殊不知很多时候我们借助了搜索引擎的能力，当然现在大家都是通过AI来武装自己。今天要分析的话题是…...

编程日记 2025/5/24 6:16:13

【Pytest】结构介绍

1.目录结构介绍 project_root/ │ ├── tests/ # 测试用例存放目录 │ ├── __init__.py │ ├── test_module1.py │ ├── module1.py # 被测试的模块 ├── conftest.py # pytest配置文件，可定义fixture和钩子函数 ├── py…...

编程日记 2025/5/24 15:21:24

每日十题八股-2025年1月23日

1.快排为什么时间复杂度最差是O（n^2） 2.快排这么强，那冒泡排序还有必要吗？ 3.如果要对一个很大的数据集，进行排序，而没办法一次性在内存排序，这时候怎么办？ 4.面试官：你的…...

编程日记 2025/5/24 8:05:08

mysql相关知识(详细)

一、什么是数据库？ 概念：数据库(Database,简称DB)，长期存放在计算机内，有组织，可共享的大量数据的集合，是一个数据"仓库"。作用：存放管理数据分类：关系型数据库、NoSQL数…...

编程日记 2025/5/27 6:35:03

C++ 静态变量static的使用方法

static概述： static关键字有三种使用方式，其中前两种只指在C语言中使用，第三种在C中使用。静态局部变量（C) 静态全局变量/函数（C) 静态数据成员/成员函数（C） 静态局部变量静态局部变量&…...

编程日记 2025/5/26 17:52:35

对grid布局有哪些了解【css】

CSS Grid 布局是现代网页设计中非常强大的布局方式之一，它能够使你以更加灵活且直观的方式来设计网页的布局，特别适用于复杂的多行多列的布局。它允许你在网页上创建非常精确的网格，帮助你把内容放置在多个行和列中。 1. Grid 布局的基本概念…...

编程日记 2025/5/26 20:46:55

IOS 安全机制拦截 window.open

摘要在ios环境，在某些情况下执行window.open不生效一、window.open window.open(url, target, windowFeatures) 1. url：「可选参数」，表示你要加载的资源URL或路径，如果不传，则打开一个url地址为about:blank的空…...

编程日记 2025/5/24 14:32:57

低空经济（9）低空飞行器零部件供应商国内外厂家

低空飞行器零部件供应商国内外厂家 1.概述2.国内供应商2.1 动力系统2.2 航电系统2.3 机身结构部件2.4 传动系统2.5 液压系统与气动系统 3.国外供应商3.1 动力系统3.2 航电系统3.3 机身结构部件3.4 传动系统3.5 液压与气动系统 tips：资料来自网络，仅供参考…...

编程日记 2025/5/25 10:12:46

3b1b线性代数基础

零、写在前面 3b1b之前没认真看，闲了整理整理。一、向量学习物理的时候，向量是空间中的箭头。由其方向和长度决定。学习数据结构的时候，向量是有序的数字列表。向量的每一维度有着不同含义。线性代数中，我们通常认为**向量…...

编程日记 2025/5/27 10:34:27

困境如雾路难寻，心若清明步自轻---2024年创作回顾

文章目录前言博客创作回顾第一次被催更第一次获得证书周榜几篇博客互动最多的最满意的引发思考的写博契机碎碎念时也运也部分经验尾前言今年三月份，我已写下一篇《近一年多个人总结》，当时还没开始写博客。四月份写博后，就顺手将那篇总…...

编程日记 2025/5/24 17:15:06

SAP 中的三种内表

文章目录 1 : Introduction2 : Summary3: Reerence document4 : Example 1 : Introduction In the abap development we deal with data and the carrier is internal table . it is transfered in the whole programe. In the interview we offten meet it . What is the dif…...

编程日记 2025/5/26 18:24:25

在UI中画一条曲线

效果

代码

相关文章：