Actionscript 3 obiecte de vectori de desen folosind clasa grafică în adobeflash

Acasă »Intrări» ActionScript 3: Desenarea obiectelor vectoriale utilizând clasa Graphics în Adobe Flash

ActionScript 3: Desenarea obiectelor vectoriale utilizând clasa Graphics în Adobe Flash







În această lecție, să ne uităm la elementele de bază ale desenării formelor vectoriale simple folosind ActionScript 3.0. Acest lucru se poate face folosind diferite metode din clasa Graphics. creați linii, forme de completare și primitive. Lecția este destinată începătorilor și nu necesită cunoștințe speciale în AS3. cu excepția ca fundament al limbii.

După ce ați studiat acest subiect, puteți desena obiecte vectoriale și le puteți afișa pe ecran folosind ActionScript 3. după cum se arată în imagine:

Actionscript 3 obiecte de vectori de desen folosind clasa grafică în adobeflash

Lecția cuprinde următoarele subiecte:

Obiectele vectoriale din AS3 sunt create folosind clasa Graphics. Spre deosebire de alte clase din această clasă nu au nevoie pentru a crea o instanță înainte de utilizare, așa cum a fost deja inițializat ca o proprietate a oricărui obiect de afișare, cum ar fi forma. Sprite și MovieClip.

Utilizarea clasei Grafică face posibilă aplicarea instrumentului de desen cu instrumentul stilou și mutarea cursorului de la un punct la altul, desenarea liniilor. Puteți folosi această metodă pentru a umple zona din jurul liniilor care creează, sau, alternativ, de a folosi anumite metode pentru desen forme de obiecte, cum ar fi dreptunghiuri și cercuri.

Principalele metode ale clasei Graphics pentru desenarea obiectelor vectoriale sunt:

  • lineStyle () - Specifică aspectul oricărei linii create.
  • moveTo () - Mută ​​cursorul de desen la un anumit punct.
  • lineTo () - Desenează o linie la un anumit punct.
  • curveTo () - Desenează o linie curbată la un anumit punct.
  • beginFill () - Începe umplerea cu culoarea zonei dintre linii.
  • endFill () - Încheie procesul de umplere a zonei între linii.
  • clear () - Șterge toate obiectele vectoriale din interiorul obiectului grafic.

Există câteva metode avansate de desen gradient care nu sunt acoperite în această lecție. Alte metode de desenare a formularelor simple vor fi discutate mai târziu.

Desenați o linie dreaptă

Înainte de a desena orice obiecte, trebuie să creați o instanță în care să fie plasată imaginea. Trebuie să creați o instanță a clasei Shape. Sprite sau MovieClip pentru a plasa obiectele desenate în el. Clasa Forma utilizarea mai puțin exigente a resurselor de memorie a computerului, astfel încât să puteți folosi întotdeauna în cazul în care nu este nevoie specială pentru clasele de funcționalitate sau Sprite MovieClip.

Adăugați obiectul creat în lista de afișare, astfel încât tot ceea ce desenați să fie afișat imediat pe scenă. Acest lucru se face folosind metoda AddChild ():

Puteți citi despre lista de afișare în "Afișarea listei Adobe Flash".

Primul pas în procesul de trasare a unei linii este de a seta proprietățile de tip linie. Implicit, această proprietate nu este setată, astfel încât orice linie pe care o desenați va fi invizibilă. Puteți seta proprietatea tip linie utilizând metoda .lineStyle (). Această metodă are o serie de proprietăți opționale, cum ar fi grosimea liniei, culoarea și transparența. În exemplul de mai jos, va fi utilizată o linie roșie de 1px. care este complet opac. Acest lucru se face după cum urmează.

Nu uitați că metodele din clasa Graphics sunt utilizate prin proprietatea grafică. și nu direct printr-o instanță a clasei Shape.

Stilul de linie este gata. Puteți trece și începe să desenăm linia, dar deja am făcut-o. Acum puteți defini punctul de plecare al liniei. În mod prestabilit, linia va începe de la punctul anterior pe care se află pointerul, deoarece nu l-am mutat în altă locație, deci punctul de plecare va fi 0. 0. Deoarece nu trebuie să pornim de la această poziție, mutați indicatorul într-un alt punct utilizând metoda .moveTo (). Această metodă necesită coordonatele x și y ca parametri. în care pointerul va fi mutat. Deplasați indicatorul la 50. 50 pe scenă. Puteți face acest lucru după cum urmează:







Acum avem un punct de plecare pentru linia de la care putem începe desenul folosind metoda lineTo (). Folosind această metodă, trebuie să determinați punctul în care se termină linia. Putem specifica valoarea 100. 50 ca punct la care se va trasa linia:

Testați aplicația flash (ctrl + enter), în care puteți observa că prima linie este redată în roșu de la punctul 50. 50 până la punctul 100. 50. Mai jos sunt acțiunile pe care le-am făcut.

Putem continua să trasăm linii de la unul la altul, indicând următorul punct pentru a crea obiectul necesar. Codul de mai jos creează un pătrat, este simplu de înțeles:

Puteți rula exemplul și puteți vedea că este un pătrat mic. Imaginea de mai jos ilustrează acțiunile pe care le-am făcut:

Pentru a desena un alt obiect sau linie și a nu conecta următoarea linie la cea precedentă, trebuie să utilizați din nou metoda moveTo (). Pentru a deplasa indicatorul la locul unde doriți să desenați un obiect nou și apoi continuați să utilizați metoda lineTo ().

Desenarea unei linii curbe

Pentru a trage o linie curbată, aveți nevoie de un pas suplimentar pentru a crea un punct de control care să definească forma liniei curbe. Deci, pe lângă ultimul punct al liniei curbe, trebuie să specificați comanda care este plasată între cele două puncte de început și de sfârșit. Aceasta se face folosind metoda curveTo (). unde x1 și y1 sunt coordonatele punctului de control, în timp ce x2 și y2 sunt coordonatele ultimului punct.

Dacă doriți să creați un formular simplu sub forma unui oval utilizând două linii curbe, trebuie să faceți acest lucru folosind codul de mai jos. Trebuie remarcat faptul că utilizarea metodei curveTo () necesită aceleași acțiuni pregătitoare ca și metoda lineTo (). și anume crearea unui obiect al clasei Shape și setarea tipului liniei utilizând metoda lineStyle ().

Crearea formularelor cu umplere

Orice formă creată folosind metode lineTo () și curveTo () poate fi umplută cu o umplere de o anumită culoare pentru a închide zona între linii. Pentru a face acest lucru, pur și simplu utilizați metoda beginFill (). pentru a atribui o culoare de umplere. Această metodă se aplică după cum urmează:

Este, de asemenea, o bună practică să indicați unde se presupune că metoda finală () trebuie să termine umplerea. pentru a preveni orice rezultate nedorite:

Puteți utiliza umplutura fără a utiliza metoda lineStyle (). dacă nu doriți ca obiectul să aibă o cale.

Rulați și testați exemplul pentru a vedea că pătratul este plin de culoare.

Ștergerea obiectelor vectoriale

Dacă dintr-un motiv oarecare doriți să ștergeți toate liniile vectoriale pe care le-ați atras în obiect, puteți face acest lucru folosind metoda clear (). Această metodă nu poate șterge obiecte vectoriale selective, ci elimină toate liniile vectoriale și umpluturile care au fost plasate în interiorul obiectului țintă. De exemplu, puteți șterge pătratul de umplere pe care l-ați făcut mai devreme apelând metoda clear () după cum urmează:

Acum trebuie să înveți cum să pictezi și să pictezi forme simple folosind clasa Graphics. Apoi, vom analiza câteva metode care vă permit să desenați anumite forme mult mai ușor.

Desenați dreptunghiuri și cercuri

În plus față de metodele de bază pentru desenarea liniilor și liniilor curbe, ActionScript 3 oferă câteva metode pentru desenarea obiectelor, cum ar fi un dreptunghi și un cerc. Iată metodele pe care le vom lua în considerare: drawRect (). drawCircle () și drawRoundRect ().

drawRect () va desena un dreptunghi. Această metodă este utilizată după cum urmează:

Deci, dacă doriți să desenați un dreptunghi situat în punctul (50, 50), care are o lățime de 300px și o înălțime de 100px. atunci acest lucru se poate face în felul următor:

Actionscript 3 obiecte de vectori de desen folosind clasa grafică în adobeflash

drawCircle () vă permite să desenați un cerc. Această metodă este utilizată după cum urmează:

Deci, dacă doriți să desenați un cerc situat la (150, 150) și care are o rază de 25px. atunci puteți face acest lucru în felul următor:

Actionscript 3 obiecte de vectori de desen folosind clasa grafică în adobeflash

drawRoundRect () vă permite să desenați un dreptunghi cu colțuri rotunjite. Această metodă este utilizată după cum urmează:

Parametrul ellipse_height este opțional. Deci, dacă doriți să creați un dreptunghi rotunjit situat la (50, 50), cu o lățime de 300px și înălțimea de 100px. și lățimea elipsei 25. puteți face acest lucru în felul următor:

Actionscript 3 obiecte de vectori de desen folosind clasa grafică în adobeflash

Acum trebuie să învățați cum să desenați obiecte simple folosind metodele descrise în această lecție. Ar trebui să fiți conștienți de existența unor alte metode de aplicare a culorilor gradient și de a desena alte forme. Puteți citi despre aceasta în referința ActionScript 3.0.

Navigare după înregistrări







Trimiteți-le prietenilor: