Ausführliche Erläuterung der Umsetzungsideen des WeChat-Miniprogramms „Santa Hat“

In den letzten zwei Tagen wurde der Freundeskreis mit Weihnachtsmützen überschwemmt, um die Gerüchte über dieses kleine Programm zu widerlegen. Aus Produktsicht ist es zweifellos sehr erfolgreich, aber aus technischer Sicht ist es tatsächlich alltäglich und Kreativität ist sehr wichtig! Lassen Sie uns kurz über die Idee sprechen: Holen Sie sich den Avatar, zeichnen Sie den Avatar in Canvas, zeichnen Sie dann einen Hut in Canvas, passen Sie die Parameter des Huts an (Position, Größe, Drehung) und speichern Sie ihn schließlich als Bild.

Schauen wir uns zunächst die Wirkung an

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

Hier ist ein Problem zu beachten. Da oben nur die Avatar-Bildadresse abgerufen wird, müssen Sie das Bild in das temporäre Verzeichnis von WeChat herunterladen. Der Code lautet wie folgt:

 wx.downloadFile({ url: userInfo.avatarUrl, success: function (res) { if (res.statusCode === 200) { avatarUrl = res.tempFilePath //Die Adresse hier zeigt auf das lokale Bild} } })

Es ist bequemer, die vorgefertigte API von WeChat zum Abrufen des Avatars zu verwenden.

Die unten aufgeführten häufig verwendeten Methoden avatarImg.w und avatarImg.h beziehen sich auf die Größe des Avatars.

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

Zeichnen Sie Bilder mit der Funktion drawImage

Vor dem Zeichnen des Hutes habe ich ein Objektobjekt definiert, um die Parameter des Hutes zu speichern

 var hat = { url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1,//Skalenvergrößerung drehen: 0//Rotationswinkel}

Als nächstes beginnen Sie mit dem Zeichnen des Hutes

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

Lassen Sie mich hier ein wenig erklären. Es handelt sich um eine Skalierung und Drehung mit dem Mittelpunkt des Hutes als Ursprung.

 ctx.translate(hat.x, hat.y) //translate verschiebt den Mittelpunkt der Leinwand zu den angegebenen Koordinaten

Zu diesem Zeitpunkt hat sich der Ursprung von (0, 0) nach (x, y) verschoben, dem Mittelpunkt des Hutes, dem Schnittpunkt der halben Länge und halben Breite des Hutes.

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

Der Schlüssel zum Zeichnen eines Hutes besteht darin, x und y außerhalb des Ursprungs zu verschieben. Das schematische Diagramm sieht wie folgt aus:

Beweglicher Hut:

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

Spin-Hut:

 rotateHat: function (e) { hat.rotate = e.detail.value // Ich bin hier faul, benutze die Slider-Komponente, um den Wert that.drawA() zu verschieben }

Zoom-Hut:

 scaleHat: function (e) { hat.b = e.detail.value hat.w = 40 * hat.b hat.h = 40 * hat.b that.drawA() ////Die Slider-Komponente wird hier verwendet Folienwert}

Hutstil ändern:

 changeHat: function (e) { hat.url = e.currentTarget.dataset.url //Den Stil des Hutes ändern that.drawA() }

Diese Methoden verfügen alle über drawA(), das hauptsächlich die Leinwand jedes Mal neu zeichnet, wenn sie verschoben, gedreht, skaliert oder Parameter geändert wird.

Der WeChat-Beamte stellt die entsprechende API bereit

 saveToPhoto: function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: 240, height: 240, destWidth: 240, destHeight: 240, canvasId: 'ctx', success: function (res) { // Leinwand zum Bild erfolgreicher Rückruf} })}

Zum Schluss im Album speichern

 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath,}) wx.showToast({title: 'Erfolgreich speichern'})

Das Obige ist die Implementierungsidee des vom Herausgeber vorgestellten WeChat-Applets. Ich hoffe, dass es Ihnen hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!