Hogyan készítsünk mémkészítőt a React segítségével: kezdő útmutató

Ha éppen a React elsajátításának közepén jár, valószínűleg már rengeteg oktatóanyagon vett részt a teendőlista felépítésével kapcsolatban. Egy bizonyos ponton alternatív ötleteket keres, amelyeket kipróbálhat és megtanulhat, de folyamatosan az alapértelmezett tennivalók listájának különböző változataiba ütközik.

Ez a alternatív ötlet ebben a cikkben neked, kíváncsiaknak szól. A kódbázis megtalálható a GitHub-on, és rendszerindítása a create-react-app alkalmazásból történik. Összegyűjtöttem a meme-sablonokat a google-ból és más forrásokból. Az Impact betűtípus bármelyik képet mémmé teheti, így nincs más választásunk, mint hozzáadni.

Ez egy jó „csináld és tanulj” projekt. Számos eseményhallgató / felhasználó interakcióval és állapotmutációkkal lesz dolgunk.

A galéria építése

Kezdetben képgalériát építünk, hogy a felhasználók kiválaszthassanak egy mém-sablont. Az összegyűjtött képeket tömbként tároltam, és egy egyszerű galériát építek belőle.

A következő kódban

  1. Áttérképezzük a fotók tömbjét, minden mémsablont megjelenítünk egy img tag-ben, és megjelenítünk egy galériát.
  2. Az aktuálisan kiválasztott képet egy onClick gombra kattintva határozzuk meg az img címkén.
  3. Van egy initialState objektumunk a feliratok kezdeti beállításával és azok elhelyezésével. A felső és az alsó szöveg helyzete, tartalma és húzási állapota később módosítható állapotmutációk kiváltásával.

Amint megfejtheti, a galéria minden képének megvan a maga onClick eseménye. Megtalálja az aktuálisan kiválasztott képet, átalakítja adat URI-vé és megnyitja a reakciószíj modált. A mém lesz a munkaállomás a mém létrehozásához.

A Meme-Maker munkaállomás

A modal belsejében svg, kép és szöveges címkéket használunk a kép és a mém felirat megtartására. Mi az SVG-t részesítjük előnyben, mert nagyíthat és kicsinyíthet, amennyit csak akar, és soha nem veszíti el az érthetőséget. Az SVG átalakítása PNG formátumba a mém exportálása közben viszonylag egyszerű feladat.

A gyűjtemény minden képének magassága és szélessége eltérő. A kép nyújtásának és tömörítésének elkerülése érdekében egy kis megoldást teszek a képarány rögzítésére. A szélességet 600-ra rögzítem, és a magasságot a szélesség-magasság arány alapján számolom. A kiszámított magasságot és szélességet szállítom az SVG-nek.

Az SVG belső szerkezete meglehetősen egyszerű. Tartja a képet és a feliratokat.

   {this.state.toptext}   {this.state.bottomtext}  // And we will have event listeners attached to the  tags to move them around. We'll see it in later part of the article.

A felső és az alsó x és y koordinátákA /> címkék állapotban vannak fenntartva (lásd a MemeMaker összetevőben található kezdeti állapot objektumot). Ahogy a felhasználó húzza és pozicionálja a szöveges címkéket, az X és Y koordináták megváltoznak.

Megjegyzés: A képcímke xlinkHref beágyazott (base64) útvonala lesz. A nyers src URL-eket letöltés közben nem lehet PNG-vé konvertálni.

Így néz ki az egész kód:

Az SVG-n kívül kettőnk van /> ; címkék, amelyek segítségével a felhasználó megadhatja a mém legfelső és alsó feliratát. Az onChange esemény rögzíti a felső és az alsó feliratot, és állapotba állítja őket, amikor és amikor megváltoztatjuk.

Húzza körbe a szöveget!

Próbáljuk meg most elhelyezni a felső és az alsó feliratot. A szövegcímkék drag and drop interakciói az esemény hallgatókhoz vannak kötve.

  1. Egérnyomás —onMouseDown - Megkeresi a kijelölt szövegcímkét, meghatározza az aktuális X és Y pozíciókat, és csatolja hozzá az „egérmutató” eseményfigyelőt.
  2. Egér mozgatása - onMouseMove - Megkeresi a szöveges címke aktuális helyzetét (x és y) az egér tartása és mozgatása közben.
  3. Egér kioldása - onMouseUp - Megkeresi az elejtési vagy a kioldási helyzetet. Meghatározza az X és Y karaktereket, ahová a szöveg eldobásra kerül. Eltávolítja az „egérmozgató” eseményfigyelőt az elemről, és befejezi a fogd és vidd műveletet.

Az egér nyomásának nyomon követéséhez tartsa lenyomva és húzza. A szöveges címkékhez a következő eseményhallgatókat is bevonjuk.

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

Ezután csatoljuk az „egérmozgató” eseményhallgatót az egér mozgásának nyomon követésére a „egéralátéten”. Miután a szöveges címkét eldobta, eltávolítjuk a csatolt egérmozgatási eseményfigyelőt az „mouseup” menüből.

A kód ezt így csinálja:

Most, hogy a fogd és vidd véget ért, áthelyezheti a szövegét, és újrapozicionálhatja azt, ahol csak akarja.

A mém letöltése

Amikor a felhasználó a letöltés gombra kattint, átalakítjuk az SVG-t egy XML sorosított karakterláncsá, és HTML5-vászonba rajzoljuk. A hdml canvas toDataUrl () metódusával (egy base64 kép URI-t generál) egy "image / png" mime típusú kép előállításához!

Amint többet megtud, sokkal többet tehet ennek a kis projektnek.

  1. Megpróbálhatja lekérni a képeket a nyílt forráskódú API-kból, és létrehozhat egy galériát.
  2. Megpróbálhatja hozzáadni a rendelkezéseket, hogy megossza őket a Facebookon, a WhatsAppon és a Twitteren.
  3. Megpróbálhatja megengedni a felhasználónak, hogy feltöltse saját képét, méretezhesse és elkészíthessen egy mémet.
  4. Megpróbálhatja átméretezni a betűtípust.

Sokkal többet tehet a projekt fejlesztéséért, amely végső soron javítja a kódolási képességeit. ? Boldog kódolást! ?