Explication détaillée des idées de mise en œuvre du mini programme WeChat "Santa Hat"

Au cours des deux derniers jours, le cercle d'amis a été inondé de chapeaux de Père Noël. Même les responsables de WeChat sont venus réfuter les rumeurs sur ce petit programme. C'est un autre phénomène. D'un point de vue produit, c'est sans doute très réussi, mais d'un point de vue technique, c'est effectivement monnaie courante, et la créativité est très importante ! Parlons brièvement de l'idée : récupérez l'avatar, dessinez l'avatar dans Canvas, puis dessinez un chapeau dans Canvas, ajustez les paramètres du chapeau (position, taille, rotation), et enfin enregistrez-le sous forme d'image.

Jetons d'abord un coup d'oeil à l'effet

 wx.getUserInfo({ succès : function(res) { var userInfo = res.userInfo var avatarUrl = userInfo.avatarUrl }})

Il y a un problème à noter ici. Canvas ne prend pas en charge les images réseau. Ce qui est obtenu ci-dessus n'est que l'adresse de l'image de l'avatar, vous devez donc ici télécharger l'image dans le répertoire temporaire de WeChat. Le code est le suivant :

 wx.downloadFile({ url: userInfo.avatarUrl, success: function (res) { if (res.statusCode === 200) { avatarUrl = res.tempFilePath //L'adresse ici pointe vers l'image locale} } })

Il est plus pratique d’utiliser l’API prête à l’emploi de WeChat pour obtenir l’avatar.

Les méthodes couramment utilisées sont encapsulées ici. avatarImg.w et avatarImg.h ci-dessous font référence à la taille de l'avatar.

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

Dessinez des images à l'aide de la fonction drawImage

Avant de dessiner le chapeau, j'ai défini un objet objet pour sauvegarder les paramètres du chapeau

 var hat = { url : ../res/hat01.png, w : 40, h : 40, x : 100, y : 100, b : 1,//Échelle de grossissement, rotation : 0//Angle de rotation}

Commencez ensuite à dessiner le chapeau

 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) }

Laissez-moi vous expliquer un peu ici. Il s'agit d'une mise à l'échelle et d'une rotation avec le point central du chapeau comme origine.

 ctx.translate(hat.x, hat.y) //translate déplace le point central du canevas vers les coordonnées spécifiées

A ce moment, l'origine s'est déplacée de (0, 0) à (x, y), qui est le point central du chapeau, l'intersection de la moitié de la longueur et de la moitié de la largeur du chapeau.

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

La clé pour dessiner un chapeau est de déplacer x et y en dehors de l’origine. Le diagramme schématique est le suivant :

Chapeau mobile :

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

Faire tourner le chapeau :

 rotateHat: function (e) { hat.rotate = e.detail.value //Je suis paresseux ici, utilisez le composant slider pour faire glisser la valeur that.drawA() }

Chapeau Zoom :

 scaleHat: function (e) { hat.b = e.detail.value hat.w = 40 * hat.b hat.h = 40 * hat.b that.drawA() ////Le composant slider est utilisé ici pour valeur de diapositive}

Changer le style de chapeau :

 changeHat: function (e) { hat.url = e.currentTarget.dataset.url //Changer le style du chapeau that.drawA() }

Ces méthodes ont toutes drawA(), qui redessine principalement le canevas à chaque fois qu'il bouge, pivote, met à l'échelle ou modifie des paramètres.

Le responsable de WeChat fournit l'API correspondante

 saveToPhoto : function () { wx.canvasToTempFilePath({ x : 0, y : 0, width : 240, height : 240, destWidth : 240, destHeight : 240, canvasId : 'ctx', success : function (res) { // Toile vers image rappel réussi} })}

Enfin enregistrer dans l'album

 wx.saveImageToPhotosAlbum({ filePath : res.tempFilePath,}) wx.showToast({title : 'Enregistrement réussi'})

Ce qui précède est l'idée de mise en œuvre du chapeau de Noël de l'applet WeChat présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !