WeChat 미니 프로그램 'Santa Hat'의 구현 아이디어에 대한 자세한 설명

지난 이틀 동안 친구들 사이에는 산타 모자가 넘쳐났습니다. 심지어 위챗 관계자들도 이 작은 프로그램에 대한 소문을 반박하기 위해 나왔습니다. 제품 관점에서는 의심할 여지없이 매우 성공적이지만, 기술적인 관점에서는 참으로 평범하고 창의성이 매우 중요합니다! 아이디어에 대해 간단히 이야기하자면, 아바타를 구하고 Canvas에서 아바타를 그린 다음 Canvas에서 모자를 그리고 모자의 매개변수(위치, 크기, 회전)를 조정하고 마지막으로 그림으로 저장하는 것입니다.

먼저 효과를 살펴보겠습니다

 wx.getUserInfo({ 성공: function(res) { var userInfo = res.userInfo var AvatarUrl = userInfo.avatarUrl }})

여기서 주목해야 할 문제가 있는데, Canvas는 네트워크 이미지를 지원하지 않습니다. 위에서 얻은 것은 아바타 이미지 주소뿐이므로 여기서는 위챗의 임시 디렉토리에 이미지를 다운로드해야 합니다. 코드는 다음과 같습니다:

 wx.downloadFile({ url: userInfo.avatarUrl, Success: function (res) { if (res.statusCode === 200) { AvatarUrl = res.tempFilePath //여기의 주소는 로컬 이미지를 가리킵니다.} } })

아바타를 얻으려면 WeChat의 기성 API를 사용하는 것이 더 편리합니다.

여기에는 일반적으로 사용되는 메소드가 캡슐화되어 있습니다. AvatarImg.w 및 AvatarImg.h는 아바타의 크기를 나타냅니다.

 drawAvatar: 함수(img) { ctx.drawImage(img, 0, 0, 아바타Img.w, 아바타Img.h)}

drawImage 함수를 사용하여 그림 그리기

모자를 그리기 전에 모자의 매개변수를 저장하기 위해 개체 개체를 정의했습니다.

 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를 원점 밖으로 이동시키는 것입니다. 도식은 다음과 같습니다.

움직이는 모자:

 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 공식은 해당 API를 제공합니다

 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: '저장 성공'})

위는 편집자가 소개한 위챗 애플릿 크리스마스 모자의 구현 아이디어입니다. 궁금한 사항이 있으면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!