- Home /
Draw a 2d line in the new UI
How would you go about drawing 2d lines in the new UI in Overlay mode?
I need a line between point A and B with thickness T. These values change runtime, so it has to be dynamic.
My first thought was to use line renderer but I can't get it to work with the new UI.
Technically you could just use an image and shape it so that it's a line. The basic background image would be pretty good but you could create a specific one if it's not good enough for you.
How are you working out the coordinates for the line. Is that in the new UI as that could be tricky.
If you set the pivot point to the middle left edge of the image then you should be able to use that as the start point.
You might (will) have to use maths to work out the angle on the Z axis though.
Let me know if it sounds like a possible solution to what you want but you're not sure if you can get it working and I'll see if I can.
Not sure if this is a "correct" way but I can't see anything obvious elsewhere.
@$$anonymous$$mmpies I ended up doing just this, thank you. I added an image and changed it's width and height to the appropriate size. I did not need to use any rotation for my purpose because all I needed was a horizontal line.
Answer by DanSuperGP · Jan 07, 2015 at 11:17 PM
I don't think there's a simple line drawing method for the UI.
As several people have mentioned in the comments, you can use an image.
Vector3 differenceVector = pointB - pointA;
imageRectTransform.sizeDelta = new Vector2( differenceVector.magnitude, lineWidth);
imageRectTransfom.pivot = new Vector2(0, 0.5f);
imageRectTransform.position = pointA;
float angle = Mathf.Atan2(differenceVector.y, differenceVector.x) * Mathf.Rad2Deg;
imageRectTransform.Rotation = Quaternion.Euler(0,0, angle);
imageRectTransform.Rotation
must be imageRectTransform.rotation
or imageRectTransform.localRotation
as of Unity 5.6.
This renders a line that goes beyond the end point. Need to divide magnitude by scale factor.
differenceVector.magnitude / img.canvas.scaleFactor;
It's works with comments, but use localPosition ins$$anonymous$$d of position if your gameobject isn't root under root (ex : Problem with scrolls views :) )
private void DrawLine(Vector2 pointA, Vector2 pointB)
{
float lineWidth = 2;
Vector3 differenceVector = pointB - pointA;
var line = Instantiate(prefabLine, this.GetComponent<Transform>());
var imageRectTransform = line.GetComponent<RectTransform>();
imageRectTransform.sizeDelta = new Vector2(differenceVector.magnitude / CenterImg.canvas.scaleFactor, lineWidth);
imageRectTransform.pivot = new Vector2(0, 0.5f);
imageRectTransform.localPosition = new Vector3(pointA.x, pointA.y, CenterImg.transform.position.z);
float angle = $$anonymous$$athf.Atan2(differenceVector.y, differenceVector.x) * $$anonymous$$athf.Rad2Deg;
line.transform.localRotation = Quaternion.Euler(0, 0, angle);
}
Your answer
Follow this Question
Related Questions
Drawing a line in a sprite 0 Answers
how to render line between gui element and mouse position 1 Answer
how to activate object on collision 0 Answers
Drawing Lines with AA 1 Answer
Draw path for the ball 1 Answer