Christmas is coming, so put a hat on your head

Looking at everyone in this, I also tried a ha, I used two ways to achieve, one is a common way, one is WXS way

The ordinary way

The renderings are as follows:

Train of thought

  • Access to image
  • Select material
  • Zoom, move, rotate the material
  • Generate the canvas
  • Generate the picture and save the picture

implementation

The first thing is to get an avatar, which goes without saying, everybody knows this.

Here I prepared three Santa hat material, there are many online, you can find, and then I also made a choice of mobile phone album function, if you have your own material can also directly choose this function.

Zooming, moving, and rotating materials are all done with touch functions. In this case, the layout is done first, then each touch event is bound to the label, and the return value is set in the style of the label to achieve the effect.

After adjust the click save image can obtain all parameters and will head to draw out, again through the wx. CanvasToTempFilePath () will be generated canvas picture finally by wx. The saveImageToPhotosAlbum save the file ().

The main code

The main functions are these, and I’ll put the code snippets at the end of the article, but there’s nothing hard about it, just make sure you don’t make any mistakes when you compute it.

Points to note

Since the size of the images may vary, the height should be reset when re-selecting the images. Here I use a method to reset the height. The main method is to use the Wx.getimageInfo () API to get the width and height of the images each time I re-select the images, and then calculate the aspect ratio.

WXS implementation

implementation

The idea is the same as the ordinary way, but the difference is that the binding event is implemented through WXS, and the label parameters are directly set instead of being processed by the logical layer, which is better in performance. However, this way of implementation may produce inaccurate images during rotation, which will be discussed later.

The parameters are retrieved by setting style on the label and then clicking save to retrieve each parameter using wX.createsElectorQuery ()

Gets the value of the rotation

Since wx.createsElectorQuery () cannot obtain the rotate parameter, I get the rotate value in the following way, assigning the rotate value in the form of width to.vo-ro

But I found that the image generated after rotation is not correct. The reason is that the width and height obtained after rotation by wX.createsElectorQuery () is not the width and height of the image, but the width and height obtained after rotation. This should not be the case, even if it is rotated by style, the width and height should remain the same. This leads to errors in the parameters, so the picture drawn is not accurate.

Because the picture drawn after adding rotation will not be accurate, I can’t think of another method for the moment, I commented out the rotation button first, only support zoom and drag.

conclusion

Two ways, WXS performance is better, but the effect is not as good as the first way, it depends on which you want, finally I wish everyone a merry Christmas, I wish you a happy life

Developers.weixin.qq.com/s/Cizd1RmY7…