Explicación detallada de las ideas de implementación del mini programa WeChat "Santa Hat"

En los últimos dos días, el círculo de amigos se ha visto inundado de gorros de Papá Noel. Incluso los funcionarios de WeChat salieron a refutar los rumores sobre este pequeño programa. Es otro fenómeno a nivel. Desde la perspectiva del producto, sin duda es muy exitoso, pero desde una perspectiva técnica, es realmente común y la creatividad es muy importante. Hablemos brevemente de la idea: obtenga el avatar, dibuje el avatar en Canvas, luego dibuje un sombrero en Canvas, ajuste los parámetros del sombrero (posición, tamaño, rotación) y finalmente guárdelo como una imagen.

Primero echemos un vistazo al efecto.

 wx.getUserInfo({ éxito: función(res) { var userInfo = res.userInfo var avatarUrl = userInfo.avatarUrl }})

Hay un problema a tener en cuenta aquí: Canvas no admite imágenes de red. Lo que se obtiene arriba es solo la dirección de la imagen del avatar, por lo que aquí debe descargar la imagen al directorio temporal de WeChat. El código es el siguiente:

 wx.downloadFile({ url: userInfo.avatarUrl, Success: function (res) { if (res.statusCode === 200) { avatarUrl = res.tempFilePath // La dirección aquí apunta a la imagen local} } })

Es más conveniente utilizar la API preparada de WeChat para obtener el avatar.

Los métodos más utilizados se resumen aquí. avatarImg.w y avatarImg.h a continuación se refieren al tamaño del avatar.

 dibujarAvatar: función (img) { ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)}

Haz dibujos usando la función drawImage

Antes de dibujar el sombrero, definí un objeto para guardar los parámetros del sombrero.

 var hat = { url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1,//Rotación de ampliación de escala: 0//Ángulo de rotación}

Luego empieza a dibujar el sombrero.

 drawHat: función (sombrero) { ctx.translate(hat.x, hat.y) ctx.scale(hat.b, hat.b) ctx.rotate(hat.rotate * Math.PI / 180) ctx.drawImage(sombrero .url, -hat.w/2, -hat.h/2, hat.w, hat.h) }

Déjame explicarte un poco aquí. Está escalando y girando con el punto central del sombrero como origen.

 ctx.translate(hat.x, hat.y) //translate mueve el punto central del lienzo a las coordenadas especificadas

En este momento, el origen se ha movido de (0, 0) a (x, y), que es el punto central del sombrero, la intersección de la mitad del largo y la mitad del ancho del sombrero.

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

La clave para dibujar un sombrero es mover xey fuera del origen. El diagrama esquemático es el siguiente:

Sombrero en movimiento:

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

Sombrero giratorio:

 rotarHat: función (e) { hat.rotate = e.detail.value //Soy vago aquí, use el componente deslizante para deslizar el valor that.drawA() }

Sombrero de zoom:

 scaleHat: function (e) { hat.b = e.detail.value hat.w = 40 * hat.b hat.h = 40 * hat.b that.drawA() ////El componente deslizante se usa aquí para valor de diapositiva}

Cambiar estilo de sombrero:

 changeHat: function (e) { hat.url = e.currentTarget.dataset.url //Cambiar el estilo del sombrero that.drawA() }

Todos estos métodos tienen drawA(), que principalmente vuelve a dibujar el lienzo cada vez que se mueve, gira, escala o cambia parámetros.

El funcionario de WeChat proporciona la API correspondiente

 saveToPhoto: function () { wx.canvasToTempFilePath({ x: 0, y: 0, ancho: 240, alto: 240, destWidth: 240, destHeight: 240, canvasId: 'ctx', éxito: function (res) { // Lienzo para imagen de devolución de llamada exitosa} })}

Finalmente guardar en el álbum

 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath,}) wx.showToast({título: 'Guardar correctamente'})

Lo anterior es la idea de implementación del sombrero navideño del subprograma WeChat presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!