Explicação detalhada das ideias de implementação do miniprograma WeChat "Chapéu de Papai Noel"

Nos últimos dois dias, o círculo de amigos foi inundado com chapéus de Papai Noel. Até os funcionários do WeChat surgiram para refutar os rumores sobre este pequeno programa. Do ponto de vista do produto, é sem dúvida muito bem-sucedido, mas do ponto de vista técnico é realmente comum e a criatividade é muito importante! Vamos falar brevemente sobre a ideia: pegar o avatar, desenhar o avatar no Canvas, depois desenhar um chapéu no Canvas, ajustar os parâmetros do chapéu (posição, tamanho, rotação) e finalmente salvá-lo como uma imagem.

Vamos dar uma olhada no efeito primeiro

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

Há um problema a ser observado aqui. O Canvas não suporta imagens de rede. O que é obtido acima é apenas o endereço da imagem do avatar, então aqui você precisa baixar a imagem para o diretório temporário do WeChat. O código é o seguinte:

 wx.downloadFile({ url: userInfo.avatarUrl, sucesso: function (res) { if (res.statusCode === 200) { avatarUrl = res.tempFilePath //O endereço aqui aponta para a imagem local} } })

É mais conveniente usar a API pronta do WeChat para obter o avatar.

Os métodos comumente usados ​​​​são encapsulados aqui avatarImg.w e avatarImg.h abaixo referem-se ao tamanho do avatar.

 desenharAvatar: função (img) { ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)}

Desenhe imagens usando a função drawImage

Antes de desenhar o chapéu, defini um objeto objeto para salvar os parâmetros do chapéu

 var hat = {url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1,//rotação de ampliação da escala: 0//ângulo de rotação}

Em seguida, comece a desenhar o chapéu

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

Deixe-me explicar um pouco aqui. Ele é dimensionado e girado com o ponto central do chapéu como origem.

 ctx.translate(hat.x, hat.y) //translate move o ponto central da tela para as coordenadas especificadas

Neste momento, a origem passou de (0, 0) para (x, y), que é o ponto central do chapéu, a intersecção de metade do comprimento e metade da largura do chapéu.

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

A chave para desenhar um chapéu é mover xey para fora da origem. O diagrama esquemático é o seguinte:

Chapéu em movimento:

 moveHat: função (e) { hat.x = e.touches[0].x hat.y = e.touches[0].y that.drawA() }

Chapéu giratório:

 rotateHat: function (e) { hat.rotate = e.detail.value //Sou preguiçoso aqui, use o componente slider para deslizar o valor that.drawA() }

Chapéu de zoom:

 scaleHat: function (e) { hat.b = e.detail.value hat.w = 40 * hat.b hat.h = 40 * hat.b that.drawA() ////O componente slider é usado aqui para valor do slide}

Alterar estilo do chapéu:

 changeHat: function (e) { hat.url = e.currentTarget.dataset.url //Alterar o estilo do chapéu that.drawA() }

Todos esses métodos possuem drawA(), que redesenha principalmente a tela toda vez que ela se move, gira, dimensiona ou altera parâmetros.

Oficial do WeChat fornece API correspondente

 saveToPhoto: function () { wx.canvasToTempFilePath({ x: 0, y: 0, largura: 240, altura: 240, destWidth: 240, destHeight: 240, canvasId: 'ctx', sucesso: function (res) { // Canvas para imagem de retorno de chamada bem-sucedido} })}

Finalmente salve no álbum

 wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,}) wx.showToast({title: 'Salvar com sucesso'})

O texto acima é a ideia de implementação do chapéu de Natal do miniaplicativo WeChat apresentado pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!