Dx Drawing

[Josmis]

Can someone give me a FULL explain of Absolute and Relative coordinates?

I wante make a gui whit Dx Functions, and i need a FULL and a DETAILED explain about them.

Thanks!

[iMr.3a[Z]eF]

https://community.multitheftauto.com/ind ... ls&id=2136

[Josmis]

Why you linked me this? .-.

[iMr.3a[Z]eF]

Because this is the official dx window resourece and exported functions.

And this is exactly what do you want as long as i know.

And check of the pictures of the resource, it's all dx.

[Josmis]

I don't want it...

Anyway, can you help me here?

So, i have 5 texts to draw and for now this is what i've done:

http://imageshack.us/photo/my-images/849/xmhl.png

using this code:

local screenX,screenY = guiGetScreenSize() 
  
local widthRec = screenX 
local heightRec = 0 
local startXrec = 0 
local startYrec = screenY 
local alpha = 0 
local offsetY = 90 
local offsetX = 90 
local startXlbl = 0 
local startYlbl = screenY 
  
local statsLabelDatas = {text = "#236B8E[#FFFFFFStats#236B8E]", x = startXlbl, y = startYlbl} 
local shoponeLabelDatas = {text = "#236B8E[#FFFFFFShop #D9D919##FFFFFF1#236B8E]", x = startXlbl, y = startYlbl} 
local shoptwoLabelDatas = {text = "#236B8E[#FFFFFFShop #D9D919##FFFFFF2#236B8E]", x = startXlbl, y = startYlbl} 
local rankingLabelDatas = {text = "#236B8E[#FFFFFFRanking#236B8E]", x = startXlbl, y = startYlbl} 
local settingLabelDatas = {text = "#236B8E[#FFFFFFSettings#236B8E]", x = startXlbl, y = startYlbl} 
  
function fadeInGui() 
    heightRec = heightRec - 2 
    alpha = alpha + 7 
    if offsetY >= 25 then 
        offsetY = offsetY - 2 
        offsetX = offsetX - 2 
    end 
end 
  
function fadeOutGui() 
    heightRec = heightRec + 2 
    alpha = alpha - 7 
    if offsetY <= 90 then 
        offsetY = offsetY + 2 
        offsetX = offsetX + 2 
    end 
end 
  
function drawDxGuiBase() 
    dxDrawRectangle(startXrec, startYrec, widthRec, heightRec ,tocolor(0,0,0, alpha), false) 
     
    local items = {statsLabelDatas, shoponeLabelDatas, shoptwoLabelDatas, rankingLabelDatas, settingLabelDatas} 
    local offset = ((screenX-offsetX) / tonumber(#items)) 
  
    for i=1, #items do 
        if i == #items then 
            dxDrawText ( items[i].text:gsub('#%x%x%x%x%x%x', '') , items[i].x + (offset*i) + 1, items[i].y - offsetY + 1, items[i].x + (offset*i) + 1, items[i].y - offsetY + 1, tocolor(0,0,0, alpha), 1.01, "bankgothic", "center", "center", false, false, false, true) 
            dxDrawText ( items[i].text , items[i].x + (offset*i), items[i].y - offsetY, items[i].x + (offset*i), items[i].y - offsetY, tocolor(0,0,0, alpha), 1, "bankgothic", "center", "center", false, false, false, true) 
        else 
            offset = offset - string.len(items[i+1].text:gsub('#%x%x%x%x%x%x', '')) 
            dxDrawText ( items[i].text:gsub('#%x%x%x%x%x%x', '') , items[i].x + (offset*i) + 1, items[i].y - offsetY + 1, items[i].x + (offset*i) + 1, items[i].y - offsetY + 1, tocolor(0,0,0, alpha), 1.01, "bankgothic", "center", "center", false, false, false, true) 
            dxDrawText ( items[i].text , items[i].x + (offset*i), items[i].y - offsetY, items[i].x + (offset*i), items[i].y - offsetY, tocolor(0,0,0, alpha), 1, "bankgothic", "center", "center", false, false, false, true) 
        end 
    end 

But as you can see, in the image the texts are not distributed in all rectangle uniformly, can you help me?

[iMr.3a[Z]eF]

https://community.multitheftauto.com/index.php?p=resources&s=details&id=2136

But this resource is exactly as GUIEditor.

[Josmis]

I don't care about this resource, i wont use it, can you help me whit my code?

[iMr.3a[Z]eF]

What's debug says?.

[Josmis]

Did you read my post? .-.

[50p]

@Josmis,

To get the text located uniformly, you need to divide the width of the screen by the number of items, this will give you center of each item. Then you need to negatively offset by half the width of the text so that text is placed in the middle of the center point.

local distanceBetweenItems = screenX / #items; 
  
for i, item in ipairs( items ) do 
    local midPoint = i * distanceBetweenItems; -- center point of the current item 
    local textWidth = dxGetTextWidth( item.text:gsub('#%x%x%x%x%x%x', ''), 1, "bankgothic" ); -- get the text width without colour coding 
    local textHeight = dxGetFontHeight( 1, "bankgothic" ); 
    local midPointOffsetX = midPoint - textWidth/2; -- make sure the negative X offset will be half the width of text 
    dxDrawText( item.text, midPointOffsetX, screenY - 90, textWidth, textHeight, tocolor(0,0,0, alpha), 1, "bankgothic", "center", "center", false, false, false, true); 
end 

If that won't work, play with "right" and "bottom" coords. They have always confused me!

(Defaults are: right=left, bottom=top... what if left and top are both 0 ==> top left of the screen? will that make width and height (right and bottom) of 0 too? so confusing )

[IIYAMA]

dxDrawText( item.text, midPointOffsetX, screenY - 90, textWidth, textHeight, tocolor(0,0,0, alpha), 1, "bankgothic", "center", "center", false, false, false, true)

These aren't offset, but positions.

[50p]

dxDrawText( item.text, midPointOffsetX, screenY - 90, textWidth, textHeight, tocolor(0,0,0, alpha), 1, "bankgothic", "center", "center", false, false, false, true)

These aren't offset, but positions.

For me, rectangles are 2 sets of coords, Position (x and y) and its Size (width and height). It doesn't make sense to have the size same as position (by default: x==width, y==height).

[IIYAMA]

Required Arguments

• text: the text to draw
  left: the absolute X coordinate of the top left corner of the text
  top: the absolute Y coordinate of the top left corner of the text

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.

You are absolute right about rectangles.

But is it a rectangles or a bounding box for text?

[50p]

...

You are absolute right about rectangles.

But is it a rectangles or a bounding box for text?

According to DirectX documentation, yes, it's rectangle. Bounding box is exactly the same as rectangle.

[Josmis]

@50p

Thanks! Finally a detalied explain! Thanks!

EDIT:

It doesn't work!

http://imageshack.us/photo/my-images/856/825n.png/

[50p]

Just like I said, the rectangle coords are weird.

Try this:

local distanceBetweenItems = screenX / #items; 
  
for i, item in ipairs( items ) do 
    local midPoint = i * distanceBetweenItems; -- center point of the current item 
    local textWidth = dxGetTextWidth( item.text:gsub('#%x%x%x%x%x%x', ''), 1, "bankgothic" ); -- get the text width without colour coding 
    local textHeight = dxGetFontHeight( 1, "bankgothic" ); 
    local left = midPoint - textWidth/2; -- make sure the negative X offset will be half the width of text 
    local top = screenY - textHeight + 10; 
    dxDrawText( item.text, left, top, left + textWidth, top + textHeight, tocolor(0,0,0, alpha), 1, "bankgothic", "center", "center", false, false, false, true); 
end 

[Josmis]

It wont work!

I tryed this code and it works:

local distanceBetweenItems = screenX / #items; 
      
    for i, item in ipairs( items ) do 
        local midPoint = i * distanceBetweenItems; -- center point of the current item 
        local textWidth = dxGetTextWidth( item.text:gsub('#%x%x%x%x%x%x', ''), 1, "bankgothic" ); -- get the text width without colour coding 
        local textHeight = dxGetFontHeight( 1, "bankgothic" ); 
        local left = midPoint - textWidth/2; -- make sure the negative X offset will be half the width of text 
        local top = screenY - textHeight - 15; 
        dxDrawText( item.text, left, top, left - textWidth, top + textHeight, tocolor(0,0,0, alpha), 1, "bankgothic", "center", "center", false, false, false, true); 
    end 

But it work just for 1280x720!