ในช่วงสองวันที่ผ่านมา กลุ่มเพื่อน ๆ ก็เต็มไปด้วยหมวกซานต้า แม้แต่เจ้าหน้าที่ WeChat ก็ออกมาปฏิเสธข่าวลือเกี่ยวกับโครงการเล็ก ๆ นี้ ถือเป็นอีกปรากฏการณ์หนึ่ง จากมุมมองของผลิตภัณฑ์ ไม่ต้องสงสัยเลยว่าประสบความสำเร็จอย่างมาก แต่จากมุมมองทางเทคนิค มันเป็นเรื่องธรรมดาจริงๆ และความคิดสร้างสรรค์เป็นสิ่งสำคัญมาก! มาพูดคุยกันสั้นๆ เกี่ยวกับแนวคิดนี้: รับอวตาร วาดรูปอวตารใน Canvas จากนั้นวาดหมวกใน Canvas ปรับพารามิเตอร์ของหมวก (ตำแหน่ง ขนาด การหมุน) และสุดท้ายบันทึกเป็นรูปภาพ
มาดูผลกระทบกันก่อน
ไอเดีย 1. รับอวตารของผู้ใช้ wx.getUserInfo ({ สำเร็จ: ฟังก์ชั่น (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 //ที่อยู่ที่นี่ชี้ไปที่รูปภาพในเครื่อง} } })สะดวกกว่าในการใช้ API สำเร็จรูปของ WeChat เพื่อรับอวตาร
2. วาดอวตารของผู้ใช้วิธีการที่ใช้โดยทั่วไปจะสรุปไว้ที่นี่
DrawAvatar: ฟังก์ชั่น (img) { ctx.drawImage (img, 0, 0, avatarImg.w, avatarImg.h)}วาดภาพโดยใช้ฟังก์ชัน DrawImage
3. วาดหมวกก่อนที่จะวาดหมวก ฉันกำหนดวัตถุวัตถุเพื่อบันทึกพารามิเตอร์ของหมวก
var hat = { url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1, // สเกลกำลังขยาย: 0 // มุมการหมุน}ต่อไปเริ่มวาดหมวก
DrawHat: ฟังก์ชั่น (หมวก) { 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) //translate ย้ายจุดศูนย์กลางของผืนผ้าใบไปยังพิกัดที่ระบุ
ณ เวลานี้ จุดกำเนิดได้ย้ายจาก (0, 0) ไปเป็น (x, y) ซึ่งเป็นจุดศูนย์กลางของหมวก ซึ่งเป็นจุดตัดของความยาวครึ่งหนึ่งและครึ่งหนึ่งของความกว้างของหมวก
ctx.drawImage (hat.url, -hat.w / 2, -hat.h / 2, hat.w, hat.h)
กุญแจสำคัญในการวาดหมวกคือการย้าย x และ y ออกไปนอกจุดกำเนิด แผนผังมีดังนี้:
4. เปลี่ยนพารามิเตอร์ของหมวกย้ายหมวก:
moveHat: ฟังก์ชั่น (e) { hat.x = e.touches[0].x hat.y = e.touches[0].y that.drawA() }หมวกปั่น:
RotHat: 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() ซึ่งส่วนใหญ่จะวาดผืนผ้าใบใหม่ทุกครั้งที่มีการเคลื่อนไหว หมุน ปรับขนาด หรือเปลี่ยนพารามิเตอร์
5.ภาพการส่งออกผ้าใบเจ้าหน้าที่ของ WeChat มอบ API ที่เกี่ยวข้อง
saveToPhoto: function () { wx.canvasToTempFilePath ({ x: 0, y: 0, ความกว้าง: 240, ความสูง: 240, destWidth: 240, destHeight: 240, canvasId: 'ctx', ความสำเร็จ: ฟังก์ชั่น (res) { // Canvas to image โทรกลับสำเร็จ} })}สุดท้ายก็บันทึกลงในอัลบั้ม
wx.saveImageToPhotosAlbum ({ filePath: res.tempFilePath,}) wx.showToast ({ชื่อ: 'บันทึกสำเร็จ'}) สรุปข้างต้นเป็นแนวคิดการใช้งานแอปเพล็ตคริสต์มาส WeChat ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วบรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!