How does WeChat Mini Programs realize his Christmas hat?
Today, the editor will share with you the relevant knowledge about how WeChat Mini Programs realizes the Christmas hat. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
Let's see the effect first.
Train of thought
1. Get the user profile picture
Wx.getUserInfo ({success: function (res) {var userInfo = res.userInfo var avatarUrl = userInfo.avatarUrl}})
There is a problem to note here, canvas does not support network images, the above is only the address of the profile picture, so here to download the picture to Wechat's temporary directory. The code is as follows:
Wx.downloadFile ({url: userInfo.avatarUrl, success: function (res) {if (res.statusCode = 200) {avatarUrl = res.tempFilePath / / the address here points to the local picture})
It is more convenient to use Wechat's ready-made API to get the avatar.
two。 Draw the user's profile picture
The commonly used methods are encapsulated here, and the avatarImg.w and avatarImg.h below refer to the size of the avatar.
DrawAvatar: function (img) {ctx.drawImage (img, 0,0, avatarImg.w, avatarImg.h)}
Drawing pictures using the drawImage function
3. Draw a hat
Before drawing the hat, I defined an object object to hold the parameters of the hat
Var hat = {url: ".. / res/hat01.png", w: 40, h: 40, x: 100,100, b: 1 magnification of rotate / scaling rotate: 0 / angle of rotation}
Next, start drawing the hat.
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)}
To explain a little bit here, it is to scale and rotate with the center point of the hat as the origin.
Ctx.translate (hat.x, hat.y) / / translate moves the center point of the canvas to the specified coordinates
At this point, the origin has moved from (0) to (x), which is the center of the hat, where 1/2 of the length of the hat meets 1/2 of the width.
Ctx.drawImage (hat.url,-hat.w / 2,-hat.h / 2, hat.w, hat.h)
The key to drawing a hat is to move XMague y out of the origin, as shown in the following diagram:
4. Change the parameters of the hat
Move the hat:
MoveHat: function (e) {hat.x = e.touches [0] .x hat.y = e.touches [0] .y that.drawA ()}
Rotate the hat:
RotateHat: function (e) {hat.rotate = e.detail.value / / this block is lazy, use the slider component, slide the value that.drawA ()}
Zoom the hat:
ScaleHat: function (e) {hat.b = e.detail.value hat.w = 40 * hat.b hat.h = 40 * hat.b that.drawA () / use the slider component here, slide the value}
Change the hat style:
ChangeHat: function (e) {hat.url = e.currentTarget.dataset.url / / change the style of hat that.drawA ()}
There is drawA () in all of these methods, which mainly redraws the canvas every time you move, rotate, scale, or change parameters.
5.Canvas Export Picture
Wechat officially provides corresponding API.
SaveToPhoto: function () {wx.canvasToTempFilePath ({x: 0, y: 0, width: 240,240,240,240,240,240,240, canvasId: 'ctx', success: function (res) {/ / canvas successful callback}})})}
Finally save to the album
Wx.saveImageToPhotosAlbum ({filePath: res.tempFilePath,}) wx.showToast ({title: 'saved successfully'}) the above is all the content of the article "how to realize WeChat Mini Programs's Christmas Hat". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
