Drawing A Line Between Two GUI Points In Scale

Greetings!
I’ve been trying to make a line chart things, and I wanted to make line that connects two points.
I was checking a few of forums like: Drawing a path with Uis? - #2 by civ2k

so I used this script as making line:

	local startX, startY = startBtn.Position.X.Offset, startBtn.Position.Y.Offset
	local endX, endY = endBtn.Position.X.Offset, endBtn.Position.Y.Offset
	local Line = Instance.new("Frame")
	Line.AnchorPoint = Vector2.new(0.5, 0.5)
	Line.Size = UDim2.new(0, ((endX - startX) ^ 2 + (endY - startY) ^ 2) ^ 0.5, 0, 5) -- Get the size using the distance formula
	Line.Position = UDim2.new(0, (startX + endX) / 2, 0, (startY + endY) / 2) -- Get the position using the midpoint formula
	Line.Rotation = math.atan2(endY - startY, endX - startX) * (180 / math.pi) -- Get the rotation using atan2, convert radians to degrees
	Line.Parent = PARENT_HERE
end

(Thanks civ2k, for this script.)

but this one was for using offset. I need a scale one and I checked up but I didn’t found.
so well, I want to draw a line that connects two points with scale in GUI.
so, I just want a idea or entire script of that. Thanks in advance!

conditions of graph:

in position:
a = number
b = bottom setting (my setting: 1 million)
c = number of graph document number that can be in screen of graph (my setting: 10 million)
d = 0.1 per proceeded date

PointNew.Position = UDim2.new(1+(d*(i-1)),0,-(((a - b)/c)-1),0)
6 Likes

Its fairly simple to convert offset to scale

local Size = game.Workspace.CurrentCamera.ViewportSize;

Line.Size = UDim2.new(
	Line.Size.X.Offset/Size.X,
	0,
	Line.Size.Y.Offset/Size.Y,
	0
);
Line.Position = UDim2.new(
	Line.Position.X.Offset/Size.X,
	0,
	Line.Position.Y.Offset/Size.Y,
	0
);

It’s now able to convert offset to scale, but I got one more problems.


Shallow lines was successful to draw, but if it becomes sharp, as this image says glitched out of it.
This one suprises me and cannot fix. I’m very confused about this.
I think this forum helps it, but It is for offset, not scale. I have to USE SCALE for making it.
so I want to get idea for this too.

function DrawLine(Line, P1, P2)
	local Size = game.Workspace.CurrentCamera.ViewportSize
	local startX, startY = P1.Position.X.Scale, P1.Position.Y.Scale
	local endX, endY = P2.Position.X.Scale, P2.Position.Y.Scale
	Line.AnchorPoint = Vector2.new(0.5, 0.5)
	Line.Size = UDim2.new(((endX - startX) ^ 2 + (endY - startY) ^ 2) ^ 0.5, 0, 0, 3)
	Line.Position = UDim2.new((startX + endX) / 2, 0, (startY + endY) / 2, 0)
	Line.Rotation = (math.atan2(endY - startY, endX - startX) * (180 / math.pi))/2
end
2 Likes

So heres your issue, you didn’t actually convert the starting positions back into offset values, and VineyardVine was using the exact opposite of that, however he was right.

local function DrawPath(Line, P1, P2)
	local Size = workspace.CurrentCamera.ViewportSize
	local startX, startY = P1.Position.X.Scale*Size.X, P1.Position.Y.Scale*Size.Y
	local endX, endY = P2.Position.X.Scale*Size.X, P2.Position.Y.Scale*Size.Y
	local startVector = Vector2.new(startX, startY)
	local endVector = Vector2.new(endX, endY)
	local Distance = (startVector - endVector).Magnitude
	Line.AnchorPoint = Vector2.new(0.5, 0.5)
	Line.Size = UDim2.new(0, Distance, 0, 5)
	Line.Position = UDim2.new(0, (startX + endX) / 2, 0, (startY + endY) / 2)
	Line.Rotation = math.atan2(endY - startY, endX - startX) * (180 / math.pi)
end

Now the points you input are scale based however the actual line will not be scale but offset, however this won’t matter since it’s all relative anyways.

The above code is your solution, ive tried it at a billion different angles.

27 Likes

I’m not sure if its something I’m doing wrong or if its Roblox updates but this function seems to be throwing errors at me when I use it. here’s the error:

Position is not a valid member of Folder

Line, P1 and P2 should be gui objects like Frame, ImageLabel or TextButton, Folder is not a gui object.
image

I think this should be a separate publication to find a solution, so you share more details.