Centrado de rectángulo/imagen DX

[aka Blue]

Buenas. Desde hace mucho tiempo llevo usando mi método para el dibujado de ventanas/imágenes/textos y líneas DX. Quisiera saber si hay alguna forma de centrarlo, ya sea multiplicando o dividiendo por algún número ya que, manual lleva un tiempo y no siempre queda correctamente.

Este es el método que uso:

local sx, sy = guiGetScreenSize( )
local sourceX, sourceY = 1336, 768

dxDrawRectangle( sx*( 20/sourceY ), sy*( 200/sourceY ), sx*( 150/sourceX ), sy*( 200/sourceY ), tocolor( ... ) )

 

[Rose]

 

local screenWidth, screenHeight = guiGetScreenSize( )
width = 400
height = 420


function ctrl_dx()
	dxDrawRectangle( (screenWidth / 2)-(width/2), (screenHeight / 2)-(height/2), width, height, tocolor(57, 57, 57, 255), false)
	dxDrawRectangle( (screenWidth / 2)-(width/2), (screenHeight / 2)-(height/2), width, height, tocolor(254, 254, 254, 254), false)
end
addEventHandler("onClientRender", root, ctrl_dx) 

Yo para centrar un dx uso eso, lo ví en un script hace tiempo y me ha funcionado bien(creo que también sirve para posicionar un dx en cualquier parte de la pantalla).

Edited May 2, 2017 by Hit+

[aka Blue]

@Hit+ Gracias pero el tema está en que yo quiero utilizar los algoritmos que he usado hasta ahora. El problema si no me equivoco del tuyo es que no se adapta a todas las resoluciones y eso es un problema  

[TRtam]

Pues puedes hacerlo así:
 

local sX, sY = guiGetScreenSize()
local width, height = sX*(150/1336), sY*(200/768)

dxDrawRectangle(sX/2-width/2, sY/2-height/2, width, height, tocolor(...))

 

[aka Blue]

@saygoodbye Gracias, me ha servido! El problema es que no se coloca exactamente en el centro pero igualmente, gracias por tu ayuda, me ayudará a crear paneles con más rapidez.

[Simple0x47]

On 2017-5-2 at 17:32, Hit+ said:

 

local screenWidth, screenHeight = guiGetScreenSize( )
width = 400
height = 420


function ctrl_dx()
	dxDrawRectangle( (screenWidth / 2)-(width/2), (screenHeight / 2)-(height/2), width, height, tocolor(57, 57, 57, 255), false)
	dxDrawRectangle( (screenWidth / 2)-(width/2), (screenHeight / 2)-(height/2), width, height, tocolor(254, 254, 254, 254), false)
end
addEventHandler("onClientRender", root, ctrl_dx) 

Yo para centrar un dx uso eso, lo ví en un script hace tiempo y me ha funcionado bien(creo que también sirve para posicionar un dx en cualquier parte de la pantalla).

Versión adaptable:

local screenWidth, screenHeight = guiGetScreenSize( )
width = 400 / 1336
height = 420 / 768


function ctrl_dx()
	dxDrawRectangle( (screenWidth - ( width * screenWidth ) ) / 2, (screenWidth - ( height * screenHeight ) ) / 2, width * screenWidth, height * screenHeight, tocolor(57, 57, 57, 255), false)
	dxDrawRectangle( (screenWidth - ( width * screenWidth ) ) / 2, (screenWidth - ( height * screenHeight ) ) / 2, width * screenWidth, height * screenHeight, tocolor(254, 254, 254, 255), false)
end
addEventHandler("onClientRender", root, ctrl_dx) 

 

[Arsilex]

yo nose vosotros pero a mi parecer ese metodo de hacer el diseño en una resolucion y pasarlo a otra... creo que es mucho mejor usando porcentajes...

local sX, sY = guiGetScreenSize( )

function ctrl_dx()
	dxDrawRectangle( (sX * 0.5) - (sX * 0.15), (sY * 0.5) - (sY * 0.2), sX * 0.3, sY * 0.4, tocolor(57, 57, 57, 255), false)
	dxDrawRectangle( (sX * 0.5) - (sX * 0.15), (sY * 0.5) - (sY * 0.2), sX * 0.3, sY * 0.4, tocolor(254, 254, 254, 255), false)
end
addEventHandler("onClientRender", root, ctrl_dx) 

 

También esta la opción de hacer tus diseños sin cambiar el tamaño de ellos manteniendolos eso si al tener menor resolucion la gente pues vera el rectangulo mas grande ya que ocupara una X parte de la pantalla mas que en una resolucion mayor como puede ser 1920x1080

 

local sX, sY = guiGetScreenSize()
local w, h = 350, 400
local x, y = sX * 0.5 - w * 0.5, sY * 0.5 - h * 0.5

function ctrl_dx()
	dxDrawRectangle( x, y, w, h, tocolor(57, 57, 57, 255), false)
end
addEventHandler("onClientRender", root, ctrl_dx)

 

Defino el x y para si quiero dibujar algo dentro lo único que tengo que hacer es x + 10 y + 32 y ya puedo dibujar de una manera mas fácil a lo renderTarget

Así es como mas o menos hago yo en los paneles y pienso que la primera forma es mas adaptable es a lo paginas web. Ya decide tu cual para ti es mejor.

PD: esto no solo va dirigido a centrar ventana si no que también hacerla adaptable a todas las resolución de una forma a mi parecer correcta.

Edited May 5, 2017 by Arsilex

[MisterQuestions]

Una solución mejor sería una variable para la escala, no crees?

En ese caso algo como:

local screenX, screenY = guiGetScreenSize()
local screenScale = screenY / 768

Así despues cualquier tamaño o posición lo podrás poner conforme a la escala esa, como ejemplo:

local posX = 512 * screenScale
local posY = 200 * screenScale

Aunque claro es solo una manera muy básica.

Edited May 15, 2017 by XeroxMTA

[aka Blue]

@XeroxMTA Eso se adaptaría a todas las resoluciones?

[MisterQuestions]

On 2017-5-16 at 01:16, aka Blue said:

@XeroxMTA Eso se adaptaría a todas las resoluciones?

Pues sería una solución muy básica, pero si.

[Bc#]

Tal vez esto te sirva

local x, y = guiGetScreenSize ()

local ini = 0


function ancho()
if x <= 800 then
return 0.3
elseif x <= 1024 then
return 0.45
elseif x <= 1280 then
return 0.4
elseif x <= 1366 then
return 0.45
else
return 0.45
end
end

function alto()
if y <= 600 then
return 0.55
elseif y <= 720 then
return 0.75
elseif y <= 768 then
return 0.8
else
return 0.6
end
end

function possX()
if x <= 800 then
return 0.95
elseif x <= 1024 then
return 1.18
elseif x <= 1280 then
return 1.57
elseif x <= 1360 then
return 1.65
elseif x <= 1366 then
return 1.65
else
return 1.6
end
end

function possY()
if y <= 600 then
return 0.65
elseif y <= 720 then
return 0.75
elseif y <= 768 then
return 0.8
else
return 0.4
end
end

scaleX = ancho()
scaleY = alto()

possX = possX()
possY = possY()

imgX, imgY = 400*scaleX, 200*scaleY

posX, posY = 360*possX, 380*possY

 

[MisterQuestions]

On 2017-5-21 at 00:58, Bc# said:

Tal vez esto te sirva

local x, y = guiGetScreenSize ()

local ini = 0


function ancho()
if x <= 800 then
return 0.3
elseif x <= 1024 then
return 0.45
elseif x <= 1280 then
return 0.4
elseif x <= 1366 then
return 0.45
else
return 0.45
end
end

function alto()
if y <= 600 then
return 0.55
elseif y <= 720 then
return 0.75
elseif y <= 768 then
return 0.8
else
return 0.6
end
end

function possX()
if x <= 800 then
return 0.95
elseif x <= 1024 then
return 1.18
elseif x <= 1280 then
return 1.57
elseif x <= 1360 then
return 1.65
elseif x <= 1366 then
return 1.65
else
return 1.6
end
end

function possY()
if y <= 600 then
return 0.65
elseif y <= 720 then
return 0.75
elseif y <= 768 then
return 0.8
else
return 0.4
end
end

scaleX = ancho()
scaleY = alto()

possX = possX()
possY = possY()

imgX, imgY = 400*scaleX, 200*scaleY

posX, posY = 360*possX, 380*possY

 

Eso es una solución peor a la que le di

En todo caso sería más fácil realizar un math.min & math.max en cuanto a la escala.

[Bc#]

Que sea mas larga no implica que sea menos efectiva, de hecho acá se abordan mas casos posibles. Si te das cuenta, las resoluciones muchas veces no son equivalentes. Esto soluciona un poco eso. Concedo que este codigo es un poco viejo, pero si lo pienso, se puede hacer mas ordenado con tablas.