I pasted an Image on Canvas in Unity, so I want to draw a line on it. This is surprisingly difficult and there is no function that can be used easily like draw.line(). If it's a triangle, it's easy to draw, so draw two long triangles to make it look like a straight line.
1. Click Canvas in Hierarchy, press the + button on the upper left of (1), select Create Empty Child, and add a GameObject.
2. Click on the GameObject to show the Inspector.
3. Click (2) and select Bottom, left while holding down the Shift key (the options change). Set Pos X,Y,Z to 0.
4. Click (3) Assets in Project, press the + button on the upper left of Assets, select C# Script, and add NewBehaviourScript.
5. Move the (4) slider to the leftmost (I want to see all the characters in NewBehaviourScript)
6. Double-click NewBehaviourScript to start Visual Studio 2022 and display NewBehaviourScript.cs.
7. We will not use the code that is automatically created, so delete all of them, rewrite the following and save.
8. Return to the Unity edit screen, click the (5) "Add Component" button, and select the magnifying glass (search) field. Enter "Canvas Renderer" and add " Canvas Renderer" that appears in the options .
9. Drag NewBehaviourScript(6) in Assets and drop it on GameObject(7) in Hierarchy.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
public class NewBehaviourScript : MaskableGraphic
{
Static NewBehaviourScript self;
NewBehaviourScript()
{
self = this;
}
// To redraw from outside this class, call NewBehaviourScript.redraw()
static public void redraw()
{
print("redraw");
self.SetAllDirty();
}
protected override void OnPopulateMesh(VertexHelper vh)
{
vh.Clear();
UIVertex vertex = UIVertex.simpleVert;
vertex.color = Color.red;
// draw a diagonal red line from bottom left to top right
// first triangle
vertex.position = new Vector2(0, 0); // lower left position
vh.AddVert(vertex);
vertex.position = new Vector2(canvas.pixelRect.width+2, canvas.pixelRect.height);
vh.AddVert(vertex);
vertex.position = new Vector2(canvas.pixelRect.width-2, canvas.pixelRect.height);
vh.AddVert(vertex);
// second triangle
vertex.position = new Vector2(2, 0);
vh.AddVert(vertex);
vertex.position = new Vector2(-2, 0);
vh.AddVert(vertex);
vertex.position = new Vector2(canvas.pixelRect.width, canvas.pixelRect.height); // position it on the upper right.
vh.AddVert(vertex);
// draw two elongated triangles to form a straight line
vh.AddTriangle(0, 1, 2); // only triangles can be drawn
vh.AddTriangle(3, 4, 5); // only triangles can be drawn
}
}
.
10. click on GameObject in the Hierarchy to display the Inspector and confirm that the New Behaviour Script (Script) has been added under Canvas Renderer.
11. Run the application by pressing ▶ (Run button) at the top center of the screen and confirm that a diagonal red line appears on the desired image.
.
12. in the Solution Explorer of Visual Studio 2022, right-click NewBehaviourScript.cs and select Rename.
13. change it to RedLineOnCanvas.cs and confirm with Enter." Do you want to rename for all references?" You will be asked "Yes". Select "Yes" when asked.
14. All references are now renamed, even the C# class names, including the Unity code.
15. Click on GameObject in the hierarchy, press the + button a little above left of (1), select UI -> Legacy -> Text then Text(Legacy) is added.
16. hold down Shift and click (2)→select Bottom, Left.
17. set PosX, PosY, and PosZ in (3) to all 0.
18. set the "Font Style" in (4) to "Bold" (it will be easier to see that the text is above the line).
19. Press ▶ (Run button) at the top center of the screen to run the application and confirm that the white text "New Text" appears above the diagonal red line.
.
