The Dynamic Duo - Ograniczanie widoczności warstw (Clipping)




loc = "../"






document.write(toccss)
document.write(tochtml)

Ograniczanie widoczności warstw (Clipping)

Ograniczanie widoczności (ang: clipping) to technika która pozwala określić jaka część warstwy będzie widoczna. Musisz zrozumieć różnicę pomiędzy wartościami ograniczania a szerokością i wysokością warstwy - to nie jest to samo. Szerokość i wysokość mówi przeglądarce tylko to jak rozmieszczać elementy wewnątrz warstwy, podczas gdy wartości ograniczania tworzą jakby okienko, przez które widzimy warstwę - nie mają one wpływu na żadne inne parametry warstwy (położenie, szerokość, widzialność itp.)

Region widoczny określany jest jako prostokąt o wartościach podawanych dla każdego z czterech brzegów (górny, prawy, dolny, lewy). Każdy z brzegów może znajdować się zarówno wewnątrz warstwy - ograniczając jej widoczność, jak i na zewnątrz - zwiększając ją. Wszystkie wartości podawane są jako wartości względne w stosunku do warstwy - a dokładnie w stosunku do położenia górnego lewego rogu warstwy.



Składnia CSS dla ograniczania widoczności warstwy jest następująca:


clip:rect(top,right,bottom,left)


Gdzie top, right, bottom i left są podawane w pikselach. I nie zapomnij o ich kolejności!

A oto tag DIV wraz z parametrami określającymi obszar widzialny:


<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80; width:100; height:50; clip:rect(-10,110,60,-10); background-color:#FF0000; layer-background-color:#FF0000;">
</DIV>


W tym wypadku tworzymy 10 pikselowy brzeg dookoła brzegu warstwy przez ustawienie wartości top i left na -10. Prawy brzeg jest ustawiony w odległości 110 pikseli, i jest to o 10 więcej niż wymiary warstwy. To samo odnosi się do dolnego brzegu.

Umieściłem tutaj kilka dodatkowych własności CSS. background-color (dla IE4) i layer-background-color (dla Netscape) są użyte w celu określenia koloru tła warstwy. Daje nam to możliwość zobaczenia naszej warstwy jako prostokąta i pomoże w obserwacjach tego co się dzieje podczas ograniczania widoczności warstwy.

Możesz także umieścić w tle warstwy obrazek. Odpowiednia własność CSS to dla IE background-image:URL(filename.gif) i dla Netscape layer-background-image:URL(filename.gif). Ale aby Netscape wyświetlił obrazek prawidłowo, musisz użyć jeszcze jednej własności CSS - repeat:no. Oto cały kod CSS dla warstwy z obrazkiem w tle:


<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:80; width:100; height:50; clip:rect(-10,110,60,-10); background-image:URL(filename.gif); layer-background-image:URL(filename.gif); repeat:no;}


JavaScript i ograniczanie widoczności

Kiedy już wprowadziłeś wartości ograniczające widoczną częśc warstwy, może je oczywiście odczytywać lub zmieniać za pomocą JavaScriptu.

Ograniczanie w Netscape:

Możesz odczytać, lub zmieniać każdą z wartości osobno:

document.divName.clip.top
document.divName.clip.right
document.divName.clip.bottom
document.divName.clip.left


Aby pokazać okienko typu Alert z wartościami clip:


alert(document.divName.clip.top)


Aby zmienić np. wartość top na 50, piszesz:


document.divName.clip.top = 50


Ograniczanie w Internet Explorer:

Tutaj musimy pobrać wszystkie wartości jednocześnie. Np.: Możesz pokazać okienko typu Alert i podać w nim wartości ograniczania:


alert(divName.style.clip)


To polecenie zwróci łańcuch który reprezentuje wartości ograniczania jakie zostały zdefiniowane. Tak to będzie wyglądało:


"rect(0px 50px 100px 0px)"


Kiedy chcesz zmienić wartości określające okienko widoczności nie możesz tego zrobić tak jak w Netscape - pojedynczo. Musisz zmienić wszystkie wartości jednocześnie:


divName.style.clip = "rect(0px 100px 50px 0px)"


Ta właściwość IE czyni go trochę niewygodnym do wykonywania operacji zmiany widoczności. Starałem się trochę to ułatwić pisząc funkcję którą możemy użyć do sprawdzenia ustawionych wartości w każdej przeglądarce:

Funkcja clipValues()

Funkcja clipValues() może być użyta do odczytania wartości dla każdego brzegu okienka widoczności.


function clipValues(obj,which) {
if (ns4) {
if (which=="t") return obj.clip.top
if (which=="r") return obj.clip.right
if (which=="b") return obj.clip.bottom
if (which=="l") return obj.clip.left
}
else if (ie4) {
var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px")
if (which=="t") return Number(clipv[0])
if (which=="r") return Number(clipv[1])
if (which=="b") return Number(clipv[2])
if (which=="l") return Number(clipv[3])
}
}


Funkcji przekazujesz parametry określające warstwę i decydujące który brzeg okienka widoczności cię interesuje. Np. kiedy określimy zmienną wskazującą na warstwę "blockDiv", w ten sposób możemy odczytać wartość top okienka widoczności:


alert(clipValues(block,"t"))


Brzeg który chcemy sprawdzić przekazujemy jako pierwszą literę jego określenia w cudzysłowach - "t" (top), "r" (right), "b" (bottom), "l" (left).

Kliknij tutaj aby zobaczyć przykład.

Zmiana wartości okienka widoczności

Aby łatwo i przyjemnie zmieniało sie położenie okienka widoczności, napisałem dwie funkcje, które nam w tym pomogą.

Funkcja clipTo():

Funkcja clipTo() pozwala na całkowitą zmianę położenia i wymiarów okienka widoczności.


function clipTo(obj,t,r,b,l) {
if (ns4) {
obj.clip.top = t
obj.clip.right = r
obj.clip.bottom = b
obj.clip.left = l
}
else if (ie4) obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}


Aby jej użyć musisz podać którego obiektu ma dotyczyć operacja i wartości położenia okienka dla każdego jego brzegu.


clipTo(block,0,100,100,0)


Funkcja clipBy():

Funkcja clipBy() pozwala na łatwą zmianę aktualnego położenia okienka widoczności o podaną ilość pikseli - dodaje lub odejmuje podaną wartość od aktualnej dla każdego brzegu:


function clipBy(obj,t,r,b,l) {
if (ns4) {
obj.clip.top = clipValues(obj,'t') + t
obj.clip.right = clipValues(obj,'r') + r
obj.clip.bottom = clipValues(obj,'b') + b
obj.clip.left = clipValues(obj,'l') + l
}
else if (ie4) obj.clip = "rect("+(this.clipValues(obj,'t')+t)+"px "+(this.clipValues(obj,'r')+r)+"px "+Number(this.clipValues(obj,'b')+b)+"px "+Number(this.clipValues(obj,'l')+l)+"px)"
}


Podobnie jak w funkcji clipTo() należy podać warstwę i określić ilość pikseli zmiany dla każdego brzegu:


clipBy(block,0,10,5,0)


Powyższa konstrukcja doda 10 pikseli do brzegu prawego i 5 pikseli do brzegu dolnego.

Kliknij tutaj aby zobaczyć przykład użycia funkcji clipTo() i clipBy()

Prawdopodobnie Netscape będzie lepszy do obejrzenia przykładu ponieważ pokazuje kolor tła niezależnie od tego gdzie zostało ustawione okienko widoczności. Natomiast w IE, kiedy będziesz ustawiał okienko widoczności poza warstwą, nie zobaczysz brzegów warstwy.

Animacja okienkiem widoczności

Poprzez umieszczenie funkcji clipBy() w pętli możemy uzyskać ciekawy efekt, który zapewne nie raz widziałeś już na stronach WWW. Nazywa się on z angielska wiping i w skrócie polega na odsłanianiu / zasłanianiu obrazka / treści warstwy przez okienko widoczności. Najprościej byłoby zapewne napisać generalną funkcję, która wykonuje tą operację. Funkcja taka została włączona do DynApi jako funkcja rozszerzona (przeczytaj lekcję Metoda Wipe). Jednakże chyba prościej i łatwiej będzie napisać własną funkcję dla warstwy. Stwórzmy najpierw funkcję rekurencyjną:


function wipe1() {
clipBy(block,0,5,0,0)
setTimeout("wipe1()",30)
}


Ale przecież musimy mieć możliwość zatrzymania animacji, więc dodajemy sprawdzenie, czy brzeg okienka osiągnął już pożądaną wartość:


function wipe1() {
if (clipValues(block,'r')