Creating a line between two UI frames within a list layout

Help and Feedback Scripting Support
#1

I am trying to find out how I can create a line between two frames, both of which are in separate UI list layouts

I have attempted a couple solutions for this that I have found on the developer forum but the positioning has been a bit off as you can see below

image

Code for above result 
local function DrawLine(from, to)
	local distance = to - from

	local line = Instance.new("Frame", script.Parent)
	line.AnchorPoint = Vector2.new(0.5, 0.5)
	line.BackgroundColor3 = Color3.fromRGB(255, 0, 0)
	line.Rotation = math.atan2(distance.Y, distance.X) * (180 / math.pi)
	line.Position = UDim2.fromOffset((to + from).X / 2, (to + from).Y / 2)
	line.Size = UDim2.fromOffset((distance.X ^ 2 + distance.Y ^ 2) ^ 0.5, 2)
end

local function DrawLineUI(guiObject1, guiObject2)
	local from = guiObject1.AbsolutePosition + (guiObject1.AbsoluteSize * Vector2.new(0.5, 0.5))
	local to = guiObject2.AbsolutePosition + (guiObject2.AbsoluteSize * Vector2.new(0.5, 0.5))

	return DrawLine(from, to)
end

DrawLineUI(Frame1,Frame2)

(source)

The desired result is a line which is in the middle of the circles
image

Any help would be greatly appreciated!

2 Likes
#2

After looking for about 15 minutes, I found some code (here) and rewrote your code.

local gui = script.Parent

local Atan2 = math.atan2
local Pi = math.pi
local Abs = math.abs
local Sqrt = math.sqrt
local Deg = math.deg

local VECTOR2_HALF = Vector2.new(0.5, 0.5)

local function drawLineFromTwoPoints(pointA, pointB)
	-- These found from: https://devforum.roblox.com/t/drawing-a-line-between-two-points-in-2d/717808/2
	-- Size: sqrt((x1-x2)^2+(y1-y2)^2)
	-- Pos: ((x1+x2)/2,(y1+y2)/2)
	
	local lineFrame = Instance.new("Frame")
	lineFrame.BackgroundColor3 = Color3.new(1, 0, 0)
	
	lineFrame.Size = UDim2.fromOffset(
		Sqrt((pointA.X - pointB.X) ^ 2 + (pointA.Y - pointB.Y) ^ 2), 
		2
	)
	lineFrame.Position = UDim2.fromOffset(
		(pointA.X + pointB.X) / 2, 
		(pointA.Y + pointB.Y) / 2
	)
	lineFrame.Rotation = Deg(Atan2(
		(pointA.Y - pointB.Y), (pointA.X - pointB.X)
	))
	
	lineFrame.AnchorPoint = VECTOR2_HALF
	lineFrame.BorderSizePixel = 1
	lineFrame.Parent = script.Parent
end

function drawLineUI(obj1, obj2)
        -- Get center regardless of anchor point
	local posA = obj1.AbsolutePosition + (obj1.AbsoluteSize * VECTOR2_HALF)
	local posB = obj2.AbsolutePosition + (obj2.AbsoluteSize * VECTOR2_HALF)
	
	return drawLineFromTwoPoints(posA, posB)
end

drawLineUI(script.Parent.Frame1, script.Parent.Frame2)

This seems to work perfectly.

image
image1014×493 111 KB

image
image1014×497 113 KB

6 Likes
#3

For some reason, it is placing the line like this:

The anchor points on the circles are all 0.5

Positions for them are 0,0,0.5,0 (left) and 1,0,0.5,0 (right)

Absolute Size of circles are 0,18,0,18

And I’ve made sure the function is targeting the circles

#4

Gonna test with your scenario and see what happens

1 Like
#5

This seems to work fine with the positions and anchor points you’ve sent me, mind sending me a bare copy of the UI? If you don’t want to then that’s good.

I’m thinking the list layout is the issue. (How is yours set out?)

#6

I removed the list as I had the same issue with it but the list was a frame with 0,0,1,0 size (automatic sizing for the circles), the UIListLayout was aligned to center for both vertical and horizontal

I’ll DM you a copy of the UI

1 Like
#7

im getting an issue with this, the line goes away from where it should be like a hundred pixels up but the rotation and length is fine