Share
Astăzi vom replica această aplicație excelentă bazată pe Flash. Dar, în loc să rămânem la un bun Flash Flash, vom folosi elementul de panza și unele elemente jQuery UI spiffy pentru a obține aceleași funcționalități. Intrigat? Hai să ne aruncăm!
Aplicația pe care încercăm să o replicăm:
Cum arată aplicația noastră:
Ținând cont de faptul că nu trebuie să ratați factorul de dificultate al acestui tutorial, ne vom limita funcționalitatea la cea a aplicației legale originale. Astfel, lista noastră de funcții solicitate arată astfel:
În plus față de toate acestea, așa cum am menționat mai sus, dorim să facem toate acestea folosind doar elementul de panza.
Marcajul aplicației noastre arată astfel:
Net Tuts - Distracție cu panza: O aplicație de desen de Siddharth 
În afară de elementele generice DIV care ne ajută în poziționare, există câteva puncte pe care trebuie să le notați. Primul element este panza. Adăugarea este o chestiune de includere simplu Etichete. Textul din interiorul etichetelor este conținut nou și nu va fi afișat pe un browser acceptat.
Un simplu Selectați elementul ne permite să alegem un instrument de alegere.
Următoarele sunt containerele pentru elementele glisante. Toate cele 4 dintre ele necesită un ID separat. Vom analiza detaliat un pic mai târziu.
În cele din urmă ancoră Elementul deține legătura pentru a șterge panza.
Dacă sunteți preocupat de validarea codului, vă rugăm să nu uitați să utilizați un validator HTML 5. Validatorii actuale nu suntem făcuți în minte cu elementul de panza.
/ * Stil de nivel de aplicație * / corp fundal: # E4E4E4 url (http://tutsplus.s3.amazonaws.com/tutspremium/web-development/012_PaintshopPaint/images/bg.png) repeat-x; font-family: Verdana; a text-decoration: none; color: # 000; #paint graniță: 1px solid # 000; fundal: #fff; . left (float: left; padding: 20px; .box frontieră: 1px solid # 000; culoare de fundal: #EEE; margin-bottom: 10px; padding: 10px; #tools width: 150px; #red, #green, #blue, #width width: 300px; margine: 15 pixeli; #swatch width: 120px; înălțime: 100px; margin-stânga: 110px; fundal-imagine: nici unul; #red .ui-glisor-interval background: # ef2929; #green .ui-slider-range fundal: # 8ae234; #blue .ui-slider-range background: # 729fcf; #width .ui-glisor-interval background: # 8881be;
Modelarea manuală a aplicației noastre este în mare măsură limitată la plutirea containerelor noastre pentru a le poziționa și pentru a modela glisierele. Din fericire, o descărcare personalizată a bibliotecii jQuery UI vă permite să setați o temă predefinită pentru widget-uri sau să creați propria temă folosind Theme Roller. Aici menținem una dintre temele predefinite: Smoothness. Adăugați stilurile CSS la fișierul tematic "CSS sau creați un fișier CSS separat cu definițiile de mai sus. Depinde de tine. În ceea ce privește CSS-ul nostru în sine, nu se întâmplă nimic acolo. Doar unele stil de bază și de poziționare pentru a face să arate ca un pic destul de.
Cu marcaje și CSS realizate, pagina noastră arată ca atare. Să începem acum cu scripting-ul nostru.
Înainte de a începe, am câteva lucruri de spus. Îi încurajez foarte mult pe cititori să descarce codul sursă și să îl prezinte pe partea de referință. Este mai ușor să te uiți la imaginea de ansamblu și să analizezi fiecare funcție una câte una decât să privești fiecare funcție în parte și apoi să creezi imaginea de ansamblu în mintea ta.
Cererea noastră cere Versiunea jQuery 1.3.2 și jQuery UI Core cu versiunea 1.7.2 Slider plugin. Nu am testat-o în variantele mai vechi. Nu ezitați să vă conectați la bibliotecile Google dacă este necesar. Pentru a face acest lucru, pur și simplu importați următorul script:
Acum hai să intrăm în cod.
Accentsconagua
// Variabile canvas var cv, ctx; // variabilele instrumentului var curTool = creion; var instrument, x, y; var boolMouseDown = false; // Variabile ale opțiunilor de instrument var color, lățime; cv = $ ("# vopsea"). get (0); dacă (! cv.getContext) alert ("Failed"); întoarcere; ctx = cv.getContext ("2d"); dacă (! ctx) alert ("Eșuat"); întoarcere; Începem prin crearea a două variabile, CV pentru referirea elementului de panza în sine și CTX pentru a face referire la contextul panzei. În continuare încercăm să obținem o referință la contextul 2D al elementului canvas prin apelarea getContext metoda și aruncă o eroare dacă nu putem. Apoi vom crea alte variabile specifice ale căror funcții le vom discuta mai jos.
În interesul extensibilității, lizibilității și evitării codului, fiecare dintre instrumentele noastre a fost extras din propria clasă. Fiecare instrument are o funcție separată pentru fiecare eveniment al mouse-ului. Să examinăm în detaliu clasa.
funcția creion () this.mousedown = funcția (e) ctx.beginPath (); ctx.lineWidth = width; ctx.lineCap = 'rotund'; ctx.lineJoin = 'rotund'; ctx.moveTo (x, y); boolMouseDown = adevărat; this.mousemove = funcția (e) if (boolMouseDown) ctx.lineTo (x, y); ctx.strokeStyle = culoare; ctx.stroke (); this.mouseup = funcția (e) if (boolMouseDown) tool.mousemove (e); boolMouseDown = false;
Pe terenul de fundal facem o serie de lucruri. Mai întâi numim beginPath metodă care ne permite, în esență, să spunem panzei că intenționăm să începem o nouă cale. Opțional, setăm o serie de proprietăți astfel încât liniile să fie rotunjite frumos, în loc să fie foarte clare. Am stabilit acum lățimea liniei la lăţime variabilă pe care o voi acoperi ulterior. Prin MoveTo , ne mutăm începutul căii spre coordonatele mouse-ului. Parametrii x și y sunt variabile care sunt actualizate printr-o metodă de ajutor pe care o vom vedea ulterior. În cele din urmă, variabila booleană care înregistrează dacă este înregistrată sau nu un eveniment de tip "mousedown" este setat la adevărat, astfel încât să știm timpul să începeți desenul.
În primul rând, verificăm boolMousedown variabilă pentru a vedea dacă mișcarea actuală a mouse-ului a fost precedată de un eveniment de tip mousedown. Dacă utilizatorul doar mută mouse-ul peste panza nu se întâmplă nimic. În cazul în care se întâmplă după un eveniment cu efect de masă, știm acum că utilizatorul încearcă să deseneze și să apeleze metodele solicitate.
Mai întâi sunăm lineTo pentru a finaliza o cale către poziția curentă a mouse-ului. Rețineți că nimic nu poate fi văzut chiar pe ecran încă. Trebuie să folosim fie completati sau metoda accident vascular cerebral metoda de a trage de fapt linia. Vom folosi accident vascular cerebral aici. În final, chiar înainte de a apela metoda, am setat culoarea liniei la culoare variabilă folosind strokeStyle proprietate.
Evenimentul mouseup doar verifică dacă utilizatorul încearcă să deseneze. Dacă da, acesta sună mousemove pentru a finaliza linia și apoi resetează boolMousedown variabil.
funcția eraser () this.mousedown = funcția (e) ctx.beginPath (); ctx.moveTo (x, y); boolMouseDown = adevărat; this.mousemove = funcția (e) if (boolMouseDown) ctx.lineTo (x, y); ctx.strokeStyle = "#FFFFFF"; ctx.stroke (); this.mouseup = funcția (e) if (boolMouseDown) tool.mousemove (e); boolMouseDown = false;
Radieră clasa este aproape aceeași restricționând câteva diferențe. În primul rând, am stabilit strokeStyle proprietatea la alb, astfel încât iluzia ștergerii este intactă. Rețineți că trebuie să setați proprietatea la altceva în cazul în care decideți să schimbați fundalul pânzei. Evident, dar demn de menționat. În al doilea rând, nu este necesar să setăm din nou proprietățile de styling de linie deoarece acestea sunt irelevante în această operație. În afară de cele de mai sus, clasele împart toate celelalte.
Deoarece folosim biblioteca jQuery UI pentru toate elementele de interfață, codificarea noastră UI este limitată la inițializarea widget-urilor cu opțiunile corecte.
$ (roșu, # verde, # albastru). glisorul (interval: "min", min: 0, max: 255, valoare: 127, slide: updColour, change: updColour); (interval: "min", min: 1, max: 50, valoare: 10, slide: updWidth, schimbare: updWidth,);
Inițializăm cele 3 glisoare pentru selectorul de culori împreună, deoarece aceștia împărtășesc aceleași opțiuni. Avem nevoie de o valoare RGB între 0 și 255 și, prin urmare, setăm valorile min și max în consecință. De asemenea, instruim pluginul pentru a apela updColour atunci când valoarea sa se schimbă sau când glisorul este deplasat.
De asemenea, cu glisorul de lățime, setăm valorile min și max și apoi cerem să sunăm updWidth atunci când se produce o schimbare. Rețineți că dimensiunea maximă a periei este un număr arbitrar pe care l-am ales. Simțiți-vă liber să o măriți sau să o micșorați după cum este necesar.
funcția updTool () var sel = $ ('# instrumente')) val (); comutator (sel) creion casei: curTool = creion; pauză; caz "eraser": curTool = radieră; pauză; Această funcție arată punctul curTool variabilă față de instrumentul selectat în prezent. Aceste variabile vor fi ulterior folosite pentru a instantiza un obiect nou al instrumentului. Obținem valoarea elementului selectat și apoi îl potrivim cu clasa potrivită.
funcția updWidth () width = $ ("# width") cursorul ("valoare"); O altă funcție simplă. Traversăm doar DOM căutând cursorul și apoi atribuim valoarea pe care o restituie lăţime variabil. Această variabilă este utilizată direct în lățimea liniei proprietate pentru a seta lățimea periei.
funcția updXY (e) var elem = e.target; var var = 0, stânga = 0; în timp ce (elem.offsetParent) top + = elem.offsetTop; stânga + = elem.offsetLeft; elem = elem.offsetParent; x = e.pageX - stânga; y = e.pageY - sus;
O funcție critică care actualizează X și y variabile care, la rândul lor, dețin coordonatele mouse-ului cu privire la elementul de pânză. Aceste variabile sunt, la rândul lor, necesare pentru fiecare operațiune de desen în aplicația noastră. Lucrul complicat aici este compatibilitatea browser-ului. layerX, Y proprietate pare să funcționeze în Firefox în timp ce offsetX, Y proprietatea face la fel în Opera. Deci, în loc de verificare condiționată și apoi de folosirea proprietății asociate, vom face ceva nou astăzi.
Mai întâi obținem elementele țintă de panza și apoi dobândim elementul părinte. Adăugăm offsetul elementului părinte la valoarea totală și apoi mergem cu un nivel mai mare și refacem totul. Odată ce nu avem nici o valoare mai mare, se calculează distanța finală dintre marginea documentului și poziția mouse-ului.
Rețineți că în scopuri demonstrative, PaginaX, Y proprietatea funcționează în mod adecvat. Dar atunci când elementele de pânză încep să se imbunătățească în interiorul altor elemente și când sunt aplicate margini și / sau umpluturi, abordarea eșuează. Noua noastră funcție se ocupă de toate acestea cu aplomb.
funcția updColour () var roșu = $ ("# roșu") cursor ("valoare"), verde = $ ("# verde"). cursorul ("valoare"), hex = hexFromRGB (roșu, verde, albastru); $ ("swatch"). css ("culoarea de fundal", "#" + hex); culoare = '#' + hex; Funcție relativ simplă, care obține valorile individuale R, G și B de la glisoare și apoi o transmite către hexFromRBG funcţie. Actualizează apoi exemplul pentru a afișa culoarea aleasă și apoi actualizează culoare variabilă cu culoarea selectată. culoare variabila este folosită în strokeStyle proprietăți pentru a specifica culoarea pe care o utilizează peria.
funcția hexFromRGB (r, g, b) var hex = [r.toString (16), g.toString (16), b.toString (16)]; $. fiecare (hex, funcția (nr, val) if (val.length == 1) hex [nr] = '0' + val;); returnați hex.join (") .toUpperCase (); Un convertor RGB la hexazecimal simplu, selectat direct dintr-o demonstrație jQuery. Obține valorile R, G și B din updColour funcția, o convertește în valoarea hex și respectiv o returnează.
funcția clearAll () ctx.clearRect (0, 0, cv.solidare, cv.height);
Solicită clearRect metoda de a trece lățimea și înălțimea panzei ca parametri, ștergând tot ceea ce păstrează panza.
$ ("# vopsea"). bind ('mousedown mousemove mouseup', util); $ ("# clear") bind ("faceți clic pe", ștergeți toate); Folosim jQuery lega funcția de a atașa evenimentele la agenții lor de gestionare a evenimentelor. Pentru cei neinițiați
prima noastră linie spune în esență: a obține elementul cu ID-ul a picta și apelați UTIL funcționează de fiecare dată
apare un eveniment cu mușchi, mouse sau mouseup. De asemenea, specificăm să apelăm curata tot atunci când elementul cu ID clar este făcută clic pe.
funcția util (e) updColour (); updTool (); updWidth (); updXY (e); instrument = nou curTool (); var call = instrument [e.type]; suna (e);
Manipulatorul evenimentului nostru cu toate scopurile pentru elementul de panza. Toate evenimentele necesare mouse-ului declanșează acest lucru. Câteva lucruri minunate se întâmplă în interiorul acestei funcții. Hai să aruncăm o privire.
În primul rând, actualizăm toate valorile solicitate apelând respectivele funcții. Acestea includ actualizarea coordonatelor mouse-ului la instanța evenimentului , X și y, sunând updXY, actualizarea culorii pensulei, culoare, sunând updColour, actualizarea lățimii periei, lăţime, sunând updWidth și actualizați în final instrumentul selectat în prezent, curTool, sunând updTool.
Acum, că toate valorile noastre sunt actualizate, putem continua să facem lucrarea reală. curTool variabilele de referință ale instrumentului selectat în prezent. Creăm o nouă instanță a clasei instrumentului, creăm o nouă variabilă apel, îndreptați-l spre metoda corespunzătoare a instrument obiect și apoi executa apel.
În cea mai mare parte am terminat. Trebuie să adăugăm câteva lucruri înainte de a ne termina.
În primul rând, atunci când aplicația se încarcă inițial, specimenul arată culoarea de fundal implicită, deoarece funcția de actualizare a culorii, updColour este apelat numai atunci când apare un eveniment de mouse cu privire la elementul de panza. Așa că numim updColour funcția imediat după inițializarea glisoarelor.
În cele din urmă, vrem să ne asigurăm că codul începe să se execute numai după ce DOM-ul este încărcat și gata. În acest sens, mutați tot codul din interiorul lui jQuery $ (Document) .ready () funcţie.
Asta e. Am terminat. Felicitări cu privire la perseverența asta. Rulați aplicația și trageți niște lucruri gooase.
Înainte de a începe să vorbim despre modul în care putem extinde aplicația noastră, trebuie să vă refer la Paint.Web, o excelentă aplicație open-source de desen. Oricare ar fi funcția pe care o voi menționa, acei oameni l-au implementat deja acolo. Cu acest lucru din drum, vă permite să aruncați o privire la modul în care puteți lua această aplicație mult mai departe decât este acum.
Astăzi am învățat cum să folosim elementul de panza pentru a crea o aplicație simplă de pânză, o privire asupra diferitelor metode și proprietăți expuse de API-ul său și cum să folosim pluginul slider în legătură cu elementul canvas pentru a crea o aplicație de desen rudimentar. Aplicația care rezultă ar trebui să ruleze în orice browser care acceptă elementul canvas și Javascript.
