Jak vypočítat rozsah v pixelech mezi jednotlivými sloupci dle šířky okna a velikosti textu?

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Uživatelský avatar
strangereu
Level 4.5
Level 4.5
Příspěvky: 1636
Registrován: září 11
Bydliště: Birmingham, United Kingdom
Pohlaví: Muž

Jak vypočítat rozsah v pixelech mezi jednotlivými sloupci dle šířky okna a velikosti textu?

Příspěvekod strangereu » 18 pro 2018 21:32

Ahoj... od včera tady řeším matematický problém, který mi vůbec nedává spát a vůbec netuším, jak bych mohl dosáhnout správného výpočtu...

Řekněme, že máme tabulku o textech "ID, Jméno, Body, Peníze, Stát, FPS, Ping" a známe šířku okna, která je skrytá pod variable "rWidth", která je dána v pixelech, takže musíme počítat s hodnotou rWidth, která nám určuje v jakém rozsahu je možné text umístit, aby nebylo mimo daný objekt. Dále známe délku textu pro jednotlivé slovo, která je pod variable "fWidth"... Známe také celkový počet textových hodnot v tabulce pod klíčem "v".

Jak bychom tedy mohli dosáhnout toho, že na základě celkového počtu slov, šířky okna a délky textu zjistíme pozice pro jednotlivá slova, aby mezery mezi nimi byly velké na základě počtu slov, celkové šířky okna a délky textu... Protože, pokud například přidáme jedno slovo, tak se zmenší prostor pro text a mezery mezi slovy budou muset být menší...

Dále by texty měly začínat 10px od levého okraje a končit 10px před pravým okrajem.

Mohl by mi tu s tím někdo poradit, prosím?


Back-end webdeveloper

Reklama
petr22
Guru Level 15
Guru Level 15
Příspěvky: 39145
Registrován: únor 12
Pohlaví: Muž

Re: Jak vypočítat rozsah v pixelech mezi jednotlivými sloupci dle šířky okna a velikosti textu?

Příspěvekod petr22 » 18 pro 2018 21:58

Zadani nedava smysl - pixel nema danou velikost, tudiz pouzit pixel jako jednotku delky
neni dobry napad.

Standardni monitory pouzivaji 96 dpi, tiskarny 150, 300, 600, 1200 a vice dpi, monitory
s vyssim rozlisenim zase maji vetsi hustotu nez 96 dpi.

Tudiz "10 pixelu" bude pokazde nekde jinde a na kazdem monitoru to bude vypadat jinak
a jinak to bude vypadat i pri tisku.

Vzdalenosti je nutne vzdy pocitat a zadavat v milimetrech s tim, ze na dpi a pixely se to prepocita
automaticky podle parametru daneho monitoru, tiskarny a zvoleneho rozmeru v mm.

Rozmery textu bych nechal na automatice html editoru a stylech s tim, ze to nelze nastavit
natvrdo, ale musi se to dynamicky samo menit podle rozliseni a dpi monitoru.

Jestli chces videt primo html kod, udelej tabulku v Excelu nebo Libre Office a uloz ji jako html,
ale na 4K 14" nebo mensim monitoru notebooku bude treba mikroskop.

kanoe222
Level 2
Level 2
Příspěvky: 163
Registrován: červenec 18
Pohlaví: Nespecifikováno

Re: Jak vypočítat rozsah v pixelech mezi jednotlivými sloupci dle šířky okna a velikosti textu?

Příspěvekod kanoe222 » 18 pro 2018 22:07

vzorec by mohol vyzerat takto, pravdaze za podmienky ze sirka stlpcov pre jednotlive slova je rovnaka pre vsetky stlpce.
vysledok1 = rWidth - (v * fWidth)
medzera = vysledok1 / (v + 1)

Tymto ziskas aj medzeru na zaciatku riadku aj na jeho konci.

Testovaci vypocet, pre rWidth 1000, fWidth 200 a pocet slov 2
vysledok1 = 1000 - (2*200) = 600
medzera = 600 / (2+1) = 200
Kontrola = medzera stlpec medzera stlpec medzera
Kontrola = 200 + 200 + 200 + 200 + 200 = 1000

testovaci vypocet2, pre rWidth 1000, fWidth 200 a pocet slov 4
vysledok1 = 1000 - (4*200) = 200
medzera = 200 / (4+1) = 40
Kontrola = medzera stlpec medzera stlpec medzera stlpec medzera stlpec medzera
Kontrola = 40 + 200 + 40 + 200 + 40 + 200 + 40 + 200 + 40 = 1000

EDIT:
keby som ja tak najskor docital prispevok do konca

tak edit vzorcov kedze mas zadany ofset na zaciatku a na konci
vysledok1 = rWidth - 10 - 10
vysledok1 = vysledok1 - (v * fWidth)
medzera = vysledok1 / (v - 1)
Robit ti kontrolne vypocty, som uz lenivy :)
Naposledy upravil(a) kanoe222 dne 18 pro 2018 22:17, celkem upraveno 3 x.

Uživatelský avatar
strangereu
Level 4.5
Level 4.5
Příspěvky: 1636
Registrován: září 11
Bydliště: Birmingham, United Kingdom
Pohlaví: Muž

Re: Jak vypočítat rozsah v pixelech mezi jednotlivými sloupci dle šířky okna a velikosti textu?

Příspěvekod strangereu » 18 pro 2018 22:12

To petr:

No bohužel se nejedná o html, ale o lua ve spolupráci s directX kreslením... Což jsem ovšem neviděl jako podstatnou informaci...

Níže ještě přikládám nástřel mého kódu, který je opravdu počítán relativně vzhledem k rozlišení různých uživatelů.

Kód: Vybrat vše

lang = "CZ";
local sWidth, sHeight = guiGetScreenSize();
local rWidth, rHeight = sWidth/2, sHeight/2.5;

addEventHandler("onClientResourceStart", getRootElement(),
function ()
   scoreboardRender = dxCreateRenderTarget(rWidth, rHeight, true)
   openSans = dxCreateFont("fonts/opensans.ttf")
   openSansBold = dxCreateFont("fonts/opensansbold.ttf")
end
)

addEventHandler("onClientRender", getRootElement(),
function ()
   if scoreboardRender then
      dxSetRenderTarget(scoreboardRender)
      init()
      dxSetRenderTarget()
      
      dxDrawImage(sWidth/2-rWidth/2, sHeight/2.5-rHeight/2, rWidth, rHeight, scoreboardRender, 0, 0, 0, tocolor(255, 255, 255, 255), true)
   end
end
)

function init()
   local headerHeight = 40;
   local titleRowHeight = 30;
   local roomRowHeight = 20;
   
   local x = 10;

   dxDrawRectangle(0, 0, rWidth, headerHeight, tocolor(192, 57, 43, 255))
   
   -- draw servername
   dxDrawText(serverName, 10, math.floor(headerHeight/2-dxGetFontHeight((rWidth/headerHeight)*0.055/2)), 0, 0, tocolor(255, 255, 255, 255), (rWidth/headerHeight)*0.055, openSansBold)
   
   -- draw playercount
   dxDrawText(playerCount, math.floor(rWidth-dxGetTextWidth(playerCount)-dxGetFontHeight((rWidth/headerHeight)*0.05)-10), math.floor(headerHeight/2-dxGetFontHeight((rWidth/headerHeight)*0.055/2)), 0, 0, tocolor(255, 255, 255, 255), (rWidth/headerHeight)*0.055, openSansBold)

   dxDrawRectangle(0, headerHeight, rWidth, titleRowHeight, tocolor(0, 0, 0, 200))   
   for i, v in ipairs(columns) do
      dxDrawText(v, x, math.floor(headerHeight+titleRowHeight/2-dxGetFontHeight((rWidth/titleRowHeight)*0.035/2)), 0, 0, tocolor(255, 255, 255, 255), (rWidth/titleRowHeight)*0.035, openSans)
      x = x+(dxGetTextWidth(v)+20)
   end
end



Konkrétně otázka pojednává o poslední části kódu od dxDrawRectange(0, headerHeight... až po předposlední end.

Všechny hodnoty jsou tedy počítány pomocí pixelů, ale přes matematické vzorce, aby vše vypadalo stejně nehledě na rozlišení koncového uživatele. Třeba zarovnání textu vertikálně na střed obdélníku počítám pomocí vzorce, který dělá konkrétně toto:
výška předcházejícího obdélníku pro nastavení nulové pozice pro další obdélník + výška obdélníku ve kterém by měl být text vertikálně umístěn / 2, aby došlo k vypočtení středu obdélníku - výška textu (šířka okna / výška obdélníku kvůli poměru stran fontu) * 0.035 což je velikost textu jako takového a /2 pro získání středu výšky textu...

Podobným způsobem bych potřeboval zjistit právě mezery mezi jednotlivými texty na základě rWidth (px), fWidth(px), počet slov

rWidth = šířka okna
fWidth = délka textu nebo také dxGetFontWidth
počet slov = klíč "v" z smyčky uvedené na konci kódu.
Back-end webdeveloper

petr22
Guru Level 15
Guru Level 15
Příspěvky: 39145
Registrován: únor 12
Pohlaví: Muž

Re: Jak vypočítat rozsah v pixelech mezi jednotlivými sloupci dle šířky okna a velikosti textu?

Příspěvekod petr22 » 18 pro 2018 22:16

Krome rozliseni je treba pocitat s dpi monitoru.

Jestli ma monitor vice nez 96 dpi, mel by byt rozmer v pixelech vetsi aby se kompenzovala
mensi fyzicka velikost pixelu.

https://www.sven.de/dpi/

Na tech noteboocich co jsem zminoval vyse je pismo velikosti 7 a 8 temer necitelne jak je male.

Tedy velikost okna bude spravne treba 3800 pixelu na sirku, ale pismo budou necitelne blechy.

Prave proto aby to vypadalo vsude stejne by se nemela pouzivat jednotka s promenlivou velikosti
jako je pixel.

Matematicky by to melo jit v realnem case pocitat z rozliseni monitoru a jeho uhlopricky, tyto udaje
lze obvykle vytahnout pres WMI, vypocitat fyzicikou velikost pixelu a podle ni zvolit velikost v pixelech.

V kazdem pripade bych vysledek otestoval na notebooku, tabletu a telefonu s malym displejem co
ma vysoke rozliseni.

Uživatelský avatar
strangereu
Level 4.5
Level 4.5
Příspěvky: 1636
Registrován: září 11
Bydliště: Birmingham, United Kingdom
Pohlaví: Muž

Re: Jak vypočítat rozsah v pixelech mezi jednotlivými sloupci dle šířky okna a velikosti textu?

Příspěvekod strangereu » 18 pro 2018 22:48

To petr:
Jedná se o zastaralou hru GTA:San Andreas (MTA:SA), nehrozí tedy, že by to uživatel hrál na vyšším rozlišení než je fullHD.

Nicméně se mi s pomocí kanoeho vzorce podařilo dosáhnout téměř uspokojujícího výsledku i přesto, že to ještě není úplně dokonalé... Uvědomil jsem si zároveň takovou věc, že když počítáme na ose x a jako první uvádíme rWidth, tak tím vyjedeme z osy x neboť rWidth je její maximální hodnota, tudíž po použití rWidth se dostaneme přes za její konec. Zkusil jsem to tedy obráceně a počítal od 10, což je hodnota od které by se měly všechny texty zapisovat...

x = x + dxGetTextWidth(v) + (rWidth / 8)

Udělal jsem tedy to, že x = x + délka textu.
Tím jsem zajistil to, že se mi všechny texty seřadily hezky za své konce a řekl jsem si, že kdybych teď k tomu celému přičetl délku celého obdélníku a vydělil jí počtem jednotlivých slov, tak bych získal ještě jako bonus mezery... Ale vloudila se taková menší chybička... Textů uvedených v array je celkem 7, nechápu tedy proč je nutné použít pro dělení číslici 8, ještě k tomu, když programovací jazyky počítají od 0, tedy správné číslo by mělo být 6, ale jakmile bych použil číslo nižší, tak už bych viděl třeba jen půl poslední slova nebo bych viděl slovo předposlední a poslední už by bylo mimo...

columns = {"ID", "Name", "Points", "Cash", "Country", "FPS", "Ping"}

Dále bude nutné vypočítat nějak ten offset... Viděl jsem někde na internetu výpočty offsetu pomocí podmínek, ale nevím přesně jak to fungovalo...

Náhled aktuálního stavu:
scrbrd.png


E:
Upraveno na
x = x + dxGetTextWidth(v) + (rWidth / table.getn(columns))

table.getn(columns) automaticky získává číselný rozsah arraye... Tedy, pokud je v tabulce 7 textů, tak odpověď funkce table.getn je opravdu 7. Ale jakmile rWidth dělím počtem textů, tak poslední slovo je již mimo obraz.
Nemáte oprávnění prohlížet přiložené soubory.
Back-end webdeveloper


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • Znám výšku a šířku v pixelech, nevím vhodný poměr stran
    od postcd » 15 led 2019 18:00 » v Multimédia (filmy, hudba, CDs/DVDs)
    6
    852
    od petr22
    16 led 2019 16:51
  • Pascal - jak vypočítat řadu při diferenciaci
    od Pelda01 » 04 pro 2018 14:50 » v Programování a tvorba webu
    5
    834
    od faraon
    04 pro 2018 20:05
  • Rozsah vnitrni site
    od shockwave » 01 led 2019 12:49 » v Sítě - hardware
    4
    650
    od ITCrowd
    01 led 2019 19:49
  • [Excel] Poměr obsahů buněk v jednom sloupci
    od driticool » 22 úno 2019 22:59 » v Kancelářské balíky
    2
    509
    od driticool
    23 úno 2019 10:46
  • Excel - doplnění hodnot ve sloupci dle hodnoty z rozbalovacího seznamu
    od xtron » 27 zář 2019 02:38 » v Kancelářské balíky
    5
    455
    od xtron
    03 říj 2019 17:45

Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: CommonCrawl [Bot] a 2 hosti