I Need Assistance With My Straight Line Drawing Tool

[LUCKY4291]

Hello Robloxians! This is my first post on the devforum.

I need help fixing some issues with my straight line drawing tool as demonstrated in the video. The purpose of the tool is to allow the drawer to draw perfectly straight lines whether they are vertical, horizontal, or diagonal.

The way the tool works is it generates ImageButtons when input has began on the white board. In this case, the ImageButton is the diagonal line.

The way I’m currently thinking about achieving this is determining which direction the mouse is moving in. For example, if both the X and Y directions of the mouse increase (with respect to the top left corner of the screen), a diagonal line would be drawn from its starting position to the position where the mouse movement ended (down and to the right). The same would apply to all respective scenarios. I’m thinking of this as four quadrants.

I’m currently experiencing difficulty maintaining the starting position form where the line was first drawn, some weird glitching that causes the direction of the line to change randomly, and the angle in which the line is drawn.

I have tried implementing my four quadrant method mentioned above but can’t seem to find the most optimal way to make it work.

It’s kind of difficult for me to explain exactly what I want the code to achieve as I only have two years of experience, but I’ll give it a shot. Here is the code I’m working with:

--arg4 is the X direction of the mouse. (mouse.X/board.AbsoluteSize.X)
--arg5 is the Y direction of the mouse. (mouse.Y/board.AbsoluteSize.Y)
--arg6 is the thickness of the line
--startLineDragX is the starting X position of where the line was being dragged from
--startLineDragY is the starting Y position of where the lines was being dragged from
local prevX = 0
local prevY = 0
if arg4 > prevX and arg5 == prevY then
	--this would result in a perfectly straight X line to the right
	prevX = arg4
	lineFrame.Size = UDim2.new(-(startLineDragX-arg4),0,arg6,0)
elseif arg4 < prevX and arg5 == prevY then
	--this would result in a perfectly straight X line to the left
	prevX = mouse.X/board.AbsoluteSize.X
	lineFrame.Size = UDim2.new((arg4-startLineDragX),0,arg6,0)
elseif arg4 > prevX and arg5 > prevY then
	prevX = arg4
	prevY = arg5
	lineFrame.Rotation = math.deg(arg5/arg4)
	lineFrame.Size = UDim2.new(-(startLineDragX-arg4),0,arg6,0)
elseif arg4 < prevX and arg5 < prevY then
	prevX = mouse.X/board.AbsoluteSize.X
	prevY = mouse.Y/board.AbsoluteSize.Y
	lineFrame.Rotation = math.deg(arg5/arg4)
	lineFrame.Size = UDim2.new(-(startLineDragX-arg4),0,arg6,0)
elseif arg4 > prevX and arg5 < prevY then
	prevX = arg4
	prevY = mouse.Y/board.AbsoluteSize.Y
	lineFrame.Rotation = math.deg(arg5/arg4)
	lineFrame.Size = UDim2.new(-(startLineDragX-arg4),0,arg6,0)
elseif arg4 < prevX and arg5 > prevY then
	prevX = mouse.X/board.AbsoluteSize.X
	prevY = arg5
	lineFrame.Rotation = math.deg(arg5/arg4)
	lineFrame.Size = UDim2.new(-(startLineDragX-arg4),0,arg6,0)
elseif arg5 > prevY and arg4 == prevX then
	--this would result in a perfectly straight Y line down
	prevY = arg5
	lineFrame.Size = UDim2.new(arg2,0,-(startLineDragY-arg5),0)
elseif arg5 < prevY and arg4 == prevX then
	--this would result in a perfectly straight Y line up
	prevY = mouse.Y/board.AbsoluteSize.Y
	lineFrame.Size = UDim2.new(arg2,0,(arg5-startLineDragY),0)
end

[Jaycbee05 (Jaycbee)]

there is alot going on in your code, but i’d suggest taking a look at this thread:

Drawing a path with Uis?

Greetings! Am currently looking for help with a project - I’m attempting to create a Ui with [9] individual boxes, the Player is able to select four of these boxes [MouseEnter] and upon selecting, it draws a ‘path’ or ‘line’ from the previous box to the next. [Mouse] I’ve attempted this and had no success. My attempts have included simply creating a new Instance from one UDIM2 to the next but has failed. Any ideas?

Example

local Mouse = game.Players.LocalPlayer:GetMouse()
local RunService = game:GetService("RunService")
local Frame = script.Parent
local CanDrawLine = false
local intial  = Vector2.new()



function MakePath( Line, a, b, Width )
	Line.AnchorPoint = Vector2.new(0.5, 0.5)
	Line.Size = UDim2.new(0, ((b.x - a.x) ^ 2 + (b.y - a.y) ^ 2) ^ 0.5,0, Width) 
	Line.Position = UDim2.new(0, (a.x + b.x) / 2, 0, (a.y + b.y) / 2) 
	Line.Rotation = math.atan2(b.y - a.y, b.x- a.x) * (180 / math.pi)
end



local function  FollowMouse(inital)
	local mousepos = Vector2.new(Mouse.X, Mouse.Y)
	MakePath(Frame,inital, mousepos, 100 )
end


Mouse.Button1Down:Connect(function()
	intial = Vector2.new(Mouse.X, Mouse.Y)
	CanDrawLine = true
end)


Mouse.Button1Up:Connect(function()
	local intial = Vector2.new(Mouse.X, Mouse.Y)
	CanDrawLine = false
end)



RunService.RenderStepped:Connect(function()
	 if CanDrawLine then
	FollowMouse(intial)
    end
end)

Your game looks pretty Interesting btw, I wonder what its about

[Chrythm]

So I may or may not have forgotten about AnchorPoints before attempting this and ended up flipping around with dug-up formulas from middle school, but I was able to replicate what the Jaycbee05 was referencing here:

local mouse = game.Players.LocalPlayer:GetMouse()
local drawing = false

function StartDrawingLine()
	local originX = mouse.X
	local originY = mouse.Y
	local newLine = Instance.new("Frame", script.Parent)
	newLine.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
	newLine.BorderSizePixel = 0
	newLine.AnchorPoint = Vector2.new(0.5, 0.5)
	local distance = 0
	repeat
		distance = math.sqrt(((mouse.X-originX)^2)+((mouse.Y-originY)^2))
		newLine.Size = UDim2.new(0, distance, 0, 3)
		newLine.Position = UDim2.new(0, originX+((mouse.X-originX)/2), 0, originY+((mouse.Y-originY)/2))
		newLine.Rotation = math.deg(math.atan((originY-mouse.Y)/(originX-mouse.X)))
		wait()
	until drawing == false
end

mouse.Button1Down:Connect(function()
	drawing = true
	StartDrawingLine()
end)

mouse.Button1Up:Connect(function()
	drawing = false
end)

In short, the StartDrawingLine function starts running when you click and stops when you… unclick.
It uses the good ol’ reliable distance formula as the pixel length of the line, and some trigonometry to find the correct angle to put the line at. As far as position goes, it just positions the line at the original click location and adds half of the distance from that point (on the x axis and y axis separately).
Feel free to question my questionable coding.

[LUCKY4291]

Thank you for your help! This was exactly what I was intending on doing Would 10/10 recommend.
Edit: Just got it fully implemented into the game using Scale instead of Offset and made it compatible with filtering enabled! Thanks!

[LUCKY4291]

I’m thinking about either making it a pictionary game or an art game where players can draw their own pictures and upload it to a database for a museum. Kind of like the Roblox library.