de Avanthika Meenakshi

Cum să construiești un creator de meme cu React: un ghid pentru începători

Dacă sunteți la mijlocul învățării React, probabil că ați trecut deja prin multe tutoriale despre cum să creați o listă de sarcini. La un moment dat, veți căuta idei alternative pentru a încerca să învățați, dar veți continua să vă dați cu diferite versiuni ale exemplului listei de sarcini implicite.

Această idee alternativă din acest articol este pentru voi, cei curioși. codebase poate fi găsit în GitHub și este bootstrapped din creați-reacționați-aplicație. Am colectat șabloane meme de pe google și din alte surse. Impact fontul poate face din orice imagine o memă, așa că nu avem altă opțiune decât să o adăugăm.

Cum sa construiesti un creator de meme cu React un

Acesta este un proiect bun pentru a începe și a învăța. Vom avea de-a face cu multe interacțiuni cu ascultătorii de evenimente / utilizatori și mutații de stare.

Inițial, vom construi o galerie de imagini pentru a permite utilizatorilor să selecteze un șablon meme. Am stocat imaginile pe care le-am colectat sub formă de matrice și construiesc o galerie simplă din ea.

În următorul cod,

  1. Hărțuim prin matricea de fotografii, afișăm fiecare șablon meme într-o etichetă img și afișăm o galerie.
  2. Determinăm imaginea selectată curent printr-un onClick pe eticheta img.
  3. Avem un obiect initialState cu setările inițiale ale subtitrărilor și poziționarea acestora. Poziția, conținutul și starea de tragere a textelor de sus și de jos pot fi modificate ulterior prin declanșarea mutațiilor de stare.

După cum puteți descifra, fiecare imagine din galerie are propriul său eveniment onClick. Găsește imaginea selectată în prezent, o convertește în date URI și deschide o reactstrap modal. Modalul va fi stația de lucru pentru crearea memei.

1611956707 889 Cum sa construiesti un creator de meme cu React un
Galerie de șabloane de meme și stația de lucru modală.

Stația de lucru Meme-Maker

Folosim svg, imagine și text etichete în interiorul modalului pentru a ține imaginea și titlul memei. Preferăm SVG, deoarece puteți mări și micșora cât doriți și nu va pierde niciodată claritatea. Și conversia SVG în PNG în timp ce exportați meme este o sarcină relativ simplă.

Fiecare imagine din colecție are înălțime și lățime diferite. Pentru a evita întinderea și comprimarea imaginii, fac o mică soluție pentru a remedia raportul de aspect. Fixez lățimea la 600 și calculez înălțimea pe baza raportului lățime-înălțime. Furnizez înălțimea și lățimea calculate către SVG.

Structura generală din interiorul SVG este destul de simplă. Păstrează imaginea și subtitrările.

<svg width={newWidth} height={newHeight} ...otherAttributes&gt;  <image xlinkHref="https://www.freecodecamp.org/news/react-for-beginners-building-a-meme-maker-with-react-7164d3d3e55f/image-path" />  <text x="top-x-position" y="top-y-position">    {this.state.toptext}  </text>  <text x="bottom-x-position" y="bottom-y-position">    {this.state.bottomtext}  </text>  // And we will have event listeners attached to the <text /> tags to move them around. We'll see it in later part of the article.</svg>

Coordonatele x și y din partea de sus și de jos /> Etichetele sunt menținute în stare (consultați obiectul initialState din componenta MemeMaker). Pe măsură ce utilizatorul trage și poziționează etichetele text, coordonatele X și Y se schimbă.

Notă: XlinkHref al etichetei de imagine va fi încorporată (bază64) cale. Adresele URL Raw SRC nu pot fi convertite în PNG în timpul descărcării.

Iată cum arată întregul cod:

În afară de SVG, avem două />; etichete pentru a permite utilizatorului să introducă subtitrările de sus și de jos pentru meme. PeEvenimentul de schimbare captează subtitrarea de sus și subtitrarea de jos și le setează în starea respectivă când și când o schimbăm.

1611956708 528 Cum sa construiesti un creator de meme cu React un
? Modificarea textului funcționează!

Glisând textul!

Să încercăm să repoziționăm subtitrările de sus și de jos acum. Interacțiunile de tragere și plasare a etichetelor text sunt legate de ascultătorii de evenimente.

  1. Apăsați mouse-ul –onMouseDown – Găsește eticheta text selectată, determină pozițiile curente X și Y și atașează ascultătorul de evenimente „mousemove”.
  2. Mutare mouse – onMouseMove – Găsește poziția curentă (x și y) a etichetei text pe măsură ce mouse-ul este ținut și mutat.
  3. Eliberarea mouse-ului – onMouseUp – Găsește poziția de cădere sau poziția de eliberare. Determină X și Y unde textul este abandonat. Elimină ascultătorul de evenimente „mousemove” din element și termină drag and drop.

Pentru a urmări mouse-ul, țineți apăsat și trageți. Includem următorii ascultători de evenimente la etichetele text.

onMouseDown={event => this.handleMouseDown(event, ‘top’)}onMouseUp={event => this.handleMouseUp(event, ‘top’)}

Apoi atașăm ascultătorul de evenimente „mousemove” pentru a urmări mișcările mouse-ului pe „mousedown”. Odată ce eticheta text este abandonată, eliminăm ascultătorul de evenimente mutat al mouse-ului atașat în „mouseup”.

Iată cum face acest lucru codul:

Acum, după ce glisați și fixați, puteți muta textul și îl puteți poziționa oriunde doriți.

1611956708 163 Cum sa construiesti un creator de meme cu React un
Ascultători de evenimente pentru salvare! ?

Descărcarea memei

Când un utilizator face clic pe butonul de descărcare, convertim SVG într-un șir serializat XML și îl desenăm într-un Pânză HTML5. Folosim metoda toDataUrl () de pânză html (generează o imagine URI baz64) pentru a genera o imagine de tip mime „image / png”!

1611956709 726 Cum sa construiesti un creator de meme cu React un
Yaayyyy!

Pe măsură ce aflați mai multe, puteți face mult mai mult pentru acest mic proiect.

  1. Puteți încerca să preluați imagini din API-uri open source și să creați o galerie.
  2. Puteți încerca să adăugați dispoziții pentru a le partaja în Facebook, WhatsApp și Twitter.
  3. Puteți încerca să permiteți utilizatorului să își încarce propria imagine, să o scaleze și să creeze un meme.
  4. Puteți încerca redimensionarea fontului.

Puteți face mult mai mult pentru a îmbunătăți proiectul, care vă va îmbunătăți în cele din urmă abilitățile de codare. ? Codificare fericită! ?