Petar Slavić
06.03.2012. 1
SadržajZadatak završnog radaKorištene tehnologijeHTML5HTML5 kompatibilnostCanvas APIPrije i poslije aplikacijaKineticJSGalerijaPrije i poslije efektUčitavanje korisničkih fotografija
06.03.2012. 2
Zadatak završnog radaNapraviti aplikaciju za prikaz prije i poslije fotografije
kao na sliciPotrebno:
Dvije slikePomični element
NedostatciNemogućnost
korištenja više slika
06.03.2012. 3
Korištene tehnologijeHTML i jQueryKarakteristike korištenih tehnologija:
Jednostavna manipulacija i pristupanje elementima preko jQuery i CSS
Jednostavno korištenje animacijaMobilnost zbog korištenja “plugin”Relativno kratak kod
06.03.2012. 4
HTML5Nova generacija HTML Dizajniran da bude cross-browserUvodi nove elemente , API :
Video i audioCanvas API – Canvas Text ApiGeolocationFileSystem APIFile API ....
06.03.2012. 5
HTML5 KompatibilnostRelativno nova tehnologija – slaba kompatibilnostPrepoznavanje kompatibilnosti :
Modernizr bibliotekaRučna provjera
06.03.2012. 6
Canvas API2D podloga za crtanje
Koristi direktni (“immediate”) mod crtanjaKoristi se za:
Naprednu grafiku ( 2D i 3D)Animacije
Problem kompatibilnosti kod Internet ExploreraRiješenje problema :
Excanvas biblioteka
06.03.2012. 7
Canvas APIIscrtavanje se obavlja preko Context(“2d”)Context je osnovna funkcija za crtanje svih oblika na
Canvas elementu
06.03.2012. 8
Prije i poslije aplikacijaPo uzoru na originalnu aplikaciju napravljena je ova nova
aplikacija sa dodanim svojstvima kao što su :Galerija slika Direktan pristup “prije i poslije” efektuUčitavanje korisničkih fotografija
Aplikacija koristi tehnologije:HTML5 Canvas APIHTML5 File APIKineticJS biblioteku
06.03.2012. 9
Prije i poslije aplikacijaKineticJS biblioteka omogućuje više slojni način crtanja
na Canvas elementuSadrži slojeve:
1. “buffer” sloj2. “backstage” sloj3. korisnički sloj4. kompozicija slojeva
Svaki oblik na sloju je objekt
06.03.2012. 10
GalerijaSvaka slika u galeriji je objekt sa svojim svojstvimaOdabirom određenih slika prebacuje se iz galeriju u “prije
i poslije efekt”
06.03.2012. 11
Prije i poslije efektSvaka slika za “prije i poslije efekt”se nalazi u svom slojuEfekt se ostvaruje manipulacijom piksela (mijenja se
vrijednost RGBA)
06.03.2012. 12
Učitavanje korisničkih fotografijaPomoću File API (File Reader API) omogućeno je
učitavanje korisničkih slikaNakon odabira , slike se prebacuju u “Prije i poslije efekt”Povratna informacija File Reader API je u obliku
06.03.2012. 13
Hvala na pažnji
Pitanja?
06.03.2012. 14