この2日間で、友人たちの周りにはサンタ帽があふれ、この小さなプログラムに関する噂を反論する人も出てきた。製品の観点から見ると、これは間違いなく非常に成功していますが、技術的な観点から見ると、それは確かに当たり前のことであり、創造性が非常に重要です。アイデアについて簡単に説明します。アバターを取得し、Canvas でアバターを描画し、Canvas で帽子を描画し、帽子のパラメータ (位置、サイズ、回転) を調整して、最後に画像として保存します。
まずは効果を見てみましょう
アイデア1. ユーザーのアバターを取得する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を使用する方が便利です。
2. ユーザーのアバターを描画する一般的に使用されるメソッドはここにカプセル化されています。以下の avatarImg.w と avatarImg.h はアバターのサイズを指します。
drawAvatar:関数 (img) { ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)}drawImage関数を使って絵を描く
3.帽子を描く帽子を描く前に、帽子のパラメータを保存するオブジェクトオブジェクトを定義しました。
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 を原点の外側に移動することです。概略図は次のとおりです。
4.帽子のパラメータを変更する動く帽子:
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() があり、主に、移動、回転、拡大縮小、パラメータの変更のたびにキャンバスを再描画します。
5.キャンバスに写真をエクスポート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武道サイトを応援してくださった皆様、誠にありがとうございました!