شرح تفصيلي لأفكار تنفيذ برنامج WeChat المصغر "Santa Hat"

في اليومين الماضيين، امتلأت دائرة الأصدقاء بقبعات سانتا حتى أن مسؤولي WeChat خرجوا لدحض الشائعات حول هذا البرنامج الصغير، وهو أمر آخر على مستوى الظاهرة. من منظور المنتج، فهو بلا شك ناجح للغاية، ولكن من منظور تقني، فهو بالفعل أمر شائع، والإبداع مهم جدًا! دعونا نتحدث بإيجاز عن الفكرة: احصل على الصورة الرمزية، ارسم الصورة الرمزية في Canvas، ثم ارسم قبعة في Canvas، واضبط معلمات القبعة (الموضع والحجم والتدوير)، وأخيرًا احفظها كصورة.

دعونا نلقي نظرة على التأثير أولا

 wx.getUserInfo({ Success: function(res) { var userInfo = res.userInfo var avatarUrl = userInfo.avatarUrl }})

هناك مشكلة يجب ملاحظتها هنا. Canvas لا يدعم صور الشبكة. ما تم الحصول عليه أعلاه هو فقط عنوان الصورة الرمزية، لذلك تحتاج هنا إلى تنزيل الصورة إلى الدليل المؤقت لـ WeChat. الرمز هو كما يلي:

 wx.downloadFile({ url: userInfo.avatarUrl, Success: function (res) { if (res.statusCode === 200) { avatarUrl = res.tempFilePath // يشير العنوان هنا إلى الصورة المحلية} } })

يعد استخدام واجهة برمجة تطبيقات WeChat الجاهزة أكثر ملاءمة للحصول على الصورة الرمزية.

يتم تضمين الطرق شائعة الاستخدام هنا avatarImg.w وavatarImg.h أدناه تشير إلى حجم الصورة الرمزية.

 drawAvatar: الوظيفة (img) { ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)}

رسم الصور باستخدام وظيفة drawImage

قبل رسم القبعة، قمت بتحديد كائن كائن لحفظ معلمات القبعة

 var hat = { url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1,//تدوير تكبير المقياس: 0//زاوية الدوران}

بعد ذلك، ابدأ برسم القبعة

 drawHat: الوظيفة (hat) { ctx.translate(hat.x, hat.y) ctx.scale(hat.b, hat.b) ctx.rotate(hat.rotate * Math.PI / 180) ctx.drawImage(hat .url, -hat.w / 2, -hat.h / 2, hat.w, hat.h) }

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

 ctx.translate(hat.x, hat.y) // يحرك النقل النقطة المركزية للوحة القماشية إلى الإحداثيات المحددة

في هذا الوقت انتقل الأصل من (0، 0) إلى (x، y)، وهي النقطة المركزية للقبعة، تقاطع نصف طول القبعة ونصف عرضها.

 ctx.drawImage(hat.url, -hat.w / 2, -hat.h / 2, hat.w, hat.h)

مفتاح رسم القبعة هو تحريك x وy خارج نقطة الأصل. الرسم التخطيطي هو كما يلي:

القبعة المتحركة:

 moveHat: الوظيفة (e) { hat.x = e.touches[0].x hat.y = e.touches[0].y that.drawA() }

قبعة تدور:

 RotateHat: function (e) { hat.rotate = e.detail.value // أنا كسول هنا، استخدم مكون شريط التمرير لتحريك القيمة that.drawA() }

قبعة التكبير:

 scaleHat: function (e) { hat.b = e.detail.value hat.w = 40 * hat.b hat.h = 40 * hat.b that.drawA() //// يتم استخدام مكون شريط التمرير هنا قيمة الشريحة}

تغيير نمط القبعة:

 ChangeHat: function (e) { hat.url = e.currentTarget.dataset.url // تغيير نمط القبعة that.drawA() }

تحتوي جميع هذه الأساليب على drawA()، الذي يعيد رسم اللوحة بشكل أساسي في كل مرة يتم فيها تحريك المعلمات أو تدويرها أو تغيير حجمها أو تغييرها.

يوفر مسؤول WeChat واجهة برمجة التطبيقات المقابلة

 saveToPhoto: function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: 240, height: 240, destWidth: 240, destHeight: 240, CanvasId: 'ctx', Success: function (res) { // رد اتصال ناجح من قماش إلى صورة} })}

وأخيرا حفظ في الألبوم

 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath,}) wx.showToast({title: 'تم الحفظ بنجاح'})

ما ورد أعلاه هو فكرة تنفيذ تطبيق WeChat الصغير لعيد الميلاد الذي قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!