Issues with in-game UI Image Scaling Tool

Help and Feedback Scripting Support
, ,
#1
  1. What do you want to achieve? I would like to make an in-game flag editor (for my RTS game project) that works like Microsoft Word’s shape editing tool. Everything that I plan to implement is complete, except the shape scaling system doesn’t work all the time. Shapes are merely image labels in the UI.
  2. What is the issue? Shape scaling doesn’t work as expected when the images are rotated. The image label’s size changes properly with rotated drag handles, but the position is incorrect. When the image isn’t rotated, the position updates properly. I am currently getting a Vector2 offset of the mouse’s movement, rotating it around the origin in the direct opposite of the shape’s rotation, and manipulating it to be aligned with the corresponding drag handle and direction.

In a nutshell, I’m trying to figure out how the rotation property affects a GUI object’s absolute position, anchor point, and perhaps UDIM2 position so I can compensate for those changes in my code.

  1. What solutions have you tried so far? I have tried to rotate the calculated shape position offset back to the original rotation and flip the x and y values among other things. I began creating the editing system with a vague idea of how it works, and fortunately my vague idea worked up until this point.

Here’s a clip of the scaling tool working without rotation:

Here’s a clip of the scaling tool not working with rotation. Notice how the size is correct, but it looks as if the image was stretched in the wrong direction simply because the position is wrong.

Here’s my code for getting the changes in position/size:

local oPos = shap.Position
local aPos = shap.AbsolutePosition
local oSize = shap.Size
local oMouse = Vector2.new(mouse.X,mouse.Y)
connectionMove = mouse.Move:Connect(function()
	local mDif = (Vector2.new(mouse.X,mouse.Y)-oMouse) --gets the mouse offset
	mDif = rotateVector2(mDif,-1*math.rad(shap.Rotation),Vector2.new(0,0))
	local pDif = mDif --pDif is used for position, mdif for size
	if math.abs(dir[1]) ~= 1 then --this section aligns the offset with the drag handle box determined by "dir"
		mDif = Vector2.new(0,mDif.Y)
		pDif = Vector2.new(0,pDif.Y)
	else
		if dir[1] > 0 then
			pDif = Vector2.new(0,pDif.Y)
		else
			mDif = Vector2.new(-1*mDif.X,mDif.Y)
		end
	end
	if math.abs(dir[2]) ~= 1 then
		mDif = Vector2.new(mDif.X,0)
		pDif = Vector2.new(pDif.X,0)
	else
		if dir[2] > 0 then
			pDif = Vector2.new(pDif.X,0)
		else
			mDif = Vector2.new(mDif.X,-1*mDif.Y)
		end
	end
	pDif = rotateVector2(pDif,math.rad(shap.Rotation),Vector2.new(0,0))
	if constrained == false then
		shap.Position = oPos + UDim2.new(pDif.X/(editor.FlagBox.Flag.Flag.AbsoluteSize.X),0,pDif.Y/(editor.FlagBox.Flag.Flag.AbsoluteSize.Y),0)
		shap.Size = oSize + UDim2.new(mDif.X/(editor.FlagBox.Flag.Flag.AbsoluteSize.X),0,mDif.Y/(editor.FlagBox.Flag.Flag.AbsoluteSize.Y),0)
	else
		local ratio = (oSize.Y.Scale/oSize.X.Scale)
		shap.Position = oPos + UDim2.new(pDif.X/(editor.FlagBox.Flag.Flag.AbsoluteSize.X),0,(pDif.X/(editor.FlagBox.Flag.Flag.AbsoluteSize.X))*ratio,0)
		shap.Size = oSize + UDim2.new(mDif.X/(editor.FlagBox.Flag.Flag.AbsoluteSize.X),0,(mDif.X/(editor.FlagBox.Flag.Flag.AbsoluteSize.X))*ratio,0)
	end	
end)