Upload
jennifer-jenkins
View
51
Download
0
Embed Size (px)
DESCRIPTION
Završni rad JavaScript i Canvas : “Prije i poslije" aplikacija za prikaz fotografija. Petar Slavić. Sadržaj. Zadatak završnog rada Korištene tehnologije HTML5 HTML5 kompatibilnost Canvas API Prije i poslije aplikacija KineticJS Galerija Prije i poslije efekt - PowerPoint PPT Presentation
Citation preview
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