8/17/2019 80211ac Wifi for Dummies
1/85
Livre blanc
#HTML5 #CANVAS
.COMMENT CREER
UN MOTEUR D’AFFICHAGE 2D
EN HTML5
Nicolas LEGRAND, formateur MEDIAB!"
ublication collaborative $ur %oo&le'
Si vou$ $ou(aite) nou$ faire *art +une am-lioration ou collaborer . la r-+action +e cet o*enboo/,
utili$e) la fonction 0Comment$1 +i$*onible en (aut . +roite +e cette fen2tre"
1
http://www.mediabox.fr/formations-html-css.htmlhttps://docs.google.com/document/d/1Ye1Ow72rHtskR3Lf_FdOPl4MsqWAl-rEsnt0K3QO05M/edithttps://docs.google.com/document/d/1Ye1Ow72rHtskR3Lf_FdOPl4MsqWAl-rEsnt0K3QO05M/edithttp://www.mediabox.fr/formations-html-css.html
8/17/2019 80211ac Wifi for Dummies
2/85
SOMMAIRE
3 Petit rappel
4ava$cri*t Ecma$cri*t
HTML5 et canva$
3 Dessiner avec canvas
6ic(ier +e ba$eCr-er un canva$De$$iner +e$ *rimitive$ 7li&ne$, cercle$, carr-$8Al*(a, $cale, rotation et tran$lationCumul +e$ tran$formation$, $auve&ar+e et re$tauration
+u conte9te"
3 Dessiner une image
C(ar&er une ima&e 7ou te9ture8De$$iner une te9ture"M-t(o+e$ +e +e$$in avanc-e$"De$$iner . traver$ un ma$:ue"
3 Structure de base du moteur 2D
La en 4ava$cri*t, le *rotot;*a&eH-rita&e et or+re + A$$et$Loa+er et A$$et$Mana&er?e&rou*er toute$ le$ te9ture$ en une $eule, la cla$$e
Te9tureAtla$
3 Les bases de l'afchage
Structure arbore$cente et Di$*la;Li$tLe *oint +e +-*art > La cla$$e Di$*la;b@ectEnn +e$ te9ture$ > La cla$$e Bitma*b@et$ imbri:u-$ > La cla$$e Di$*la;b@ectContainer?acine +e la Di$*la;Li$t > cla$$e Sta&e
3 anipuler les ob!ets "
trans#ormations $ calculs
matricielsLe *robl=me +e$ tran$formation$ imbri:u-e$"Le$ matrice$, *our:uoi faire Comment utili$er le$ matrice$ Combiner le$ tran$formation$ +
8/17/2019 80211ac Wifi for Dummies
3/85
?a*i+e Hi$tori:ue
avascript $ cmascript
JavaScript 7abr-&- 4S8 e$t un lan&a&e +e *ro&rammation +e $cri*t$
*rinci*alement utili$- +an$ le$ *a&e$ eb interactive$ mai$ au$$i ct-
$erveurF" C
8/17/2019 80211ac Wifi for Dummies
4/85
*ro&rammeur +e r-ali$er +u contenu interactif +e t;*e @eu vi+-o, c(at ebcam,
mani*ulation +e vi+-o, conne9ion . un $erveur +e $oc/et$ etc""" 4u$:u
8/17/2019 80211ac Wifi for Dummies
5/85
De$$iner avec canva$
-ichier de base
Nou$ allon$ commencer *ar cr-er un c(ier +e ba$e *our notre a**lication $ur la ba$e +u mo+=le $uivant >
-ichier inde.html
WDCTXE (tmlY
(tml lan&ZenY(ea+Y
meta c(ar$etZutfGY
titleYUtitleY
$cri*t t;*eZte9tU@ava$cri*t $rcZ$am*le"@$YU$cri*tY
$t;le t;*eZte9tUc$$Y
canva$
bor+er> J*9 $oli+ blac/[
bac/&roun+Gcolor> blac/[
\
U$t;leY
U(ea+Y
bo+;YWGG La bali$e canva$ :ue nou$ utili$eron$ +an$ le c(ier $am*le"@$GGY
canva$ i+Ztoma(a/ i+t(Z1OO1 (ei&(tZ1OO1YUcanva$Y
Ubo+;Y
U(tmlY
-ichier sample.!s
U] oint +
8/17/2019 80211ac Wifi for Dummies
6/85
Le c(ier in+e9"(tml e$t un c(ier (tml5 $im*le, le$ $eul$ -lement$ notable$ $ont>
` L
8/17/2019 80211ac Wifi for Dummies
7/85
return &etCanva$78"&etConte9t7J+8[
\
Voil., . *r-$ent nou$ avon$ tout le$ outil$ n-c-$$aire$ *our *ouvoir +e$$iner +an$ notre canva$"
7
8/17/2019 80211ac Wifi for Dummies
8/85
Dessiner des primitives ( lignes0 cercles0 carrés... )
HTML5 embar:ue toute une AI +-+i-e au +e$$in, ce :ui *ermet au9 +-velo**eur$ +e cr-er +u
contenu J+ $an$ avoir $;$t-mati:uement recour$ . +e$ ima&e$" A l
8/17/2019 80211ac Wifi for Dummies
9/85
u et 3: re*r-$entent le$ coor+onn-e$ +u centre +e mon arc, radius le ra;on 7 en *i9el$ 8 +e mon arc,
start8ngle et end8ngle le$ an&le$ +e +-*art et +
8/17/2019 80211ac Wifi for Dummies
10/85
conte9t"llSt;le Z blue[
conte9t"ll?ect7 JO, JO, FOO, FOO 8[
conte9t"ll78[
conte9t"be&inat(78[
conte9t"llSt;le Z &reen[
conte9t"moveTo7FOO,FOO8[
conte9t"arc7FOO, FOO, 5O, $tartAn&le, en+An&le, fal$e8[
conte9t"lineTo7FOO,FOO8[
conte9t"ll78[
Maintenant :ue nou$ $avon$ comment +e$$iner +e$ *rimitive$, nou$ allon$ a**ren+re . le$ tran$former,
com*ren+re *ar l. :ue nou$ allon$ c(an&er leur a**li:uer un c(an&ement +
UU *our +-nir la tran$*arence . 5O
conte9t"global8lpha 4 O"5[
La valeur +e la *ro*ri-t- global8lpha +u conte9te $e $itue tou@our$ entre O et F, $i, comme +an$ l
8/17/2019 80211ac Wifi for Dummies
11/85
conte9t"be&inat(78[
conte9t"llSt;le Z &reen[
conte9t"arc7FOO, FOO, 5O, $tartAn&le, en+An&le, fal$e8[
conte9t"ll78[
n a*erRoit bien le carr- en tran$*arence +erri=re le cercle, e$$a;e) +e @ouer un *eu avec le$ valeur$ +e l
8/17/2019 80211ac Wifi for Dummies
12/85
emple"
var conte9t Z &etConte9t78[
conte9t"tran$late7 dQ, QJ 8[
conte9t"$cale7 J, J 8[
conte9t"be&inat(78[
conte9t"llSt;le Z re+[
conte9t"ll?ect7 O, O, FOO, FOO 8[
conte9t"ll78[
Ain$i, nou$ obtenon$ , carr' !% 0&& pi1%ls +e ct-$ mai$ +ont l-'c)%ll% %st !% 2, an$i vi$uellement, @
8/17/2019 80211ac Wifi for Dummies
13/85
conte9t"tran$late7 dQ, QJ 8[
conte9t"$cale7 J, J 8[
conte9t"rotate7 KQ ] to?a+ian$ 8[
conte9t"be&inat(78[
conte9t"llSt;le Z re+[
conte9t"ll?ect7 O, O, FOO, FOO 8[
conte9t"ll78[
Note) :ue toute$ le$ rotation$ $
var conte9t Z &etConte9t78[
UU ici on a**li:ue une tran$lation AVANT le $cale
conte9t"tran$late7 dQ, QJ 8[
conte9t"$cale7 J, J 8[
conte9t"be&inat(78[conte9t"llSt;le Z re+[
conte9t"ll?ect7 O, O, FOO, FOO 8[
conte9t"ll78[
var conte9t Z &etConte9t78[
UU ici on a**li:ue une tran$lation A?ES le $cale
conte9t"$cale7 J, J 8[
conte9t"tran$late7 dQ, QJ 8[
conte9t"be&inat(78[
conte9t"llSt;le Z re+[
conte9t"ll?ect7 O, O, FOO, FOO 8[
conte9t"ll78[
n *eut voir :ue le r-$ultat obtenu . l
8/17/2019 80211ac Wifi for Dummies
14/85
l
8/17/2019 80211ac Wifi for Dummies
15/85
conte9t"rotate7 O ] 7 Mat("I U FO 8 8[
conte9t"be&inat(78[
conte9t"llSt;le Z &reenconte9t"ll?ect7 O, O, FOO, FOO 8[
conte9t"ll78[
conte9t"re$tore78[ UU re$taure la J=me $auve&ar+e
conte9t"be&inat(78[
conte9t"llSt;le Z blue
conte9t"ll?ect7 O, O, 5O, 5O 8[
conte9t"ll78[
conte9t"re$tore78[ UU re$taure la F=re $auve&ar+e
conte9t"be&inat(78[
conte9t"llSt;le Z *ur*le
conte9t"ll?ect7 O, O, FOO, FOO 8[
conte9t"ll78[
Voil., le$ ba$e$ +e$ tran$formation$ et +u +e$$in avec canva$ $ont *o$-e$, nou$ venon$ +e clotPrer ce *remier
c(a*itre"
15
8/17/2019 80211ac Wifi for Dummies
16/85
Dessiner une image
Nou$ allon$ maintenant *a$$er au +e$$in +
in+e9"(tml
WDCTXE (tmlY
(tml lan&ZenY
(ea+Y
meta c(ar$etZutfGY
titleYUtitleY
$cri*t t;*eZte9tU@ava$cri*t $rcZ$am*le"@$YU$cri*tY
$t;le t;*eZte9tUc$$Y
canva$
^
bor+er> J*9 $oli+ blac/[
bac/&roun+Gcolor> blac/[
\
U$t;leY
U(ea+Ybo+;Y
canva$ i+Ztoma(a/ i+t(ZOO (ei&(tZOOYUcanva$Y
im& $rcZ*er$oF"*n& i+Z*er$oFUY
Ubo+;Y
U(tmlY
$am*le"@$
U]
] ?etourne une r-f-rence . l
8/17/2019 80211ac Wifi for Dummies
17/85
return +ocument"&etElementB;I+7toma(a/8[
\
U]
] ?etourne le conte9te +
8/17/2019 80211ac Wifi for Dummies
18/85
` M't)o!%s !% !%ssi avac'%s
A l
8/17/2019 80211ac Wifi for Dummies
19/85
conte9t"$ave78[ UU $auve&ar+e F
conte9t"+raIma&e7te9ture,JO,O,FOO,FOO,O,O,JOO,JOO8[
conte9t"re$tore78[
\
Ici, on +e$$ine uni:uement ,% portio +e l
8/17/2019 80211ac Wifi for Dummies
20/85
` D%ssi%r trav%rs , +as (tt*>UU"(tml5canva$tutorial$"comUa+vance+U(tml5Gcanva$G&lobalGcom*o$iteGo*eration$G
tutorialU 8
Comment inter*r-ter ce &ra*(i:ue
En *remier lieu il faut :ue @e vou$ +onne le co+e $ource :ui va avec>
conte9t"be&inat(78[
conte9t"llSt;le Z blue[
conte9t"ll?ect7O,O,55,558[
conte9t"ll78[
conte9t"&lobalCom*o$ite*eration Z $ourceGin[
20
http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/
8/17/2019 80211ac Wifi for Dummies
21/85
conte9t"be&inat(78[
conte9t"llSt;le Z re+[
conte9t"arc75O,5O,K5,O,J ] Mat("I,fal$e8[
conte9t"ll78[
Il $
8/17/2019 80211ac Wifi for Dummies
22/85
Structure de base du moteur` La ?OO % Javascript7 l% protot=pa$%
Le 4avaScri*t e$t un lan&a&e orient- ob@et *ar *rotot;*e, il ne +onne +onc *a$ la *o$$ibilit- +e cr-er ce :ue l
8/17/2019 80211ac Wifi for Dummies
23/85
8/17/2019 80211ac Wifi for Dummies
24/85
return null[
\[
Toma(a/" in(erit$ Z function7 ob@ 8
^ var c(il+ Z null[
var ance$tor Z null[
var $u*erarent Z Toma(a/" &etarentCla$$7ob@ance$tor8[
if 7 $u*erarent WZ null 8
Toma(a/" in(erit$7$u*erarent8[
c(il+ Z Toma(a/" cla$$e$ob@c(il+[
ance$tor Z Toma(a/" cla$$e$ob@ance$tor[
if 7 c(il+ WZ null ance$tor WZ null 8
^
ance$tor Z ne ance$tor78[
for7 var *ro* in ance$tor 8
^
if 7 Wc(il+"*rotot;*e*ro* 8
^
c(il+"*rotot;*e*ro* Z ance$tor*ro*[
\
\
\
\[
Et enn, il nou$ faut une m-t(o+e *our +-marrer tout Ra >
Toma(a/"run Z function78
^
var ob@ Z null[
var i Z O[
var ma9 Z Toma(a/" e9ten+$"len&t([
for 7i Z O[ i ma9[ i'' 8
^
Toma(a/" in(erit$7 Toma(a/" e9ten+$i 8[
\
\
` L%s Na+%spac%s
24
8/17/2019 80211ac Wifi for Dummies
25/85
Dan$ le +omaine +e la *ro&rammation orient-e ob@et un a+%spac% e$t comme $on nom li%7 ce :ui fait :ue la *remi=re librairie $era en *artie inutili$able"
?o,r r'so,!r% c% pro3l8+%7 o ,tilis% l%s a+%spac%s, le *robl=me c
8/17/2019 80211ac Wifi for Dummies
26/85
26
8/17/2019 80211ac Wifi for Dummies
27/85
Gestion des médias ( ou assets )
Fote "
Précédemment0 nous avons convenu Hue nous utiliserions le mot teture pour désigner une image0 car cela
correspond I un vocabulaire tr%s utilisé dans le !eu vidéo. Pour les besoins de ce chapitre0 nous allons coder une
classe nommée +eture dont l'une des propriétés sera une image.
Par soucis de clarté nous allons donc réutiliser le mot image pour parler d'une image0 le mot teture désignera
dorénavant un ob!et de t3pe +eture.
` Itro!,ctio a,1 sprit%s)%%ts
Nou$ commenReron$ ce c(a*itre avec une intro+uction . la notion +e sprit%s)%%t"
U% sprit%s)%%t %st ,% i+a$%
8/17/2019 80211ac Wifi for Dummies
28/85
c)i%rs, cela lui +eman+e . c(a:ue foi$ un tem*$ +
8/17/2019 80211ac Wifi for Dummies
29/85
8/17/2019 80211ac Wifi for Dummies
30/85
sampleC.html
WDCTXE (tmlY
(tml lan&ZenY
(ea+Y
meta c(ar$etZutfGY
meta nameZvie*ort contentZi+t(Z+eviceGi+t(, initialG$caleZF"O, u$erG
$calableZOYtitleYUtitleY
$cri*t t;*eZte9tU@ava$cri*t $rcZtoma(a/UToma(a/"@$YU$cri*tY
$cri*t t;*eZte9tU@ava$cri*t $rcZtoma(a/Uutil$UA$$et$Loa+er"@$YU$cri*tY
$cri*t t;*eZte9tU@ava$cri*t $rcZ$am*leF"@$YU$cri*tY
$t;le t;*eZte9tY
canva$
^
bor+er> J*9 $oli+ blac/[
bac/&roun+Gcolor> blac/[
\
U$t;leY
U(ea+Y
bo+;Y
canva$ i+Ztoma(a/YUcanva$Y
Ubo+;Y
U(tmlY
sampleC.!s
U] oint +
8/17/2019 80211ac Wifi for Dummies
31/85
in+o"onloa+ Z init[
Nou$ avon$ le co+e $ource +e K c(ier$>
` le c(ier $am*leF"(tml, :ui embar:ue le$ c(ier$ Toma(a/"@$, $am*leF"@$ et A$$et$Loa+er"@$
` le c(ier A$$et$Loa+er"@$ :ui contient le co+e +e notre cla$$e` le c(ier $am*leF"@$ :ui $e contente +
8/17/2019 80211ac Wifi for Dummies
32/85
A$$et$Mana&er"*rotot;*e"&etData Z function78
^
return t(i$" +ata[
\[
A$$et$Mana&er"*rotot;*e"&etDataB;Alia$ Z function7alia$8
^
if 7 t(i$" +ataalia$ 8
return t(i$" +ataalia$[
return null[
\[
A$$et$Mana&er"*rotot;*e"a++Ima&e Z function7ima&e, alia$8
^
t(i$" +ataalia$ Z ima&e[
\[
Voil., maintenant nou$ +i$*o$on$ +
8/17/2019 80211ac Wifi for Dummies
33/85
Et bien tout $im*lement *arce :ue cette cla$$e Te9ture contien+ra +e$ information$ :ui nou$ $eron$ bien utile$ *lu$
tar+, comme le nom +e la te9ture, l
8/17/2019 80211ac Wifi for Dummies
34/85
te9ture"rect Z O,O,KJ,JJ[ l
8/17/2019 80211ac Wifi for Dummies
35/85
Nou$ re*arleron$ +e l
8/17/2019 80211ac Wifi for Dummies
36/85
Te9tureAtla$"*rotot;*e"removeTe9ture Z function7 name 8
^
var te9ture Z t(i$"&etTe9tureB;Name7name8[
if 7 te9ture ZZ null 8
return[
var in+e9 Z t(i$" te9ture$"in+e9f 7te9ture8[
t(i$" te9ture$"$*lice7in+e9,F8[
\[
Mo+ion$ maintenant le co+e notre c(ier $am*leF"@$
function onCom*lete78
^
var +ata Z A$$et$Loa+er"&etIn$tance78"&etData78[
var canva$ Z +ocument"&etElementB;I+7
8/17/2019 80211ac Wifi for Dummies
37/85
O,
O,
FOO,
FOO 8[
te9ture Z atla$"&etTe9tureB;Name7te9tureJ8[
UU *ui$ la +eu9i=me
conte9t"+raIma&e7 te9ture"+ata,
te9ture"rectO,
te9ture"rectF,
te9ture"rectJ,
te9ture"rectK,
FFO,
O,
FOO,
FOO 8[
UU en &ro$, nou$ avon$ +e$$in- le$ +eu9 moiti-$ +e l
8/17/2019 80211ac Wifi for Dummies
38/85
A$$et$Mana&er"&etIn$tance Z function78
^
if 7 A$$et$Mana&er" in$tance ZZ null 8
A$$et$Mana&er" in$tance Z ne A$$et$Mana&er78[
return A$$et$Mana&er" in$tance[
\[
A$$et$Mana&er"*rotot;*e" ima&e$ Z null[
A$$et$Mana&er"*rotot;*e" atla$e$ Z null[
A$$et$Mana&er"*rotot;*e" te9ture$ Z null[
UU ima&e$
A$$et$Mana&er"*rotot;*e"&etIma&e$ Z function78
^
return t(i$" ima&e$[
\[
A$$et$Mana&er"*rotot;*e"&etIma&eB;Alia$ Z function7alia$8
^
if 7 t(i$" ima&e$alia$ 8
return t(i$" ima&e$alia$[
return null[
\[
A$$et$Mana&er"*rotot;*e"a++Ima&e Z function7ima&e, alia$8
^
t(i$" ima&e$alia$ Z ima&e[
\[
UUatla$e$
A$$et$Mana&er"*rotot;*e"a++Atla$ Z function7atla$, alia$8
^
t(i$" atla$e$alia$ Z atla$[
\[
A$$et$Mana&er"*rotot;*e"&etAtla$e$ Z function78^
return t(i$" atla$e$[
\[
A$$et$Mana&er"*rotot;*e"&etAtla$B;Alia$ Z function7alia$8
^
if 7 t(i$" atla$e$alia$ 8
return t(i$" atla$e$alia$[
38
8/17/2019 80211ac Wifi for Dummies
39/85
return null[
\[
UUte9ture$
A$$et$Mana&er"*rotot;*e"a++Te9ture Z function7te9ture, alia$8^
t(i$" te9ture$alia$ Z te9ture[
\[
A$$et$Mana&er"*rotot;*e"&etTe9ture$ Z function78
^
return t(i$" te9ture$[
\[
A$$et$Mana&er"*rotot;*e"&etTe9tureB;Alia$ Z function7alia$8
^
if 7 t(i$" te9ture$alia$ 8
return t(i$" te9ture$alia$[
return null[
\[
Maintenant :ue nou$ $avon$ comment &-rer le$ a$$et$, nou$ allon$ a**ren+re . cr-er une $tructure *our le$
mani*uler"
39
8/17/2019 80211ac Wifi for Dummies
40/85
Les bases de l'affichage
` Str,ct,r% ar3or%sc%t% %t Displa=List
CommenRon$ *ar intro+uire la notion +e Di$*la;Li$t, :u
8/17/2019 80211ac Wifi for Dummies
41/85
our en revenir . notre Di$*la;Li$t, $a $tructure $era $imilaire, R.+ :ue nou$ *artiron$ +
8/17/2019 80211ac Wifi for Dummies
42/85
Di$*la;b@ect"*rotot;*e"9 Z O[
Di$*la;b@ect"*rotot;*e"; Z O[
Di$*la;b@ect"*rotot;*e"$cale! Z F[
Di$*la;b@ect"*rotot;*e"$caleX Z F[
Di$*la;b@ect"*rotot;*e"i+t( Z O[
Di$*la;b@ect"*rotot;*e"(ei&(t Z O[
Di$*la;b@ect"*rotot;*e"rotation Z O[Di$*la;b@ect"*rotot;*e"al*(a Z F[
Di$*la;b@ect" to?a+ian$ Z Mat("I U FO[
Di$*la;b@ect"*rotot;*e"ren+er Z function7 conte9t 8
^
conte9t"$ave78[ UU +
8/17/2019 80211ac Wifi for Dummies
43/85
Nou$ allon$ . *r-$ent ac(er +e$ te9ture$, *our cela nou$ allon$ co+er une cla$$e :ue nou$ nommeron$ Bitma*,
cette cla$$e (-ritera +e la cla$$e Di$*la;b@ect, ce :ui fait :u
8/17/2019 80211ac Wifi for Dummies
44/85
for7 var alia$ in +ata 8
^
A$$et$Mana&er"&etIn$tance78"a++Ima&e7+ataalia$,alia$8[
\
UU on cr-e un nouvel atla$
var atla$ Z ne Te9tureAtla$78[
UU on lui a$$ocie une ima&e :ui $era celle *arta&-e *ar toute$ le$ te9ture$ $toc/-e en $on
$ein
atla$"+ata Z A$$et$Mana&er"&etIn$tance78"&etIma&eB;Alia$7&roun+8[
UU on cr-e +eu9 te9ture$ +i-rente$, *ortant un nom +i-rent, a;ant c(acune la m2me ima&e
UU mai$ *a$ le$ m2me$ *ortion$ +
8/17/2019 80211ac Wifi for Dummies
45/85
Di$*la;b@ectContainer"*rotot;*e" con$truct Z function78
^
t(i$"c(il+ren Z ne Arra;78[
\[
Di$*la;b@ectContainer"*rotot;*e"a++C(il+ Z function7c(il+8
^
if 7 c(il+"*arent 8
^
c(il+"*arent"removeC(il+7c(il+8[
\
c(il+"*arent Z t(i$[
t(i$"c(il+ren"*u$(7c(il+8[
\[
Di$*la;b@ectContainer"*rotot;*e"&etC(il+At Z function 7in+e98
^
return t(i$"c(il+renin+e9[\[
Di$*la;b@ectContainer"*rotot;*e"&etC(il+B;Name Z function7name8
^
var c(il+ren Z t(i$"c(il+ren[
var i Z c(il+ren"len&t([
(ile7 GGi Y GF 8
^
if 7 c(il+reni"name ZZ name 8
return c(il+reni[
\
return null[
\[
Di$*la;b@ectContainer"*rotot;*e"a++C(il+At Z function7c(il+, in+e98
^
var c(il+ren Z t(i$"c(il+ren[
var tabF Z t(i$"c(il+ren"$lice7O,in+e98[
var tabJ Z t(i$"c(il+ren"$lice7in+e98[
t(i$"c(il+ren Z tabF"concat7c(il+8"concat7tabJ8[
c(il+"*arent Z t(i$[\[
Di$*la;b@ectContainer"*rotot;*e"removeC(il+At Z function7in+e98
^
var c(il+ Z t(i$"c(il+renin+e9[
if 7 c(il+ 8
c(il+"*arent Z null[
t(i$"c(il+ren"$*lice7in+e9,F8[
45
8/17/2019 80211ac Wifi for Dummies
46/85
\[
Di$*la;b@ectContainer"*rotot;*e"removeC(il+ Z function7c(il+8
^
var in+e9 Z t(i$"c(il+ren"in+e9f 7c(il+8[
if 7 in+e9 Y GF 8
t(i$"c(il+ren"$*lice7in+e9,F8[
c(il+"*arent Z null[
\[
Di$*la;b@ectContainer"*rotot;*e"+ra Z function7 conte9t 8
^
var c(il+ren Z t(i$"c(il+ren[
var i Z O[
var ma9 Z c(il+ren"len&t([
var c(il+ Z null[
for7 [ i ma9[ i'' 8
^
c(il+ Z c(il+reni[
c(il+"ren+er7conte9t8[
\
\[
Comme vou$ *ouve) le con$tater, cette cla$$e (-rite +e Di$*la;b@ect, elle *o$$=+e +onc le$ *ro*ri-t-$ et le$
m-t(o+e$ +
$am*leF"@$
46
8/17/2019 80211ac Wifi for Dummies
47/85
U] oint +
8/17/2019 80211ac Wifi for Dummies
48/85
container"a++C(il+7bm*8[
UU et on a**elle la m-t(o+e ren+er +u Di$*la;b@ectContainer
container"ren+er7conte9t8[
\
Comme vou$ *ouve) le con$tater, le$ +eu9 enfant$, +e$ ob@et$ +e t;*e Bitma*, $ont tout le$ +eu9 +e$$in-$ . l
8/17/2019 80211ac Wifi for Dummies
49/85
\878[
t(i$" con$truct78[
\
Toma(a/"re&i$terCla$$7 Sta&e, Sta&e 8[ Toma(a/"e9ten+7 Sta&e, Di$*la;b@ectContainer 8[
Sta&e" in$tance Z null[
Sta&e"&etIn$tance Z function78
^
if 7 Sta&e" in$tance ZZ null 8
Sta&e" in$tance Z ne Sta&e78[
return Sta&e" in$tance[
\[
Sta&e"*rotot;*e" la$tTime Z O[
Sta&e"*rotot;*e" frameCount Z O[
Sta&e"*rotot;*e" f*$ Z O[
Sta&e"*rotot;*e" canva$ Z null[
Sta&e"*rotot;*e" conte9t Z null[
Sta&e"*rotot;*e" +ebu& Z fal$e[
Sta&e"*rotot;*e"init Z function7canva$8
^
t(i$" canva$ Z canva$[
t(i$" conte9t Z canva$"&etConte9t7J+8[
t(i$" enter6rame78[
\[
Sta&e"*rotot;*e" enter6rame Z function78
^
var curTime Z ne Date78"&etTime78[
var $co*e Z t(i$[
t(i$" frameCount''[
if 7 curTime G t(i$" la$tTime YZ FOOO 8
^
t(i$" f*$ Z t(i$" frameCount[
t(i$" frameCount Z O[
t(i$" la$tTime Z curTime[
\
t(i$" conte9t"clear?ect7O,O,t(i$" canva$"i+t(,t(i$" canva$"(ei&(t8[
t(i$" conte9t"$ave78[
49
8/17/2019 80211ac Wifi for Dummies
50/85
t(i$"ren+er7t(i$" conte9t8[
t(i$" conte9t"re$tore78[
if 7 t(i$" +ebu& ZZ true 8
^
t(i$" conte9t"$ave78[
t(i$" conte9t"be&inat(78[
t(i$" conte9t"llSt;le Z blac/[
t(i$" conte9t"ll?ect7O,O,FOO,KO8[
t(i$" conte9t"ll78[
t(i$" conte9t"llSt;le Z re+[
t(i$" conte9t"font Z
8/17/2019 80211ac Wifi for Dummies
51/85
Cette +erni=re e$t utili$- +e *r-f-rence . la m-t(o+e $etTimeout, en eet, le navi&ateur va la +-clenc(er +e luiG
m2me a*r=$ :ue toute$ o*-ration$ +e +e$$in $oient termin-e$, o*timi$ant ain$i l
8/17/2019 80211ac Wifi for Dummies
52/85
bm*"(ei&(t Z dK[UU""" *ui$ la (auteur
Sta&e"&etIn$tance78"a++C(il+7bm*8[ UU on a@oute l
8/17/2019 80211ac Wifi for Dummies
53/85
Manipuler les objets : transformations et calculs
matriciels.
Le problème des transformations imbriquées.
Le *robl=me +e$ tran$formation$ imbri:u-e$ e$t tr=$ $im*le, il faut :ue le$ tran$formation$ +
A+metton$ :ue +an$ le $c(-ma $uivant>
racine"9 Z O
enfant F"9 Z FO
enfant K"9 Z O
enfant d"9 Z FO
enfant 5"9 Z JO
53
8/17/2019 80211ac Wifi for Dummies
54/85
Si l
8/17/2019 80211ac Wifi for Dummies
55/85
Ce :ui e$t &-nial c
8/17/2019 80211ac Wifi for Dummies
56/85
UU *ublic *ro*ertie$>
U]]
] o$ition 7O, O8 in a K9K ane tran$formation matri9"
] *ro*ert; a
] t;*e Number
]]U
Matri9JD"*rotot;*e"a Z F[
U]]
] o$ition 7O, F8 in a K9K ane tran$formation matri9"
] *ro*ert; b
] t;*e Number
]]U
Matri9JD"*rotot;*e"b Z O[
U]]
] o$ition 7F, O8 in a K9K ane tran$formation matri9"
] *ro*ert; c ] t;*e Number
]]U
Matri9JD"*rotot;*e"c Z O[
U]]
] o$ition 7F, F8 in a K9K ane tran$formation matri9"
] *ro*ert; +
] t;*e Number
]]U
Matri9JD"*rotot;*e"+ Z F[
U]] ] o$ition 7J, O8 in a K9K ane tran$formation matri9"
] *ro*ert; t9
] t;*e Number
]]U
Matri9JD"*rotot;*e"t9 Z O[
U]]
] o$ition 7J, F8 in a K9K ane tran$formation matri9"
] *ro*ert; t;
] t;*e Number
]]U
Matri9JD"*rotot;*e"t; Z O[
UU con$tructor>
U]]
] Initiali)ation met(o+" Can al$o be u$e+ to reinitiali)e t(e in$tance"
] met(o+ initiali)e
] *aram ^Number\ aZF S*ecie$ t(e a *ro*ert; for t(e ne matri9"
56
8/17/2019 80211ac Wifi for Dummies
57/85
] *aram ^Number\ bZO S*ecie$ t(e b *ro*ert; for t(e ne matri9"
] *aram ^Number\ cZO S*ecie$ t(e c *ro*ert; for t(e ne matri9"
] *aram ^Number\ +ZF S*ecie$ t(e + *ro*ert; for t(e ne matri9"
] *aram ^Number\ t9ZO S*ecie$ t(e t9 *ro*ert; for t(e ne matri9"
] *aram ^Number\ t;ZO S*ecie$ t(e t; *ro*ert; for t(e ne matri9"
] return ^Matri9JD\ T(i$ in$tance" $eful for c(ainin& met(o+ call$"
]UMatri9JD"*rotot;*e"initiali)e Z function7a, b, c, +, t9, t;8 ^
t(i$"a Z 7a ZZ null8 F > a[
t(i$"b Z b O[
t(i$"c Z c O[
t(i$"+ Z 7+ ZZ null8 F > +[
t(i$"t9 Z t9 O[
t(i$"t; Z t; O[
return t(i$[
\[
UU *ublic met(o+$>
U]] ] Concatenate$ t(e $*ecie+ matri9 *ro*ertie$ it( t(i$ matri9" All *arameter$ are re:uire+"
] met(o+ *re*en+
] *aram ^Number\ a
] *aram ^Number\ b
] *aram ^Number\ c
] *aram ^Number\ +
] *aram ^Number\ t9
] *aram ^Number\ t;
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"*re*en+ Z function7a, b, c, +, t9, t;8 ^
var t9F Z t(i$"t9[
if 7a WZ F b WZ O c WZ O + WZ F8 ^var aF Z t(i$"a[
var cF Z t(i$"c[
t(i$"a Z aF]a't(i$"b]c[
t(i$"b Z aF]b't(i$"b]+[
t(i$"c Z cF]a't(i$"+]c[
t(i$"+ Z cF]b't(i$"+]+[
\
t(i$"t9 Z t9F]a't(i$"t;]c't9[
t(i$"t; Z t9F]b't(i$"t;]+'t;[
return t(i$[
\[
U]]
] A**en+$ t(e $*ecie+ matri9 *ro*ertie$ it( t(i$ matri9" All *arameter$ are re:uire+"
] met(o+ a**en+
] *aram ^Number\ a
] *aram ^Number\ b
] *aram ^Number\ c
] *aram ^Number\ +
] *aram ^Number\ t9
57
8/17/2019 80211ac Wifi for Dummies
58/85
] *aram ^Number\ t;
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"a**en+ Z function7a, b, c, +, t9, t;8 ^
var aF Z t(i$"a[
var bF Z t(i$"b[
var cF Z t(i$"c[var +F Z t(i$"+[
t(i$"a Z a]aF'b]cF[
t(i$"b Z a]bF'b]+F[
t(i$"c Z c]aF'+]cF[
t(i$"+ Z c]bF'+]+F[
t(i$"t9 Z t9]aF't;]cF't(i$"t9[
t(i$"t; Z t9]bF't;]+F't(i$"t;[
return t(i$[
\[
U]] ] re*en+$ t(e $*ecie+ matri9 it( t(i$ matri9"
] met(o+ *re*en+Matri9
] *aram ^Matri9JD\ matri9
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"*re*en+Matri9 Z function7matri98 ^
t(i$"*re*en+7matri9"a, matri9"b, matri9"c, matri9"+, matri9"t9, matri9"t;8[
return t(i$[
\[
U]]
] A**en+$ t(e $*ecie+ matri9 it( t(i$ matri9"
] met(o+ a**en+Matri9
] *aram ^Matri9JD\ matri9
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"a**en+Matri9 Z function7matri98 ^
t(i$"a**en+7matri9"a, matri9"b, matri9"c, matri9"+, matri9"t9, matri9"t;8[
return t(i$[
\[
U]]
] %enerate$ matri9 *ro*ertie$ from t(e $*ecie+ +i$*la; ob@ect tran$form *ro*ertie$, an+
*re*en+$ t(em it( t(i$ matri9"
] 6or e9am*le, ;ou can u$e t(i$ to &enerate a matri9 from a +i$*la; ob@ect> var mt9 Z ne Matri9JD78[
] mt9"*re*en+Tran$form7o"9, o";, o"$cale!, o"$caleX, o"rotation8[
] met(o+ *re*en+Tran$form
] *aram ^Number\ 9
] *aram ^Number\ ;
] *aram ^Number\ $cale!
] *aram ^Number\ $caleX
] *aram ^Number\ rotation
58
8/17/2019 80211ac Wifi for Dummies
59/85
] *aram ^Number\ $/e!
] *aram ^Number\ $/eX
] *aram ^Number\ re&! *tional"
] *aram ^Number\ re&X *tional"
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"*re*en+Tran$form Z function79, ;, $cale!, $caleX, rotation, $/e!, $/eX, re&!, re&X8 ^
if 7rotationKO8 ^
var r Z rotation]Matri9JD"DE%T?AD[
var co$ Z Mat("co$7r8[
var $in Z Mat("$in7r8[
\ el$e ^
co$ Z F[
$in Z O[
\
if 7re&! re&X8 ^
UU a**en+ t(e re&i$tration o$et>t(i$"t9 GZ re&![ t(i$"t; GZ re&X[
\
if 7$/e! $/eX8 ^
UU TD> can t(i$ be combine+ into a $in&le *re*en+ o*eration
$/e! ]Z Matri9JD"DE%T?AD[
$/eX ]Z Matri9JD"DE%T?AD[
t(i$"*re*en+7co$]$cale!, $in]$cale!, G$in]$caleX, co$]$caleX, O, O8[
t(i$"*re*en+7Mat("co$7$/eX8, Mat("$in7$/eX8, GMat("$in7$/e!8,
Mat("co$7$/e!8, 9, ;8[
\ el$e ^
t(i$"*re*en+7co$]$cale!, $in]$cale!, G$in]$caleX, co$]$caleX, 9, ;8[
\
return t(i$[\[
U]]
] %enerate$ matri9 *ro*ertie$ from t(e $*ecie+ +i$*la; ob@ect tran$form *ro*ertie$, an+
a**en+$ t(em it( t(i$ matri9"
] 6or e9am*le, ;ou can u$e t(i$ to &enerate a matri9 from a +i$*la; ob@ect> var mt9 Z ne
Matri9JD78[
] mt9"a**en+Tran$form7o"9, o";, o"$cale!, o"$caleX, o"rotation8[
] met(o+ a**en+Tran$form
] *aram ^Number\ 9
] *aram ^Number\ ;
] *aram ^Number\ $cale! ] *aram ^Number\ $caleX
] *aram ^Number\ rotation
] *aram ^Number\ $/e!
] *aram ^Number\ $/eX
] *aram ^Number\ re&! *tional"
] *aram ^Number\ re&X *tional"
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
59
8/17/2019 80211ac Wifi for Dummies
60/85
Matri9JD"*rotot;*e"a**en+Tran$form Z function79, ;, $cale!, $caleX, rotation, $/e!, $/eX,
re&!, re&X8 ^
if 7rotationKO8 ^
var r Z rotation]Matri9JD"DE%T?AD[
var co$ Z Mat("co$7r8[
var $in Z Mat("$in7r8[
\ el$e ^
co$ Z F[
$in Z O[
\
if 7$/e! $/eX8 ^
UU TD> can t(i$ be combine+ into a $in&le a**en+
$/e! ]Z Matri9JD"DE%T?AD[
$/eX ]Z Matri9JD"DE%T?AD[
t(i$"a**en+7Mat("co$7$/eX8, Mat("$in7$/eX8, GMat("$in7$/e!8,
Mat("co$7$/e!8, 9, ;8[
t(i$"a**en+7co$]$cale!, $in]$cale!, G$in]$caleX, co$]$caleX, O, O8[\ el$e ^
t(i$"a**en+7co$]$cale!, $in]$cale!, G$in]$caleX, co$]$caleX, 9, ;8[
\
if 7re&! re&X8 ^
UU *re*en+ t(e re&i$tration o$et>
t(i$"t9 GZ re&!]t(i$"a're&X]t(i$"c[
t(i$"t; GZ re&!]t(i$"b're&X]t(i$"+[
\
return t(i$[
\[
U]]
] A**lie$ a rotation tran$formation to t(e matri9"
] met(o+ rotate
] *aram ^Number\ an&le T(e an&le in ra+ian$" To u$e +e&ree$, multi*l; b;
co+eYMat("IUFOUco+eY"
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"rotate Z function7an&le8 ^
var co$ Z Mat("co$7an&le8[
var $in Z Mat("$in7an&le8[
var aF Z t(i$"a[
var cF Z t(i$"c[var t9F Z t(i$"t9[
t(i$"a Z aF]co$Gt(i$"b]$in[
t(i$"b Z aF]$in't(i$"b]co$[
t(i$"c Z cF]co$Gt(i$"+]$in[
t(i$"+ Z cF]$in't(i$"+]co$[
t(i$"t9 Z t9F]co$Gt(i$"t;]$in[
60
8/17/2019 80211ac Wifi for Dummies
61/85
t(i$"t; Z t9F]$in't(i$"t;]co$[
return t(i$[
\[
U]]
] A**lie$ a $/e tran$formation to t(e matri9"
] met(o+ $/e
] *aram ^Number\ $/e! T(e amount to $/e (ori)ontall; in +e&ree$"
] *aram ^Number\ $/eX T(e amount to $/e verticall; in +e&ree$"
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]U
Matri9JD"*rotot;*e"$/e Z function7$/e!, $/eX8 ^
$/e! Z $/e!]Matri9JD"DE%T?AD[
$/eX Z $/eX]Matri9JD"DE%T?AD[
t(i$"a**en+7Mat("co$7$/eX8, Mat("$in7$/eX8, GMat("$in7$/e!8, Mat("co$7$/e!8,
O, O8[
return t(i$[
\[
U]]
] A**lie$ a $cale tran$formation to t(e matri9"
] met(o+ $cale
] *aram ^Number\ 9 T(e amount to $cale (ori)ontall;
] *aram ^Number\ ; T(e amount to $cale verticall;
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"$cale Z function79, ;8 ^
t(i$"a ]Z 9[
t(i$"+ ]Z ;[
t(i$"c ]Z 9[
t(i$"b ]Z ;[
t(i$"t9 ]Z 9[t(i$"t; ]Z ;[
return t(i$[
\[
U]]
] Tran$late$ t(e matri9 on t(e 9 an+ ; a9e$"
] met(o+ tran$late
] *aram ^Number\ 9
] *aram ^Number\ ;
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"tran$late Z function79, ;8 ^t(i$"t9 'Z 9[
t(i$"t; 'Z ;[
return t(i$[
\[
U]]
] Set$ t(e *ro*ertie$ of t(e matri9 to t(o$e of an i+entit; matri9 7one t(at a**lie$ a null
tran$formation8"
61
8/17/2019 80211ac Wifi for Dummies
62/85
] met(o+ i+entit;
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"i+entit; Z function78 ^
t(i$"a Z t(i$"+ Z F[
t(i$"b Z t(i$"c Z t(i$"t9 Z t(i$"t; Z O[
return t(i$[\[
U]]
] Invert$ t(e matri9, cau$in& it to *erform t(e o**o$ite tran$formation"
] met(o+ invert
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"invert Z function78 ^
var aF Z t(i$"a[
var bF Z t(i$"b[
var cF Z t(i$"c[
var +F Z t(i$"+[var t9F Z t(i$"t9[
var n Z aF]+FGbF]cF[
t(i$"a Z +FUn[
t(i$"b Z GbFUn[
t(i$"c Z GcFUn[
t(i$"+ Z aFUn[
t(i$"t9 Z 7cF]t(i$"t;G+F]t9F8Un[
t(i$"t; Z G7aF]t(i$"t;GbF]t9F8Un[
return t(i$[
\[
U]]
] ?eturn$ true if t(e matri9 i$ an i+entit; matri9"
] met(o+
i$I+entit;
] return ^Boolean\
]]U
Matri9JD"*rotot;*e"i$I+entit; Z function78 ^
return t(i$"t9 ZZ O t(i$"t; ZZ O t(i$"a ZZ F t(i$"b ZZ O t(i$"c ZZ O
t(i$"+ ZZ F[
\[
U]]
] Tran$form$ a *oint accor+in& to t(i$ matri9" ] met(o+ tran$formoint
] *aram ^Number\ 9 T(e 9 com*onent of t(e *oint to tran$form"
] *aram ^Number\ ; T(e ; com*onent of t(e *oint to tran$form"
] *aram ^oint b@ect\ *t An ob@ect to co*; t(e re$ult into" If omitte+ a &eneric ob@ect
it( 9U; *ro*ertie$ ill be returne+"
] return ^oint\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]]U
Matri9JD"*rotot;*e"tran$formoint Z function79, ;, *t8 ^
62
8/17/2019 80211ac Wifi for Dummies
63/85
*t Z *t^\[
*t"9 Z 9]t(i$"a';]t(i$"c't(i$"t9[
*t"; Z 9]t(i$"b';]t(i$"+'t(i$"t;[
return *t[
\[
U]]
] Decom*o$e$ t(e matri9 into tran$form *ro*ertie$ 79, ;, $cale!, $caleX, an+ rotation8" Note
t(at t(i$ t(e$e value$
] ma; not matc( t(e tran$form *ro*ertie$ ;ou u$e+ to &enerate t(e matri9, t(ou&( t(e; ill
*ro+uce t(e $ame vi$ual
] re$ult$"
] met(o+ +ecom*o$e
] *aram ^b@ect\ tar&et T(e ob@ect to a**l; t(e tran$form *ro*ertie$ to" If null, t(en a
ne ob@ect ill be returne+"
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]U
Matri9JD"*rotot;*e"+ecom*o$e Z function7tar&et8 ^
if 7tar&et ZZ null8 ^ tar&et Z ^\[ \
tar&et"9 Z t(i$"t9[
tar&et"; Z t(i$"t;[
tar&et"$cale! Z Mat("$:rt7t(i$"a ] t(i$"a ' t(i$"b ] t(i$"b8[
tar&et"$caleX Z Mat("$:rt7t(i$"c ] t(i$"c ' t(i$"+ ] t(i$"+8[
var $/e! Z Mat("atanJ7Gt(i$"c, t(i$"+8[
var $/eX Z Mat("atanJ7t(i$"b, t(i$"a8[
if 7$/e! ZZ $/eX8 ^
tar&et"rotation Z $/eXUMatri9JD"DE%T?AD[
if 7t(i$"a O t(i$"+ YZ O8 ^tar&et"rotation 'Z 7tar&et"rotation Z O8 FO > GFO[
\
tar&et"$/e! Z tar&et"$/eX Z O[
\ el$e ^
tar&et"$/e! Z $/e!UMatri9JD"DE%T?AD[
tar&et"$/eX Z $/eXUMatri9JD"DE%T?AD[
\
return tar&et[
\[
U]]
] ?einitiali)e$ all matri9 *ro*ertie$ to t(o$e $*ecie+"
] met(o+ reinitiali)e ] *aram ^Number\ aZF S*ecie$ t(e a *ro*ert; for t(e ne matri9"
] *aram ^Number\ bZO S*ecie$ t(e b *ro*ert; for t(e ne matri9"
] *aram ^Number\ cZO S*ecie$ t(e c *ro*ert; for t(e ne matri9"
] *aram ^Number\ +ZF S*ecie$ t(e + *ro*ert; for t(e ne matri9"
] *aram ^Number\ t9ZO S*ecie$ t(e t9 *ro*ert; for t(e ne matri9"
] *aram ^Number\ t;ZO S*ecie$ t(e t; *ro*ert; for t(e ne matri9"
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
63
8/17/2019 80211ac Wifi for Dummies
64/85
]U
Matri9JD"*rotot;*e"reinitiali)e Z function7a, b, c, +, t9, t;8 ^
t(i$"initiali)e7a,b,c,+,t9,t;8[
return t(i$[
\[
U]]
] Co*ie$ all *ro*ertie$ from t(e $*ecie+ matri9 to t(i$ matri9"
] met(o+ co*;
] *aram ^Matri9JD\ matri9 T(e matri9 to co*; *ro*ertie$ from"
] return ^Matri9JD\ T(i$ matri9" $eful for c(ainin& met(o+ call$"
]U
Matri9JD"*rotot;*e"co*; Z function7matri98 ^
return t(i$"reinitiali)e7matri9"a, matri9"b, matri9"c, matri9"+, matri9"t9, matri9"t;8[
\[
U]]
] ?eturn$ a clone of t(e Matri9JD in$tance"
] met(o+ clone ] return ^Matri9JD\ a clone of t(e Matri9JD in$tance"
]]U
Matri9JD"*rotot;*e"clone Z function78 ^
return 7ne Matri9JD788"co*;7t(i$8[
\[
U]]
] ?eturn$ a $trin& re*re$entation of t(i$ ob@ect"
] met(o+ toStrin&
] return ^Strin&\ a $trin& re*re$entation of t(e in$tance"
]]U
Matri9JD"*rotot;*e"toStrin& Z function78 ^
return Matri9JD 7aZ't(i$"a' bZ't(i$"b' cZ't(i$"c' +Z't(i$"+'
t9Z't(i$"t9' t;Z't(i$"t;'8[
\[
Matri9JD"i+entit; Z ne Matri9JD78[
Maintenant nou$ +i$*o$on$ +e notre *ro*re cla$$e *our mani*uler +e$ matrice$, voici $on
im*l-mentation au $ein +e la cla$$e Di$*la;b@ect"
UU nouvelle m-t(o+e ren+er
Di$*la;b@ect"*rotot;*e"ren+er Z function7 conte9t 8
^
t(i$"u*+ate78[
if 7 t(i$"vi$ible ZZ fal$e 8
return[
var mat Z t(i$"matri9[
64
8/17/2019 80211ac Wifi for Dummies
65/85
conte9t"$ave78[
conte9t"&lobalAl*(a Z t(i$"al*(a[
conte9t"tran$form7mat"a,mat"b,mat"c,mat"+,mat"t9,mat"t;8[
t(i$"+ra7conte9t8[
conte9t"re$tore78[
\[
UUM-t(o+e u*+ate, :ui nou$ *ermet +
8/17/2019 80211ac Wifi for Dummies
66/85
Mo!8l% 'v'%+%ti%l %t !%si$ patt%r
Pourquoi utiliser des éénements ?
CommenRon$ +-@. *ar +-nir ce :ue nou$ enten+on$ *ar un -venement, +an$ notre moteur il $
8/17/2019 80211ac Wifi for Dummies
67/85
EventDi$*atc(er"*rotot;*e"*arent Z null[
EventDi$*atc(er"*rotot;*e" li$tener$ Z null[
EventDi$*atc(er"*rotot;*e"a++EventLi$tener Z function7 t;*e, $co*e, callbac/, u$eCa*ture 8
^ t(i$" li$tener$ Z t(i$" li$tener$ ne Arra;78[
var ob@ Z ne b@ect78[
ob@"t;*e Z t;*e[
ob@"$co*e Z $co*e[
ob@"callbac/ Z callbac/[
ob@"u$eCa*ture Z u$eCa*ture[
t(i$" li$tener$"*u$(7ob@8[
\[
EventDi$*atc(er"*rotot;*e"(a$EventLi$tener Z function7t;*e8
^
if 7 t(i$" li$tener$ ZZ null 8
return fal$e[
var ob@ Z ne b@ect78[
var i Z t(i$" li$tener$"len&t([
(ile7 GGi Y GF 8
^
ob@ Z t(i$" li$tener$i[
if 7 ob@"t;*e ZZ t;*e 8
return true[
\
\[
EventDi$*atc(er"*rotot;*e"+i$*atc(Event Z function7 event 8^
t(i$" li$tener$ Z t(i$" li$tener$ ne Arra;78[
var ob@ Z ne b@ect78[
var i Z t(i$" li$tener$"len&t([
if 7 event"tar&et ZZ null 8
event"tar&et Z t(i$[
event"currentTar&et Z t(i$[
(ile7 GGi Y GF 8
^ ob@ Z t(i$" li$tener$i[
if 7 ob@"t;*e ZZ event"t;*e 8
^
if 7 event"tar&et WZ t(i$ ob@"u$eCa*ture ZZ fal$e 8
^
continue[
\
67
8/17/2019 80211ac Wifi for Dummies
68/85
ob@"callbac/"a**l;7 ob@"$co*e, event 8[
\
\
if 7 event"bubble$ ZZ true t(i$"*arent WZ null t(i$"*arent"+i$*atc(Event 8^
t(i$"*arent"+i$*atc(Event7event8[
\
\[
EventDi$*atc(er"*rotot;*e"removeEventLi$tener Z function7 t;*e, $co*e, callbac/, u$eCa*ture 8
^
var li$tener Z t(i$"&etEventLi$tener7t;*e8[
(ile7 li$tener WZ null 8
^
var ob@ Z ne b@ect78[
var i Z t(i$" li$tener$"len&t([var arr Z ne Arra;78[
(ile7 GGi Y GF 8
^
ob@ Z t(i$" li$tener$i[
if 7 ob@"t;*e WZ li$tener"t;*e ob@"$co*e WZ $co*e ob@"callbac/ WZ callbac/
ob@"u$eCa*ture WZ u$eCa*ture 8
return arr"*u$(7ob@8[
\
t(i$" li$tener$ Z arr[
li$tener Z t(i$"&etEventLi$tener7t;*e8[\
\[
Event"@$
function Event7t;*e, bubble$, cancelable8
^
t(i$"t;*e Z t;*e[
t(i$"cancelable Z cancelable[
t(i$"bubble$ Z bubble$[
\
Toma(a/"re&i$terCla$$7 Event, Event 8[
Event"*rotot;*e"t;*e Z null[
Event"*rotot;*e"bubble$ Z fal$e[
Event"*rotot;*e"cancelable Z true[
Event"*rotot;*e"+ata Z null[
Event"*rotot;*e"tar&et Z null[
68
8/17/2019 80211ac Wifi for Dummies
69/85
Event"*rotot;*e"currentTar&et Z null[
Event"*rotot;*e"$to*ro*a&ation Z function78
^
if 7 t(i$"cancelable ZZ true 8
t(i$"bubble$ Z fal$e[
\[
UUcon$tante$
Event"ADDED Z a++e+[
Event"ADDEDTSTA%E Z a++e+ToSta&e[
Event"ENTE?6?AME Z enter6rame[
Event"?EMVED Z remove+[
Event"?EMVED6?MSTA%E Z remove+6romSta&e[
Maintenant, nou$ *ouvon$ faire (-riter notre cla$$e Di$*la;b@ect +e la cla$$e EventDi$*atc(er, *ar con$-:uent
tout no$ Di$*la;b@ect $eront +-$ormai$ +e$ EventDi$*atc(er"
our ce faire, on +oit a@outer la li&ne $uivante . notre cla$$e Di$*la;b@ect
+omaha9 .etend( :Displa3Eb!ect:0 :ventDispatcher: )/
Comme vou$ *ouve) le con$tater, notre cla$$e Event *o$$=+e :uel:ue$ con$tante$ *r-+-nie$,
Event"ADDED *ar e9em*le" Cette con$tante +-nit le t;*e +e l
8/17/2019 80211ac Wifi for Dummies
70/85
\[
Di$*la;b@ectContainer"*rotot;*e"removeC(il+At Z function7in+e98
^
var c(il+ Z t(i$"c(il+renin+e9[
if 7 c(il+ 8
c(il+"*arent Z null[
t(i$"c(il+ren"$*lice7in+e9,F8[
c(il+"+i$*atc(Event7 ne Event7Event"?EMVED, true, true8 8[
\[
Di$*la;b@ectContainer"*rotot;*e"removeC(il+ Z function7c(il+8
^
var in+e9 Z t(i$"c(il+ren"in+e9f 7c(il+8[
if 7 in+e9 Y GF 8
t(i$"c(il+ren"$*lice7in+e9,F8[
c(il+"*arent Z null[c(il+"+i$*atc(Event7 ne Event7Event"?EMVED, true, true8 8[
\[
Voil., maintenant vou$ *ouve) +-clenc(er une action +=$ :u
8/17/2019 80211ac Wifi for Dummies
71/85
ollisions et é!énements utilisateurs
Comment détecter les éénements souris ?
La +-tection +e$ -venement$ $ouri$ e$t in+i$*en$able +=$ l
8/17/2019 80211ac Wifi for Dummies
72/85
"mplémentation d$une méthode hitTest sur un &ispla'(b#ect
Nou$ allon$ im*l-menter une m-t(o+e nomm-e (itTe$t $ur notre cla$$e Di$*la;b@ect, celleGci aura *our rle +e
nou$ +ire $i oui ou non le *oint :u
8/17/2019 80211ac Wifi for Dummies
73/85
(ile7 current WZ null 8
^
current"u*+ate78[
mat"*re*en+Matri97current"matri9 8[
current Z current"*arent[
\
t(i$" concatene+Matri9 Z mat[
return t(i$" concatene+Matri9[
\[
Di$*la;b@ect"*rotot;*e"localTo%lobal Z function79,;8
^
var matri9 Z t(i$"&etConcatene+Matri978[
var *t Z matri9"tran$formoint79,;8[
return ne oint7*t"9,*t";8[
\[
Di$*la;b@ect"*rotot;*e"&lobalToLocal Z function79,;8
^
var matri9 Z t(i$"&etConcatene+Matri978"clone78"invert78[
var *t Z matri9"tran$formoint79,;8[
return ne oint7*t"9,*t";8[
\[
Di$*la;b@ect"*rotot;*e"(itTe$t Z function79,;8
^
if 7 t(i$"matri9 ZZ null 8
t(i$"u*+ate78[
var *tF Z t(i$"&lobalToLocal79,;8[
if 7 *tF"9 O *tF"9 Y t(i$"i+t( *tF"; O *tF"; Y t(i$"(ei&(t 8
return fal$e[
el$e
return true[
\[
Maintenant, nou$ *ouvon$ +-tecter $i oui ou non, un Di$*la;b@ect e$t cli:u- ou non encore fautGil +-terminer $i +e
Di$*la;b@ect ne $e $itue *a$ en +e$$ou$ +
8/17/2019 80211ac Wifi for Dummies
74/85
Nou$ *ouvon$ *roc-+er ain$i *our tou$ le$ -venement$ $ouri$"
Voici le co+e . a@outer . la cla$$e Sta&e>
Sta&e"*rotot;*e"init Z function7canva$8
^
var $co*e Z t(i$[
var callbac/ Z function7event8^
$co*e" mou$eHan+ler7event8[
\[
t(i$" canva$ Z canva$[
t(i$" conte9t Z canva$"&etConte9t7J+8[
t(i$" canva$"a++EventLi$tener7clic/,callbac/8[
t(i$" canva$"a++EventLi$tener7mou$emove,callbac/8[
t(i$" canva$"a++EventLi$tener7mou$e+on,callbac/8[
t(i$" canva$"a++EventLi$tener7mou$eu*,callbac/8[
t(i$" enter6rame78[\[
Sta&e"*rotot;*e" mou$eHan+ler Z function7event8
^
var boun+$ Z t(i$" canva$"&etBoun+in&Client?ect78[
var 9 Z event"client! G boun+$"left[
var ; Z event"clientX G boun+$"to*[
var activeC(il+ Z t(i$" &etMou$eb@ectn+er79,;,t(i$8[
var mou$eEvent Z null[
var i Z O[
t(i$"mou$e! Z 9[
t(i$"mou$eX Z ;[
if 7 event"t;*e ZZ mou$emove t(i$" la$tActiveC(il+ WZ activeC(il+ 8
^
if 7 activeC(il+ WZ null 8
^
mou$eEvent Z Mou$eEvent"fromNativeMou$eEvent7event,true,true,9,;8[
mou$eEvent"t;*e Z Mou$eEvent"?LLVE?[
activeC(il+"+i$*atc(Event7mou$eEvent8[
\
if 7 t(i$" la$tActiveC(il+ WZ null 8
^mou$eEvent Z Mou$eEvent"fromNativeMou$eEvent7event,true,true,9,;8[
mou$eEvent"t;*e Z Mou$eEvent"?LLT[
t(i$" la$tActiveC(il+"+i$*atc(Event7mou$eEvent8[
\
\
el$e
^
74
8/17/2019 80211ac Wifi for Dummies
75/85
if 7 activeC(il+ WZ null 8
^
mou$eEvent Z Mou$eEvent"fromNativeMou$eEvent7event,true,true,9,;8[
activeC(il+"+i$*atc(Event7mou$eEvent8[
\
\
t(i$" la$tActiveC(il+ Z activeC(il+[
\[
Sta&e"*rotot;*e" &etMou$eb@ectn+er Z function79,;,container8
^
var un+er Z null[
var c(il+ren Z container"c(il+ren[
var i Z c(il+ren"len&t([
var c(il+ Z null[
(ile7 GGi Y GF 8
^c(il+ Z c(il+reni[
if 7 c(il+"c(il+ren 8
^
un+er Z t(i$" &etMou$eb@ectn+er79,;,c(il+8[
if 7 un+er WZ null 8
return un+er[
\
el$e if 7 c(il+"mou$eEnable+ ZZ true c(il+"(itTe$t79,;8 ZZ true 8
^
return c(il+[
\\
return null[
\[
Et le co+e la cla$$e Mou$eEvent, :ui -ten+ notre cla$$e Event +e ba$e"
function Mou$eEvent78^\
Toma(a/"re&i$terCla$$7 Mou$eEvent, Mou$eEvent 8[
Toma(a/"e9ten+7 Mou$eEvent, Event 8[
function Mou$eEvent7t;*e, bubble$, cancelable8
^
t(i$"t;*e Z t;*e[
t(i$"cancelable Z cancelable[
t(i$"bubble$ Z bubble$[
75
8/17/2019 80211ac Wifi for Dummies
76/85
\
Mou$eEvent"fromNativeMou$eEvent Z function7event,bubble$,cancelable,9,;8
^
var t;*e Z [
var m$event Z null[
$itc(7 event"t;*e 8
^
ca$e clic/> t;*e Z Mou$eEvent"CLIC [ brea/[
ca$e mou$emove> t;*e Z Mou$eEvent"MSEMVE[ brea/[
ca$e mou$eu*> t;*e Z Mou$eEvent"MSE[ brea/[
ca$e mou$e+on> t;*e Z Mou$eEvent"MSEDN[ brea/[
\
m$event Z ne Mou$eEvent7t;*e,bubble$,cancelable8[
m$event"$ta&e! Z 9[
m$event"$ta&eX Z ;[
return m$event[\[
Mou$eEvent"CLIC Z clic/[
Mou$eEvent"?LLVE? Z rollver[
Mou$eEvent"?LLT Z rollut[
Mou$eEvent"MSEMVE Z mou$eMove[
Mou$eEvent"MSEDN Z mou$e*[
Mou$eEvent"MSE Z mou$eDon[
Nou$ $omme$ +onc ca*able$ +e +i$*atc(er +e$ -v-nement$ $ouri$, @e vou$ lai$$e +-couvrir le$ +-tail$ +e
l
8/17/2019 80211ac Wifi for Dummies
77/85
Les animations
Comment animer Nou$ avon$ +-@. abor+- bri=vement le $u@et en *arlant +e$ $*rite$(eet$, nou$ allon$ maintenanta**rofon+ir le $u@et" Le but e$t +
8/17/2019 80211ac Wifi for Dummies
78/85
MovieCli*"*rotot;*e"*la; Z function78
^
Sta&e"&etIn$tance78"a++EventLi$tener7Event"ENTE?6?AME, t(i$,t(i$" enter6rameHan+ler8[
\[
MovieCli*"*rotot;*e"$to* Z function78
^
Sta&e"&etIn$tance78"removeEventLi$tener7Event"ENTE?6?AME,
t(i$,t(i$" enter6rameHan+ler8[
\[
Comme vou$ *ouve) le con$tater, nou$ +i$*o$on$>
` D
8/17/2019 80211ac Wifi for Dummies
79/85
Les filtres
*ase des filtres aec la balise canas
A**li:uer un ltre e$t une o*-ration *lutt triviale avec canva$, en eet le$ -ta*e$ $ont a$$e) $im*le$ et *eu
nombreu$e$>
` n r-cu*=re le$ *i9el$ +u canva$ . l
8/17/2019 80211ac Wifi for Dummies
80/85
Di$*la;b@ect"*rotot;*e" a**l;6ilter$ Z function78
^
var canva$ Z +ocument"createElement7canva$8[
var conte9t Z canva$"&etConte9t7J+8[
canva$"i+t( Z t(i$"i+t([
canva$"(ei&(t Z t(i$"(ei&(t[
t(i$"+ra7conte9t8[
var i Z O[
var ma9 Z t(i$"lter$"len&t([
var lter Z null[
for7 [ i ma9[ i'' 8
^
lter Z t(i$"lter$i[
lter"a**l;7canva$,conte9t8[
\
return canva$[\[
Di$*la;b@ect"*rotot;*e"ren+er Z function7 conte9t 8
^
t(i$"u*+ate78[
if 7 t(i$"vi$ible ZZ fal$e 8
return[
var mat Z t(i$"matri9[
conte9t"$ave78[
conte9t"&lobalAl*(a Z t(i$"al*(a[conte9t"tran$form7mat"a,mat"b,mat"c,mat"+,mat"t9,mat"t;8[
if 7 t(i$"lter$ WZ null 8
^
UU on a**elle une nouvelle m-t(o+e a**l;6ilter$
var buer Z t(i$" a**l;6ilter$78[
conte9t"+raIma&e7canva$, O, O, buer"i+t(, buer"(ei&(t 8[
\
el$e
^
t(i$"+ra7conte9t8[
\
conte9t"re$tore78[
\[
80
8/17/2019 80211ac Wifi for Dummies
81/85
Nou$ avon$ vu comment im*l-menter le co+e $ur la cla$$e Di$*la;b@ect mai$ $i vou$ faite$ bien attention, vou$
verre) :ue la m-t(o+e apppl3-ilters boucle $ur un tableau +
8/17/2019 80211ac Wifi for Dummies
82/85
t(i$" conte9t Z conte9t[
t(i$"*roce$$78[
\[
Et en ca+eau, voici une cla$$e nomm-e %ra;Scale6ilter, :ui (-rite +e notre cla$$e i9el6ilter
cla$$e %ra;Scale6ilter>
function %ra;Scale6ilter78^\
Toma(a/"re&i$terCla$$7 %ra;Scale6ilter, %ra;Scale6ilter 8[
Toma(a/"e9ten+7 %ra;Scale6ilter, i9el6ilter 8[
%ra;Scale6ilter"*rotot;*e"*roce$$ Z function78
^
var *i9el$ Z t(i$"&eti9el$78[
var +ata Z *i9el$"+ata[
for 7var iZO[ i+ata"len&t([ i'Zd8
^var r Z +atai[
var & Z +atai'F[
var b Z +atai'J[
var v Z O"JFJ]r ' O"QF5J]& ' O"OQJJ]b[
+atai Z +atai'F Z +atai'J Z v[
\
t(i$"$eti9el$7*i9el$8[
\[
onclusion
Voil., nou$ avon$ *a$$-e en revue l
8/17/2019 80211ac Wifi for Dummies
83/85
"os formations #$ML% #$ML&% SS an!as
Formation HTML & CSS, des bases à la maîtrise
Décou!re le programme d'initiation #$ML et SS et crée des sites internet au normes du *eb.
Formation HTML5 & CSS
Décou!re toutes les nou!eautés du #$ML& (nou!elles balises% microdonnées% meilleur référencement% !idéo et audio sans +lash%
...) et celles du SS, (sélecteurs% graphisme a!ancé% gestion des médias% transformations% animations% media -ueries% responsi!e
design% ...)
Formation HTML5 & Can!as
pprene / construire !otre propre moteur d'affichage / l'aide des toutes nou!elles fonctionnalités du #$ML& et de la balise
an!as.
Formation "es#onsi!e $eb Design
Maitriser le 0esponsi!e 1eb Design et prépare !os sites pour -u'ils soient !éritablement multiplateformes : iphone% ipad%
tablettes% t!% pc% mac
Formation %a!ascri#t & HTML5 D!elo##eur "'( ) *i!eau +
+ormation #$ML& : Maitrise le #$ML& et dé!eloppe des applications riches en html&% ja!ascript% css,. rée des *ebpp pour
terminau mobiles i2hone% ndroid etc.
Formation %a!ascri#t & HTML5 D!elo##eur "'( ) *i!eau
+ormation #$ML& : De!ene epert #$ML& et dé!eloppe des applications riches en html&% ja!ascript% css, a!ec la formation
perfectionnement #$ML&. rée des *ebpp pour terminau mobiles i2hone% ndroid% etc.
83
http://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Chhttp://var/www/apps/conversion/tmp/scratch_2/%5Ch
8/17/2019 80211ac Wifi for Dummies
84/85
8/17/2019 80211ac Wifi for Dummies
85/85
Nicola$ Le&ran+