WeChatミニプログラム「サンタハット」の実装アイデアを詳しく解説

この2日間で、友人たちの周りにはサンタ帽があふれ、この小さなプログラムに関する噂を反論する人も出てきた。製品の観点から見ると、これは間違いなく非常に成功していますが、技術的な観点から見ると、それは確かに当たり前のことであり、創造性が非常に重要です。アイデアについて簡単に説明します。アバターを取得し、Canvas でアバターを描画し、Canvas で帽子を描画し、帽子のパラメータ (位置、サイズ、回転) を調整して、最後に画像として保存します。

まずは効果を見てみましょう

wx.getUserInfo({ 成功: function(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 //ここのアドレスはローカル イメージを指します} } })

アバターの取得にはWeChatの既製APIを使用する方が便利です。

一般的に使用されるメソッドはここにカプセル化されています。以下の avatarImg.w と avatarImg.h はアバターのサイズを指します。

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

drawImage関数を使って絵を描く

帽子を描く前に、帽子のパラメータを保存するオブジェクトオブジェクトを定義しました。

 var hat = { url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1,//スケール倍率回転: 0//回転角度}

次に帽子を描き始めます

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

ここで少し説明させていただきますと、帽子の中心点を原点にして拡大縮小・回転させます。

 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: function (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) { // Canvas から画像への成功したコールバック} })}

最後にアルバムに保存します

wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath,}) wx.showToast({title: '保存に成功しました'})

上記は編集者が紹介した WeChat アプレット クリスマス ハットの実装アイデアです。ご質問があればメッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！