كيفية بناء صانع ميمات باستخدام React: دليل المبتدئين

إذا كنت في منتصف تعلم React ، فربما تكون قد مررت بالفعل بالعديد من البرامج التعليمية حول كيفية إنشاء قائمة مهام. في مرحلة ما ، ستبحث عن أفكار بديلة لتجربتها وتتعلمها ، لكنك ستستمر في البحث عن إصدارات مختلفة من مثال قائمة المهام الافتراضية.

هذه الفكرة البديلة في هذه المقالة لك ، أيها الفضوليون. يمكن العثور على مصدر الشفرة في GitHub الخاص بي ويتم تشغيله من تطبيق create-react-app. لقد جمعت قوالب meme من google ومصادر أخرى. يمكن أن يجعل الخط Impact أي صورة ميم ، لذلك ليس لدينا خيار سوى إضافتها.

هذا مشروع جيد افعل وتعلم لتبدأ به. سنتعامل مع العديد من مستمعي الأحداث / تفاعلات المستخدم وطفرات الحالة.

بناء المعرض

في البداية ، سنقوم ببناء معرض صور للسماح للمستخدمين بتحديد قالب meme. لقد قمت بتخزين الصور التي جمعتها كمصفوفة ، وأنا أقوم ببناء معرض بسيط منها.

في الكود التالي ،

  1. نرسم خريطة من خلال مجموعة الصور ، ونعرض كل قالب meme في علامة img ، ونعرض معرضًا.
  2. نحدد الصورة المحددة الحالية من خلال onClick على علامة img.
  3. لدينا كائن الحالة الأولي مع الإعدادات الأولية للتعليقات التوضيحية وتحديد مواضعها. يمكن تعديل الموضع والمحتوى وحالة السحب للنصوص العلوية والسفلية لاحقًا عن طريق إطلاق طفرات الحالة.

كما يمكنك فك الشفرة ، فإن كل صورة في المعرض لها حدث onClick الخاص بها. يعثر على الصورة المحددة حاليًا ، ويحولها إلى بيانات URI ويفتح نمط رد الفعل. سيكون النموذج هو محطة العمل لإنشاء الميم.

محطة عمل Meme-Maker

نستخدم علامات svg و image و text داخل النموذج للاحتفاظ بالصورة و meme-caption. نحن نفضل SVG لأنه يمكنك التكبير والتصغير بقدر ما تريد ، ولن تفقد الوضوح أبدًا. يعد تحويل SVG إلى PNG أثناء تصدير الميم مهمة بسيطة نسبيًا.

كل صورة في المجموعة لها ارتفاع وعرض مختلف. لتجنب تمديد الصورة وضغطها ، أقوم ببعض الحل البديل لإصلاح نسبة العرض إلى الارتفاع. أقوم بتثبيت العرض على 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 للأعلى والأسفل /> يتم الاحتفاظ بالعلامات في الحالة (ارجع إلى الكائن الأولي في مكون MemeMaker). عندما يقوم المستخدم بسحب علامات النص ووضعها ، يتغير إحداثيات X و Y.

ملاحظة: سيتم تضمين مسار xlinkHref الخاص بعلامة الصورة (base64). لا يمكن تحويل عناوين URL الأولية لـ src إلى ملفات PNG أثناء التنزيل.

إليك كيف تبدو الشفرة بالكامل:

بخلاف SVG ، لدينا اثنان /> ؛ علامات للسماح للمستخدم بإدخال التسميات التوضيحية العلوية والسفلية الخاصة به للميمي. يلتقط حدث onChange التسمية التوضيحية العلوية والتسمية التوضيحية السفلية ، ويضعهما في الحالة عندما نقوم بتغييرها.

سحب النص حوله!

دعنا نحاول إعادة وضع الشرح العلوي والسفلي الآن. ترتبط تفاعلات السحب والإفلات الخاصة بعلامات النص بمستمعي الأحداث.

  1. اضغط بالماوس - onMouseDown - للبحث عن علامة النص المحددة ، وتحديد مواضع X و Y الحالية ، وإرفاق مستمع الحدث "mousemove" بها.
  2. تحريك الماوس - onMouseMove - يبحث عن الموضع الحالي (س وص) لعلامة النص حيث يتم تثبيت الماوس وتحريكه.
  3. تحرير الماوس - onMouseUp - يبحث عن موضع الإسقاط أو موضع التحرير. تحدد X و Y مكان إسقاط النص. يزيل مستمع الحدث "mousemove" من العنصر وينهي السحب والإفلات.

لتتبع ضغط الماوس ، مع الاستمرار والسحب. نقوم بتضمين مستمعي الأحداث التاليين إلى علامات النص.

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

نقوم بعد ذلك بإرفاق مستمع الحدث "mousemove" لتتبع حركات الماوس على "mousedown". بمجرد إسقاط علامة النص ، نقوم بإزالة مستمع حدث تحريك الماوس المرفق في "mouseup".

إليك كيفية قيام الكود بذلك:

الآن بعد أن تم السحب والإفلات ، يمكنك تحريك النص الخاص بك وإعادة وضعه في أي مكان تريده.

تنزيل الميمي

عندما ينقر المستخدم على زر التنزيل ، نقوم بتحويل SVG إلى سلسلة XML متسلسلة ونرسمها في لوحة HTML5. نحن نستخدم طريقة toDataUrl () من قماش html (يولد صورة URI base64) لإنشاء صورة من نوع mime "image / png"

كلما تعلمت المزيد ، هناك الكثير الذي يمكنك القيام به لهذا المشروع الصغير.

  1. يمكنك محاولة جلب الصور من واجهات برمجة التطبيقات مفتوحة المصدر وإنشاء معرض.
  2. يمكنك محاولة إضافة أحكام لمشاركتها في facebook و whatsapp و twitter.
  3. يمكنك محاولة السماح للمستخدم بتحميل صورته الخاصة ، وتوسيع نطاقها وإنشاء صورة meme.
  4. يمكنك محاولة تغيير حجم الخط.

هناك الكثير الذي يمكنك القيام به لتحسين المشروع الذي سيؤدي في النهاية إلى تحسين مهاراتك في البرمجة. ؟ ترميز سعيد! ؟