Πώς να φτιάξετε έναν δημιουργό meme με το React: έναν οδηγό για αρχάριους

Εάν είστε στη μέση της εκμάθησης React, πιθανότατα έχετε ήδη περάσει από πολλά μαθήματα για το πώς να δημιουργήσετε μια λίστα υποχρεώσεων. Σε κάποιο σημείο, θα αναζητήσετε εναλλακτικές ιδέες για να δοκιμάσετε και να μάθετε, αλλά θα συνεχίσετε να συναντάτε διαφορετικές εκδόσεις του προεπιλεγμένου παραδείγματος λίστας υποχρεώσεων.

Αυτή η εναλλακτική ιδέα σε αυτό το άρθρο είναι για εσάς, τους περίεργους. Η βάση κώδικα μπορεί να βρεθεί στο GitHub μου και ξεκινά από την εφαρμογή create-react-app. Έχω συλλέξει πρότυπα meme από το google και άλλες πηγές. Η γραμματοσειρά Impact μπορεί να κάνει οποιαδήποτε εικόνα meme, οπότε δεν έχουμε άλλη επιλογή από το να την προσθέσουμε.

Αυτό είναι ένα καλό έργο που πρέπει να κάνετε και να μάθετε. Θα ασχοληθούμε με πολλούς ακροατές συμβάντων / αλληλεπιδράσεις χρηστών και μεταλλάξεις κατάστασης.

Δημιουργία γκαλερί

Αρχικά, θα χτίσουμε μια συλλογή εικόνων για να επιτρέψουμε στους χρήστες να επιλέξουν ένα πρότυπο meme. Έχω αποθηκεύσει τις εικόνες που έχω συλλέξει ως πίνακα και δημιουργώ μια απλή γκαλερί από αυτήν.

Στον ακόλουθο κώδικα,

  1. Χαρτογραφούμε μέσω του πίνακα φωτογραφιών, εμφανίζουμε κάθε πρότυπο meme σε μια ετικέτα img και προβάλλουμε μια συλλογή.
  2. Προσδιορίζουμε την τρέχουσα επιλεγμένη εικόνα μέσω του onClick στην ετικέτα img.
  3. Έχουμε ένα αντικείμενο του αρχικούState με τις αρχικές ρυθμίσεις των λεζάντων και τη θέση τους. Η θέση, το περιεχόμενο και η κατάσταση μεταφοράς των κειμένων πάνω και κάτω μπορούν αργότερα να τροποποιηθούν ενεργοποιώντας μεταλλάξεις κατάστασης.

Όπως μπορείτε να αποκρυπτογραφήσετε, κάθε εικόνα στη συλλογή έχει τη δική της εκδήλωση onClick. Βρίσκει την τρέχουσα επιλεγμένη εικόνα, τη μετατρέπει σε URI δεδομένων και ανοίγει έναν τρόπο αντίδρασης. Ο τρόπος θα είναι ο σταθμός εργασίας για τη δημιουργία του meme.

Ο σταθμός εργασίας Meme-Maker

Χρησιμοποιούμε ετικέτες svg, εικόνας και κειμένου μέσα στη μέθοδο για να κρατήσουμε την εικόνα και το υπόμνημα. Προτιμούμε το SVG επειδή μπορείτε να κάνετε μεγέθυνση και σμίκρυνση όσο θέλετε, και δεν θα χάσετε ποτέ σαφήνεια. Και η μετατροπή του SVG σε PNG κατά την εξαγωγή του meme είναι σχετικά απλή εργασία.

Κάθε εικόνα στη συλλογή έχει διαφορετικό ύψος και πλάτος. Για να αποφύγω το τέντωμα και τη συμπίεση της εικόνας, κάνω μια μικρή λύση για να διορθώσω την αναλογία διαστάσεων. Διορθώνω το πλάτος στα 600 και υπολογίζω το ύψος με βάση την αναλογία πλάτους-ύψους. Παρέχω το υπολογισμένο ύψος και πλάτος στο SVG.

Η συνολική δομή μέσα στο SVG είναι αρκετά απλή. Κρατά την εικόνα και τους υπότιτλους.


    
      {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.
    

Οι συντεταγμένες x και y του επάνω και του κάτω μέρους Οι ετικέτες διατηρούνται στην κατάσταση (ανατρέξτε στο αρχικό αντικείμενοState στο στοιχείο MemeMaker). Καθώς ο χρήστης σύρει και τοποθετεί τις ετικέτες κειμένου, οι συντεταγμένες X και Y αλλάζουν.

Σημείωση: Η διαδρομή xlinkHref της ετικέτας εικόνας θα ενσωματωθεί (base64). Οι ακατέργαστες διευθύνσεις URL src δεν μπορούν να μετατραπούν σε PNG κατά τη λήψη.

Δείτε πώς φαίνεται ολόκληρος ο κώδικας:

Εκτός από το SVG, έχουμε δύο /> ; ετικέτες που επιτρέπουν στον χρήστη να εισάγει τους υπότιτλους του επάνω και του κάτω μέρους για το meme. Το συμβάν onChange καταγράφει τον υπότιτλο και τον υπότιτλο και τα θέτει στην κατάσταση όπως και όταν το αλλάζουμε.

Σύροντας το κείμενο!

Ας προσπαθήσουμε να τοποθετήσουμε ξανά τους υπότιτλους τώρα Οι αλληλεπιδράσεις μεταφοράς και απόθεσης των ετικετών κειμένου συνδέονται με τους ακροατές συμβάντων.

  1. Πιέστε το ποντίκι —onMouseDown - Εντοπίζει την επιλεγμένη ετικέτα κειμένου, καθορίζει τις τρέχουσες θέσεις X και Y και επισυνάπτει σε αυτό το πρόγραμμα ακρόασης συμβάντων “mousemove”.
  2. Μετακίνηση ποντικιού - onMouseMove - Βρίσκει την τρέχουσα θέση (x και y) της ετικέτας κειμένου καθώς το ποντίκι κρατείται και μετακινείται.
  3. Απελευθέρωση ποντικιού - onMouseUp - Βρίσκει τη θέση πτώσης ή τη θέση απελευθέρωσης. Καθορίζει τα X και Y όπου θα πέσει το κείμενο. Αφαιρεί το πρόγραμμα ακρόασης "mousemove" από το στοιχείο και τερματίζει τη μεταφορά και απόθεση.

Για να παρακολουθείτε το ποντίκι πατήστε, κρατήστε πατημένο και σύρετε. Περιλαμβάνουμε τους ακόλουθους ακροατές συμβάντων στις ετικέτες κειμένου.

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

Στη συνέχεια επισυνάπτουμε το πρόγραμμα ακρόασης συμβάντων "mousemove" για να παρακολουθούμε τις κινήσεις του ποντικιού στο "mousedown" Μόλις πέσει η ετικέτα κειμένου, αφαιρούμε το συνημμένο πρόγραμμα ακρόασης μετακίνησης ποντικιού στο "mouseup".

Δείτε πώς κάνει ο κώδικας:

Τώρα που έχει γίνει η μεταφορά και απόθεση, μπορείτε να μετακινήσετε το κείμενό σας και να το επανατοποθετήσετε όπου θέλετε.

Λήψη του meme

Όταν ένας χρήστης κάνει κλικ στο κουμπί λήψης, μετατρέπουμε το SVG σε σειριακή σειρά XML και το σχεδιάζουμε σε καμβά HTML5. Χρησιμοποιούμε τη μέθοδο toDataUrl () του καμβά html (δημιουργεί ένα URI εικόνας base64) για να δημιουργήσουμε μια εικόνα τύπου mime "image / png"!

Καθώς μαθαίνετε περισσότερα, υπάρχουν πολλά περισσότερα που μπορείτε να κάνετε σε αυτό το μικρό έργο.

  1. Μπορείτε να προσπαθήσετε να ανακτήσετε εικόνες από API ανοιχτού κώδικα και να δημιουργήσετε μια συλλογή.
  2. Μπορείτε να προσπαθήσετε να προσθέσετε διατάξεις για να τις μοιραστείτε σε facebook, whatsapp και twitter.
  3. Μπορείτε να προσπαθήσετε να επιτρέψετε στον χρήστη να ανεβάσει τη δική του εικόνα, να το κλιμακώσει και να δημιουργήσει ένα meme.
  4. Μπορείτε να δοκιμάσετε το μέγεθος της γραμματοσειράς.

Υπάρχουν πολλά περισσότερα που μπορείτε να κάνετε για να βελτιώσετε το έργο που τελικά θα βελτιώσει τις δεξιότητες κωδικοποίησης ; Καλή κωδικοποίηση! ;