Penjelasan rinci tentang ide implementasi program mini WeChat "Santa Hat"

Dalam dua hari terakhir, lingkaran pertemanan dibanjiri dengan topi Santa. Bahkan pejabat WeChat pun membantah rumor tentang program kecil ini. Dari segi produk memang sangat sukses, namun dari segi teknis memang lumrah, dan kreativitas itu sangat penting! Mari kita bahas idenya secara singkat: ambil avatarnya, gambar avatarnya di Canvas, lalu gambar topi di Canvas, sesuaikan parameter topi (posisi, ukuran, rotasi), dan terakhir simpan sebagai gambar.

Mari kita lihat efeknya terlebih dahulu

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

Ada masalah yang perlu diperhatikan di sini, Canvas tidak mendukung gambar jaringan. Yang diperoleh di atas hanyalah alamat gambar avatar, jadi di sini Anda perlu mengunduh gambar tersebut ke direktori sementara WeChat. Kodenya adalah sebagai berikut:

 wx.downloadFile({ url: userInfo.avatarUrl, sukses: function (res) { if (res.statusCode === 200) { avatarUrl = res.tempFilePath //Alamat di sini menunjuk ke gambar lokal} } })

Lebih mudah menggunakan API WeChat yang sudah jadi untuk mendapatkan avatar.

Metode yang umum digunakan dirangkum di sini. avatarImg.w dan avatarImg.h di bawah mengacu pada ukuran avatar.

 drawAvatar: fungsi (img) { ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)}

Gambarlah gambar menggunakan fungsi drawImage

Sebelum menggambar topi, saya mendefinisikan objek objek untuk menyimpan parameter topi

 var hat = { url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1,//Pembesaran skala putar: 0//Sudut rotasi}

Selanjutnya mulailah menggambar topinya

 drawHat: function (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) }

Izinkan saya menjelaskan sedikit di sini. Ia menskala dan berputar dengan titik tengah topi sebagai titik asal.

 ctx.translate(hat.x, hat.y) //translate memindahkan titik tengah kanvas ke koordinat yang ditentukan

Saat ini titik asal telah berpindah dari (0, 0) ke (x, y), yaitu titik tengah topi, perpotongan setengah panjang dan setengah lebar topi.

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

Kunci untuk menggambar topi adalah dengan memindahkan x dan y ke luar titik asal. Diagram skematiknya adalah sebagai berikut:

Memindahkan Topi:

 moveHat: fungsi (e) { hat.x = e.touches[0].x hat.y = e.touches[0].y that.drawA() }

Putar topi:

 memutarHat: function (e) { hat.rotate = e.detail.value //Saya malas di sini, gunakan komponen slider untuk menggeser nilai that.drawA() }

Zoom topi:

 scaleHat: function (e) { hat.b = e.detail.value hat.w = 40 * hat.b hat.h = 40 * hat.b that.drawA() ////Komponen slider digunakan di sini untuk nilai slide}

Ubah gaya topi:

 changeHat: function (e) { hat.url = e.currentTarget.dataset.url //Ubah gaya topi that.drawA() }

Semua metode ini memiliki drawA(), yang terutama menggambar ulang kanvas setiap kali bergerak, memutar, menskalakan, atau mengubah parameter.

Pejabat WeChat menyediakan API yang sesuai

 saveToPhoto: function () { wx.canvasToTempFilePath({ x: 0, y: 0, lebar: 240, tinggi: 240, destWidth: 240, destHeight: 240, canvasId: 'ctx', sukses: function (res) {// Callback kanvas ke gambar berhasil} })}

Akhirnya simpan ke album

 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath,}) wx.showToast({title: 'Berhasil menyimpan'})

Di atas adalah ide implementasi topi Natal applet WeChat yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!