Unity在Canvas上画线（Draw Line）实现

最新推荐文章于 2025-10-21 22:01:52 发布

原创

最新推荐文章于 2025-10-21 22:01:52 发布 · 6.8k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#unity #html5

本文介绍了Unity UI扩展包中的UILineRenderer组件，用于在Canvas上绘制线段。通过设置Points属性，可以实现基于世界坐标的线段绘制。文章详细解析了坐标转换、线宽处理和接缝处理的实现过程，涉及到数学计算和图形学原理。

# 前言

目前Unity官方提供的UI扩展包中包含了UILineRenderer组件，本篇实现与UILineRenderer实现一致，主要讲解其基本使用与实现过程。不想看的同学可以直接下载官方扩展包。

代码库：unity-ui-extensionshttps://bitbucket.org/UnityUIExtensions/unity-ui-extensions/wiki/browse/

# 正文

canvas上的渲染均通过CanvasRenderer，unity-ui扩展包实现了一套ui基础类UIPrimitiveBase，我们要讲的UILineRenderer正是继承于UIPrimitiveBase实现的Canvas上画线功能。

添加UILineRenderer组件，设置Points值即可根据输入点绘制出线段。Points数组为UILineRenderer子级UI坐标点。下面是UILineRenderer的一个使用范例。

public void DrawLines(List<Vector3> worldPositionList)
{
	//ui摄像机 为了将世界坐标转换为本组件下坐标。
	//注意：这个摄像机与worldPositionList相关联，本例中worldPositionList是被ui摄像机渲染的对象的世界坐标。
	var uiCamera = GameObject.FindWithTag(Tag.GuiCamera).GetComponent<Camera>();
	//UILineRenderer组件
	var lineRenderer = GetComponent<UILineRenderer>();
	//与LineRenderer同级RectTransform
	var myRectTransform = GetCompo