Need help to convert offset to scale of an UI relative to another UI

Help and Feedback Scripting Support
#1

Greetings Everyone.

  1. What do you want to achieve? :
    I’m trying to draw a line between two UI (using a Frame). So far the line script work as I can see.
    image
    This two UI here are the point A and B for drawing the line.

But his position and his scale are not relative to the parent UI, so the line didn’t appear because it is far away from it’s target.

  1. What solutions have you tried so far?:
    I try to use a offset to scale code. This code work perfectly on UI directly parented to a GUI object.
function OffsetToScale(Offset,targetUI)
	local viewPortSize = workspace.CurrentCamera.ViewportSize
	return UDim2.new(Offset[1] / viewPortSize.X, 0, Offset[2] / viewPortSize.Y, 0)
end

So it didn’t work so well on that line because the line his parented to a frame.

And here his the code for drawing a line between two UI.

local VECTOR2_HALF = Vector2.new(0.5, 0.5)

function DrawLineFromTwoPoints(lineFrame:Frame , pointA , pointB)

	lineFrame.Size = UDim2.fromOffset(
		math.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 = math.deg(math.atan2((pointA.Y - pointB.Y), (pointA.X - pointB.X)))

	lineFrame.AnchorPoint = VECTOR2_HALF

	return lineFrame
end

function DrawLineUI(lineFrame:Frame, 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(lineFrame, posA, posB)
end

And here the code I use to call all of the function.

local lineNew = DrawLineUI(lineSkillTree:Clone(),skillFrame,frameLinkedTo.Value)
lineNew.Position = OffsetToScale({lineNew.Position.X.Offset,lineNew.Position.Y.Offset},moverFrame)
lineNew.Size = OffsetToScale({lineNew.Size.X.Offset,lineNew.Size.Y.Offset},moverFrame)
lineNew.Parent = moverFrame.LineStorage

And the actual workspace configuration :
2023-05-25_07h17_10

Thanks just after read this mess. And thanks if you help me.

1 Like
#3

What is the size of the Mover frame? Also, you’re dividing the position by your device’s screen size, which means the position is relative to your device, not the frame.

#4

Udim2.new(2,0,2,0) for the Mover frame size,you think that work too with position the offset?

#5

Yes, I think that’s the problem. Try dividing by the absolute size of the Mover frame.

#6

I will try it asap, but for unknow reason (THANKS ROBLOX TO HAVE UPDATE SOMETHING) one of my main script is broken…

#7

If you need help with offset to scale conversion you can use a plugin called “AutoScale - Lite” and for line drawing just use TweenService.

#8

Can’t use Plugin, it’s real time line drawing

#9

Well why not just make a line manually setting the size to UDIM (0,0,1,0) and then tweening the line to the size you want it, if it’s full line then (1,0,1,0)

#10

Because it’s a dynamic ability tree, so make it manually is a problem…

#11

Where do I need to put this division?

#13 
function OffsetToScale(Offset,targetUI)
--	local viewPortSize = workspace.CurrentCamera.ViewportSize
	return UDim2.new(Offset[1] / targetUI.AbsoluteSize.X, 0, Offset[2] / targetUI.AbsoluteSize.Y, 0)
end