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

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

Any help would be greatly appreciated!

2 Likes

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.

6 Likes

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

Gonna test with your scenario and see what happens

1 Like

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?)

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

Sindious
(mark)
January 20, 2024, 11:43am
#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