How to convert UI offset to scale

Help and Feedback Scripting Support
#1

Hello everyone!
I created a drawing system in offset and I need to convert it to scale. Any ideas on how to do that?

Thank you

#2

Is the drawing system done using guis? If so, I believe this plugin could help you.

#3

You can convert offset to scale by taking the child’s offset and dividing it by the parent’s absolute size.

#4

This is the drawing system code:

local xPos = Mouse.X
		local yPos = Mouse.Y

		local paintCloned = paint:Clone()

		local offset = Vector2.new(math.abs(xPos - canvas.AbsolutePosition.X), math.abs(yPos - canvas.AbsolutePosition.Y))

		paintCloned.Size = UDim2.new(0, size, 0, size)
		paintCloned.Position = UDim2.new(0, offset.X, 0, offset.Y)
		paintCloned.ImageTransparency = 1

		paintCloned.Parent = canvas
		
		
		
		
		if num == 2 then
			num = 1
			Frame2x = paintCloned.Position.X.Offset
			Frame2y = paintCloned.Position.Y.Offset
			Frame2 = paintCloned
		else
			num = 2
			Frame1x = paintCloned.Position.X.Offset
			Frame1y = paintCloned.Position.Y.Offset
			Frame1 = paintCloned
		end
		
		
		if Frame1 and Frame2 ~= nil then
			posX = (Frame1x + Frame2x)/2
			posY = (Frame1y + Frame2y)/2




			local newLine = Instance.new("Frame")
			newLine.Position = UDim2.new(0,posX,0,posY)


			local distanceX = Frame1.AbsolutePosition.X - Frame2.AbsolutePosition.X
			local distanceY = Frame1.AbsolutePosition.Y - Frame2.AbsolutePosition.Y


			local distance = Vector2.new(distanceX,distanceY).Magnitude

			newLine.Size = UDim2.new(0,distance+10,0,size)

			local y = Frame1.AbsolutePosition.Y-Frame2.AbsolutePosition.Y
			local x = Frame1.AbsolutePosition.X - Frame2.AbsolutePosition.X

			newLine.Rotation = math.atan2(y,x)*180/math.pi

			newLine.Name = "BackgroundThing"



			newLine.AnchorPoint = Vector2.new(0.5,0.5)
			newLine.BackgroundColor3 = Color3.fromRGB(0,0,0)
			newLine.BorderSizePixel = 0
			newLine.BorderColor3 = Color3.fromRGB(0,0,0)

			local corner = Instance.new("UICorner")
			corner.CornerRadius = UDim.new(1,0)
			corner.Parent = newLine
			newLine.Parent = canvas

		end

As shown, it is all in offset

#5

I’m not going to directly modify your code right now so instead here’s a helper function, implement as you will.

local function GetScaleComponents(Object, ParentOverride) -- Pass your frame/whatever here. Not .Size/etc.
  local Parent = ParentOverride and ParentOverride or Object.Parent or error("Invalid argument #1 to GetScaleComponents, Instance has no parent!", 2)
  assert(typeof(Parent) == "Instance" and (Parent:IsA("ScreenGui") or Parent:IsA("SurfaceGui")), "Invalid Parent type for GetScaleComponents!", 2)
  local ASize = Parent.AbsoluteSize
  local Position = Object.AbsolutePosition
  local Size = Object.AbsoluteSize
  local Scaled = {
    Size = UDim2.fromScale(
      Size.X/ASize.X,
      Size.Y/ASize.Y
    ),
    Position = UDim2.fromScale(
      Position.X/ASize.X,
      Position.Y/ASize.Y
    ),
  }
  return Scaled
end

-- Example usage:
local A = Instance.new("Frame")
A.Size = UDim2.fromOffset(1920,100)
local B = Instance.new("ScreenGui", game.Players.LocalPlayer.PlayerGui)
A.Size = (GetScaleComponents(A, B).Size)
A.Parent = B
print(A.Size)

Hope that helps.