Unity：LineRender实现画图功能

需求说明：Line是线段，把线段的首尾坐标存在Positions属性里。Element 0是首坐标，Element 1是尾坐标，但是Element 2是以Element 1为首坐标的尾坐标，也就是下一个元素是上一个元素的尾坐标，线段之间是相连的。

画图功能要求，鼠标左键按下时开始绘制线条，鼠标左键抬起时线条绘制完成。再次按下鼠标左键，又会开始绘制另一根线条，但跟上一根线条是不会自动相连的。所以，要实现不自动相连，就得每次绘制线条都重新生成一个Line。每个Line只要实现绘制一根线条的功能就好。所以分成两个脚本，Line挂载一个绘制一根线条的脚本。建一个空物体挂载生成Line，并把鼠标点传给Line的脚本。

 

 

1. 创建Line

 

 2. 拖到 Project面板做成预制体

 

 3. 写Line实现绘制一根线条的逻辑

 1 public class DrawLine : MonoBehaviour
 2 {
 3     public LineRenderer lr;
 4     public List<Vector3> points;
 5 
 6     private void Awake()
 7     {
 8         lr = GetComponent<LineRenderer>();
 9         points = new List<Vector3>();
10     }
11 
12     public void Draw()
13     {
14         lr.positionCount = points.Count;
15         for (int i = 0; i < lr.positionCount; i++)
16         {
17             lr.SetPosition(i, points[i]);
18         }
19     }
20 }

4. 写生成Line的逻辑

 1 public class NewLine : MonoBehaviour
 2 {
 3     GameObject line;  
 4     GameObject lineCp;
 5     bool isDraw;
 6     Color color = Color.black;
 7     float width = 0.02f;
 8 
 9     void Start()
10     {
11         line = Resources.Load("Prefabs/Line") as GameObject;
12     }
13 
14     void Update()
15     {
16         if (Input.GetMouseButtonDown(0))
17         {
18             isDraw = true;
19             lineCp = Instantiate(line);
20         }
21         if (Input.GetMouseButtonUp(0))
22             isDraw = false;
23         if (isDraw)
24         {
25             Vector3 pos = new Vector3(Input.mousePosition.x, Input.mousePosition.y, 2);  
26             pos = Camera.main.ScreenToWorldPoint(pos);  //屏幕坐标转世界坐标
27             DrawLine dl = lineCp.GetComponent<DrawLine>();  //绘制每条线段的逻辑在DrawLine类里
28             dl.points.Add(pos);
29             dl.lr.startColor = color;
30             dl.lr.endColor = color;
31             dl.lr.startWidth = width;
32             dl.lr.endWidth = width;
33             dl.Draw();
34         }
35     }
36 
37     private void OnGUI()  //设置一堆可以调节线条颜色和粗细的按钮
38     {
39         if (GUILayout.Button("红色"))
40             color = Color.red;
41         if (GUILayout.Button("黄色"))
42             color = Color.yellow;
43         if (GUILayout.Button("蓝色"))
44             color = Color.blue;
45         if (GUILayout.Button("绿色"))
46             color = Color.green;
47         if (GUILayout.Button("紫色"))
48             color = Color.magenta;
49         if (GUILayout.Button("黑色"))
50             color = Color.black;
51         if (GUILayout.Button("加粗"))
52             width += 0.02f;
53         if (GUILayout.Button("加细"))
54             width -= 0.02f;
55     }
56 }

 

补充：自己遇到的一个坑，如何在UGUI里显示Line？

调整Canvas如图

 

posted @ 2021-11-02 10:47  番茄玛丽  阅读(633)  评论(0)  编辑  收藏  举报