dxGetTextWidth and text positioning problem

[Dzsozi (h03)]

Hello!

I would like to make dxDrawTexts draw after each other with a little offset between them, like a horizontal menu thing. But I keep failing, I have been trying to solve this for hours now but I can't get the result I want. What am I doing wrong?

local defaultButtonColor = tocolor(180,180,180,255)

local normal = dxCreateFont("files/fonts/normal.ttf", 24, true, "antialiased")
local buttonSize = 0.5
local marginOffset = 10

local menuButtons = {
	{"SADSADASWQETSADASG", defaultButtonColor, hover = false},
	{"QRWRQW", defaultButtonColor, hover = false},
	{"GDADSSASDFSASD", defaultButtonColor, hover = false},
	{"FHDJRSDAD", defaultButtonColor, hover = false},
}

function draw()
  for i=1, #menuButtons do
      if menuButtons[i] then
          local menuButtonTextWidth = dxGetTextWidth(menuButtons[i][1], buttonSize, normal)
          local menuButtonTextHeight = dxGetRealFontHeight(normal)

          local step = 50 + ((i - 1) * (menuButtonTextWidth + marginOffset)) -- problem is probably here somewhere, I guess

          dxDrawText(menuButtons[i][1], step, 400, 0, 0, menuButtons[i].hover and tocolor(255,255,255,255) or menuButtons[i][2], buttonSize, normal, "left", "top", false, false)
      end
  end
end
addEventHandler("onClientRender", root, draw)

For some reason, this is the result I get:

And this is what I would like to have:

What is the problem, how should I do it?

[idarrr]

-- render

local nextOffset = 0

for i, v in pairs(menu) do
	local textwidth -- get your text width
	local textheight -- get your text height here
	local posX = nextOffset
	local posY -- your Y position
	local endX = posX + textwidth
	local endY = posY + textheight

	-- draw it
	dxDrawText(v.name, posX, posY, endX, endY, ...) -- your next argument bla, bla, bla
	
	-- set the next offset
	nextOffset = nextOffset + textwidth
end

Something like this may work. And also argument 5 and argument 6 should not be 0 value, because you also set the alignment for the text.

See: dxDrawText

Quote

Optional Arguments

• right: the absolute X coordinate of the right side of the text bounding box. Used for text aligning, clipping and word breaking.
• bottom: the absolute Y coordinate of the bottom side of the text bounding box. Used for text aligning, clipping and word breaking.

 

[Dzsozi (h03)]

It works, thank you so much!  I didn't even think about this kind of solution. Thanks again!

[idarrr]

1 minute ago, Dzsozi (h03) said:

It works, thank you so much!  I didn't even think about this kind of solution. Thanks again!

Np mate, good luck