UI Line Creation Issues

[Frewsty]

I’m trying to connect 2 UI Elements with a frame in my GUI.

The frame that all the elements are on can be moved around and scaled by the user, so I used the “Scale” portion of Size and Position instead of Pixels.

Regardless of what formula I use for the rotation, my lines always come out looking wrong. I’m trying to connect each Box with a line straight down the center of both of the boxes but it’s always a few degrees off.

Notice how most of the lines are not going through the center of the boxes.

Here is my code:

local function DrawLine(PointA, PointB)
	local x1 = PointA.Position.X.Scale
	local y1 = PointA.Position.Y.Scale
	local x2 = PointB.Position.X.Scale
	local y2 = PointB.Position.Y.Scale
	
	local Distance = (Vector2.new(x1,y1) - Vector2.new(x2,y2)).Magnitude
		
	local centerX = (PointA.Position.X.Scale + PointB.Position.X.Scale) / 2
	local centerY = (PointA.Position.Y.Scale + PointB.Position.Y.Scale) / 2

	local atan = math.atan((y2-y1)/(x2-x1))

	local Line = Instance.new("Frame")
	Line.BackgroundColor3 = Color3.new(1,1,1)
	Line.BorderSizePixel = 0
	Line.Size = UDim2.new(Distance, 0, .001 ,2 )
	Line.AnchorPoint = Vector2.new(0.5,0.5)
	Line.Position = UDim2.new(centerX, 0, centerY,0 )
	Line.Rotation = math.deg(atan)
	Line.Parent = skillInside.Folder.Lines
end

The variables “PointA/B” are the 2 UI Elements I am trying to connect.

Please help.

[CriticalDucky]

They aren’t lining up correctly because you are getting the slope using the scale, which is a non uniform quantity (it is stretched, not cube like) depending on the screen. Use offset instead.

If you still want the points to have scale like behavior, then position the points using scale and update the lines every frame with the points’ offset position values.

[Frewsty]

Thank you, I was trying this solution by myself and it wasn’t working until I saw your Solution which mentioned positioning using scale.