Autor Zpráva
janbarasek
Profil
Ahoj,
v mém matematickém vyhledávači jsem naprogramoval funkci na "chytré" ořezávání grafů, aby bylo vždy vidět jen to důležité. Graf vždy vygeneruji na serveru za pomoci PHP a dostanu vždy obrázek o stejné velikosti (aby se s tím na úrovni PHP pracovalo dobře) a jeho velikost (ořez) provádím až v prohlížeči. Otázky ohledně datové velikosti v tomto případě mohou jít stranou, protože kdybych to ořezával na serveru, tak se ušetří maximálně několik jednotek KB a bylo by to mnohem náročnější na naprogramování.

Pokud si nechám vykreslit nějakou funkci, která není příliš "vysoká" (myšleno height), tak se často nesprávně ořízne. Živý příklad zde:
www.mathematicator.cz/search.php?q=sinx%2Bcosx

V HTML používám k vykreslení tento kód (řádek 51):
<div style="width: 100%; height: 60px; background-image: url('img/soustava_souradnic.php?q=sin%28x%29%2Bcos%28x%29&z=20&r=17'); background-repeat: no-repeat; background-position: center center;"></div>
Poznámka: Pro zjednodušení uvádím styl přímo v HTML

Na příkladu si můžeme všimnout, že obrázek s grafem je dostupný na této URL:
http://mathematicator.cz/img/soustava_souradnic.php?q=sin%28x%29%2Bcos%28x%29&z=20&r=17

Přesně v jeho středu jsou vykresleny osy o šířce 1px (jejich rozměry můžeme zanedbat), šířka budoucího obrázku je dle mého měření správná a s minimální odchylkou (parametr height v CSS kódu). Pro ořez používám background-position, které tvrdí, že obrázek vycentruje na vertikální i horizontální střed, což se sice děje, ale s odchylkou.

Moje otázka zní: Jak se dá toto řešit? Pro mnoho případů se graf ořízne správně (resp. ta odchylka není zas tak moc vidět a dá se to vydržet), ale v některých případech se ořez provede zvláštně a nepřesně. Napadlo mě zvětšit parametr height o nějaké drobné číslo, ale zdá se mi to jako prasárna. Neexistuje náhodou nějaké lepší řešení, jak na úrovni CSS vytvořit výřez obrázku, pokud je šířka 100% a výška nějaké číslo? Btw, horní polovina grafu měří 320px, spodní 319px (ten 1px dělá ta osa, (asi) lze zanedbat).

Děkuji za jakékoli nápady.
habendorf
Profil
janbarasek:
Přesně v jeho středu jsou vykresleny osy o šířce 1px


Ale kdepak, nad osou máš 320px, pod osou 329px, proto se ti logicky shora ořízne.
janbarasek
Profil
habendorf:
Oh, díky! Takhle brutální fail bych jako začínající profesionál asi udělat neměl. Já měl pořád za to, že se u toho pozadí počítá i nějaký margin a proto je to odsazené a ono to je kvůli obrázku.

Vyřešil jsem to zmenšením velikosti obrázku - výšku jsem snížil o 10px, takže jsou nyní obě poloviny grafu stejně vysoké (resp. jedna je o pixel menší, kvůli dělící čáře, ale 1px lze v takto velkém prostoru zanedbat).

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: