Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wysokość Diva - Zdjecie DIVa -> GD
Forum PHP.pl > Forum > PHP
k0b3
Witam

Nie chciałem odkopywać tak starego wątka jakim jest: http://forum.php.pl/index.php?showtopic=60602, dlatego pisze od początku.

Bardzo mi zależny na wysokości diva/ilości linijek w nim. Pomysł ze zdjęciem w załączonym temacie wydaje mi się bardzo racjonalne.
Stronę robię w Ajaxie, jednak chce, aby była w pełni funkcjonalna podczas gdy ktoś sobie wyłączy obsługę JavaScript, stąd takie kombinowanie ;-)

Teraz pytanie apropo zdjęcia. Jak to wykonać zdjęcie z samego html uzywając GD?.
Zawartość Diva mam np taką:
  1. <div id="news">
  2. <div id="data">
  3. 1 styczeń 1970
  4. </div>
  5. <div id="tresc">
  6. sadasdsadsasdasdsa rutrum lectus non lect<br />
  7. us mattis a rhoncus lectus congue.ectus congue.Integer rutrum lectu<br />
  8. s non lectus mattis a rhoncus
  9. <a href="index.php?p=news&act=view&id=1" class="wiecej">czytaj wiecej...</a>
  10. </div>
  11. </div>


czy korzystanie z tej metody za pomocą biblioteki GD nie będzie obciążalo zbytnio serwera?
fander
Kod
<?php count(explode("<br", $text)); ?>

z tym że jeśli diva masz szerokiego na np 500 px a text w nim wyświetlany jest pisany ciągiem bez znaczników <br> to nic takie zliczanie nie daje. Najlepiej gdybyś liczył ilość znaków w tekście (nie licząc białych znaków) i przyjął jakąś liczbę jako ilość znaków w lini. Z biblioteką GD nie wiem jak to zrobić.
k0b3
Cytat(fander @ 3.07.2009, 10:57:44 ) *
Najlepiej gdybyś liczył ilość znaków w tekście (nie licząc białych znaków) i przyjął jakąś liczbę jako ilość znaków w lini.


Z tej metody korzystałem nawet we flashu! Jest zbyt naiwna. Teoretycznie wszystko pięknie, jednak są różnice szerokości liter!

iiiiiiiiii - 10 liter
OOOOOOOOOO - 10 liter

Szukam czegoś nie zawodnego.
fander
w takim razie zrób sobie tablice ze znakami i odpowiadającymi im szerokościami w px następnie podziel tekst znając znaczniki które tworzą nową linie (<br>,<p><h1><h2><h3>...). Wylicz sobie ile zajmą odpowiednie słowa + spacje + znaki w podzielonych fragmentach tekstu. podziel to przez szerokość diva i sumuj.
Nie widzę rozwiązania w gd bo i tak musiałbyś dla każdej literki tworzyć nowy obrazek i sprawdzać czy czasem literka czy słowo nie wychodzi za obrazek. Generowanie 1000 takich obrazków na pewno nie sprzyja szybkiemu wykonaniu skryptu.
maly_swd
http://pl.php.net/manual/pl/function.imagettfbbox.php a wyliczac z tego?
k0b3
To nei ma sensu.. Nie ma czegokolwiek normalniejszego, przecież to PHP->C++?
Może powinienem zaczać od tego do czego jest mi potrzebne takie rozwiązanie.
Napisałem sobie korzystając ze Smarty system newsów. Newsy wyświetlane są w ograniczonym wymiarowo divie. Oczywiście z szerokości tekst jest zawijany, jednak gdy newsów jest np 10 o różnej ilości enterów/zawinień wierszy to rzeczą naturalną jest to, że nie mieści się w całym divie. Wobec tego chciałem przewidzieć ile wierszy będzie zajmował każdy newsów i łącząc te dane ze stronicowaniem wszystkich newsów wyświetlać na kazdej z podstron mieszczącą się w ryzach tego głównego Diva ilość newsów.

eh....
fander
ambitne... btw. przy pomocy funkcji która podał maly_swd jesteś w stanie łatwo wyliczyć ile będziesz miał linii tekstu w pojedynczym newsie. Dzielisz tekst na znaczniki nowej linii sprawdzasz każdą linie czy się nie zawinie itd... to jest do zrobienia. ew. do tableli z newsami dodajesz kolumne z tekstem krótkim i wyświetlasz tylko ten tekst.
ps. W c++ robiłem silnik bazy danych na prace inż i powiem że aby zrobić coś takiego w c++ to musiałbyś tez w to włożyć sporo pracy
maly_swd
To co napisales mozna zrealizowac w inny sposob:)

  1. <div id="news">
  2. <div>newsik</div>
  3. <div>newsik2</div>
  4. <div>newsik3</div>
  5. <div>newsik4</div>
  6.  
  7. </div>
  8. #news {width: 300px; height: 400px; overflow: hidden;}
  9. #news div {width: 14px; overflow: hidden;}


w skrocie div z newsami ma szerokosc 300px i wysokosc 400px; overflow chowa wszystko co wystaje poza ten obszar.

w div div -> masz newsy po jednej linijce szerokosc auto (300px) i wysokosc ~14px (tyle zajmule linia z fontem 10px), jesli news by sie przelamal do nowej lini to zostanie on ukryty przez overflow.

pozdro
fander
nie wiem czy k0b3 chce w taki sposób standaryzować swój moduł newsów, ja rozumiem że kolega che wyświetlać zawartość całego newsa nie ukrywając części informacji, i jeśli ma 2 duże newsy zajmujące cała wysokość to tylko one się wyświetlają a jeśli ma 10 małych to wyświetla 10 małych jeśli się mieszczą, ale to jest mało praktyczne
maly_swd
To jesli ma byc tak jak piszesz to wystarczy wywalic #news div {height: ... i overflow} a zostawic #news {width: 300px; height: 400px; overflow: hidden;}

i bedzie wtedy wyswietlalo tyle ile sie zmiesci w box
fander
dobrze mówi polać mu

--
jeszcze jeden taki post i poleci ostrzeżenie

~erix
k0b3
heh... teoretycznie.
- główny <div> o wysokości 435px;
- newsy - to zależy - 4liniki(~56px), 20linijek(~280px), 6 linijek(~84px) ... (nie muszą być wszystkie równe)
- dodać należy padding od góry i od dołu diva (10px) oraz odstępy między newsami (10px);
... razem 10px+10px+56px+10px+280px+10px+84px = 460px > od głównego Diva

Wygląda to mniej więcej tak:

Jak widać ostatni news nie mieści się już w ramach tego dużego diva. I teraz jeśli potrafiłbym przewidzieć ile zajmuje dany news na podstawie
tekstu pobranego z tabeli, mógłbym przenieść tego ostatniego newsa na kolejną podstronę newsów.
Zrozumiałe?? biggrin.gif
maly_swd
zle podejscie:)
policz sobie tak aby padingi i marginy daly jakis wspolny dzielnik:) i bedzie smigalo
k0b3
nie rozumiem o co Ci chodzi... sad.gif
maly_swd
chodzi o to aby wyliczyc sensownie marginy i paddingi tak aby przy takim przykladzie jak jest podany ladnie sie miescilo.

Najprosciej zrezygnowac z padingow i marginow odzielajacych newsy. I przyjac ile linijek moze wejsc w diva glownego.

Inne prostrze rozwiazanie to JS i zapoznanie sie z np mootolsami;)
fander
no tak ale jeśli bekiesz miał 1 newsa o wysokości 60px a 2 o wysokości 400 px to będzie ci wyświetlało tylko tego 1 newsa a poniżej niego będzie pustka, zgodnie z twoim zamysłem, pomysł maly_swd jest jak najbardziej odpowiedni do twojego systemu newsów. Najlepiej jakbyś zrobił tak ze masz ograniczona ilość newsów w tym dużym divie a te newsy powinny być również w jakimś stopniu skrócone, i tak masz link "czytaj dalej" który odnosi się do konkretnego newsa
k0b3
Macie racje, jednak jeśli zrobię tak jak mówi maly_swd to nie mam pojęcia jak ugryźć stronicowanie newsów.

Cytat(maly_swd @ 3.07.2009, 16:08:04 ) *
Inne prostrze rozwiazanie to JS i zapoznanie sie z np mootolsami;)

Całą stronę ogólnie prezentuje w ajaxie. Myśle, że nie będzie problemu wrzucić wszystkie newsy do jednego DIVa, a później przez JS przesuwać, tworząc dodając jakieś stronicowanie.

Jednak jeśli klient ma wyłączoną obsługę skryptów, chce zrobić stronicowanie bardziej statyczne, aby od razu po stronie serwera wyrzucało mi ile i jakie newsy będą na podstronie 1,2,3...itd.

Jak pisałem, stronę opieram o smarty, to bez problemu moge określić, że każdy news ma np. max ilość linijek 5. Przez co na jednej z podstron zmieści się do 4 newsów. Wszystko ładnie, jednak nie przewidzę, czy news np ma mniej niż 5 linijek, co stworzy dziurę.
Z drugiej strony zakładając, że będzie miał 5 i więcej tych linijek każdy news to szczerze nie podoba mi się jakby to wyglądało - takie same w ciągu.

Cholera, jak nie siedziałem przy tym, a tylko wyobrażałem sobie jak zabrać się do tego, to wszystko było o dużo prostsze.. winksmiley.jpg

// edit

Dodam jeszcze, że news o rozmiarze 400px raczej się nie zdarzy. Jak zauważyłeś fander to jest link czytaj dalej, a to co będzie na stronie głównej to tylko nagłówek newsa.

// edit 2
Chyba zrobie jak mówicie. Co prawda rozwiązałem problem tak jak wspomniał ktoś wyżej. W tablicy mam każdą szerokość literki, napisałem ładnie algorytm który zlicza mi dokładnie ilość enterów oraz gdy jest użyty <br />. Jednak obawiam się, że taki zabieg po stronie serwera może go przeciażać jeśli odwiedzi go np z 30osób naraz.

Co radzicie w teraz?
maly_swd
powiem tak, kiedys robilem na gd to co Ty chcesz uzyskac i powiem tak, jest do zrobienia ale ... troche zabawy i nie wiem czy jest Ci to az tak potrzebne...
ten sposob z divami co Ci podalem jest dobry, szybki ale ma i wady... tak jak juz ktos wspomnial:)

zobacz to: http://www.efectorelativo.net/laboratory/noobSlide/ przyklad 8. powinnien byc idealny do newsow;)
Bloki dzielisz tak jak podalem z divami z tym ze dla newsa robisz 3 linijki i takich blokow po trzy linijki, czyli jakies 8newsow, pozniej robisz pagowanie z mootolsow przyklad wyzej;) i smiga ladnie pieknie..
k0b3
Jeszcze nie wiem jak to zrobię. Mam dwie możliwości, muszę chyba to zostawić na chwile, bo już mózg mi się lansuje.

Poniżej kod dla mających taki sam problem i są bardzie za tym rozwiązaniem z tablicą i szerokością literek winksmiley.jpg
  1. <?php
  2. function szer_litery($lit) {
  3. $t = array(    ' '=>3,
  4.            'a'=>6,
  5.               'ą'=>7,
  6.            'b'=>6,
  7.            'c'=>6,
  8.            'ć'=>6,
  9.            'd'=>6,
  10.            'e'=>6,
  11.            'f'=>4,
  12.            'g'=>6,
  13.            'h'=>6,
  14.            'i'=>2,
  15.            'j'=>3,
  16.            'k'=>5,
  17.            'l'=>2,
  18.            'ł'=>3,
  19.            'm'=>9,
  20.            'n'=>6,
  21.            'o'=>6,
  22.            'ó'=>6,
  23.            'p'=>6,
  24.            'r'=>4,
  25.            's'=>5,
  26.            'ś'=>5,
  27.            't'=>3,
  28.            'u'=>6,
  29.            'w'=>8,
  30.            'x'=>5,
  31.            'y'=>6,
  32.            'z'=>6,
  33.            'ź'=>6,
  34.            'ż'=>6,
  35.            'A'=>7,
  36.            'B'=>7,
  37.            'C'=>8,
  38.            'Ć'=>8,
  39.            'D'=>7,
  40.            'E'=>6,
  41.            'F'=>6,
  42.            'G'=>8,
  43.            'H'=>6,
  44.            'I'=>2,
  45.            'J'=>5,
  46.            'K'=>7,
  47.            'L'=>6,
  48.            'Ł'=>3,
  49.            'M'=>8,
  50.            'N'=>7,
  51.            'O'=>7,
  52.            'Ó'=>7,
  53.            'P'=>7,
  54.            'R'=>8,
  55.            'S'=>7,
  56.            'Ś'=>7,
  57.            'T'=>7,
  58.            'U'=>7,
  59.            'W'=>10,
  60.            'X'=>7,
  61.            'Y'=>7,
  62.            'Z'=>7,
  63.            'Ź'=>7,
  64.            'Ż'=>7,
  65.            '!'=>2,
  66.            '@'=>11,
  67.            '#'=>6,
  68.            '$'=>6,
  69.            '%'=>9,
  70.            '^'=>5,
  71.            '&'=>7,
  72.            '*'=>4,
  73.            '('=>4,
  74.            ')'=>4,
  75.            '_'=>6,
  76.            '+'=>6,
  77.            '-'=>6,
  78.            '='=>6,
  79.            '{'=>4,
  80.            '}'=>4,
  81.            '['=>3,
  82.            ']'=>3,
  83.            ':'=>2,
  84.            ';'=>2,
  85.            '?'=>6,
  86.            '|'=>2,
  87.            '/'=>4,
  88.            ''=>4,
  89.            '<'=>6,
  90.            '>'=>6,
  91.            '´'=>3,
  92.            '.'=>2,
  93.            ','=>2,
  94.            '&#710;'=>3,
  95.            '˜'=>3,
  96.            "'"=>2,
  97.            '“'=>5,
  98.            '"'=>5,
  99.            '„'=>5
  100.            );
  101.    
  102.    if (empty($t[$lit])) {
  103.    //domyslna wartosc jesli nie ma takiej litery
  104.            return 4;
  105.    } else {
  106.        return $t[$lit];
  107.    }
  108.  
  109. }
  110.  
  111.     // przejscie po wszystkich literach
  112.            for($i=0; $i<strlen($n['tresc']); $i++) {
  113.                    // tresc przechowywana w tablicy
  114.                    $lit = $n['tresc'][$i];
  115.                    //sumowanie szerokosci danej litery
  116.                    $szer=$szer+szer_litery($lit);    
  117.                    //jesli napotka <br />
  118.                    if($n['tresc'][$i]=='<' && $n['tresc'][$i+1]=='b' && $n['tresc'][$i+2]=='r') {
  119.                    // dodaje linie
  120.                        $linie++;    
  121.                    // zeruje szerokosc                                                                    
  122.                        $szer=0;
  123.                    // jesli jednak nie wystapilo br
  124.                    } else {
  125.                    //dalej zliczna szerokosc porownywana jest z szerokoscia maksymalna,
  126.                    //jesli ja przekroczy
  127.                    if($szer>=$szerokosc) {
  128.                    // dodaje linie
  129.                        $linie++;
  130.                    // zeruje szerokosc    
  131.                        $szer=0;
  132.                    }
  133.                }
  134.            }
  135.                // sprawdzenie czy jeszcze jest jakis wiersz
  136.                if($szer>0) {
  137.                    $linie++;
  138.                }
  139.                // +2, poniewaz w moim szablonie dodaje jeden Enter oraz wiersz 'czytaj dalej...'
  140.                $n['linie']=$linie+2;
  141. ?>
maly_swd
mozna zrobic to uniwersalniej prze ttfboxa... odpalasz funkcje ktora robi w tablicy szerokosci literek dla danej czcionki i wielkosci. A pozniej jedziesz tak jak masz w funkcji:)


ps. to co podales jest spoko ale podaj dla jakiego fontu i wielkosci;) ps. i nie dziala na boldach i italicach;)
k0b3
Cytat
ps. i nie dziala na boldach i italicach;)


Eh.. no to mnie załamałeś. Zapomniałem o tym ;P

Arial, 10px;
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.