评论

【圣诞节】给你的头像加个圣诞帽吧

本文分别使用wxs的方式和普通方式实现圣诞帽的功能

圣诞节快来了,来给你的头像加个帽子吧

看着大伙都在弄这个,我自己也来试一哈,我分别用了两种方式来实现,一种是普通的方式,一种是wxs方式

普通方式

效果图如下:

思路

  • 获取头像
  • 选择素材
  • 缩放,移动,旋转素材
  • 生成canvas
  • 生成图片,保存图片

实现方式

首先是获取头像,这个不用说,大家应该都会的。

选择素材这里我准备了三张圣诞帽的素材,这个网上有很多,可以自己找下,然后我还做了一个选择手机相册的功能,如果你自己有素材的话也可以直接选择这个功能。

缩放,移动,旋转素材都是通过触摸函数去实现的,这里是先将布局做好,然后在标签上面绑定各个触摸事件,通过返回的值在标签的style里设置实现各个效果。

调整好了之后点击保存头像会获取所有参数并将头像画出来,再通过 wx.canvasToTempFilePath() 将canvas生成图片最后通过 wx.saveImageToPhotosAlbum() 保存图片。

主要代码

主要的函数就是下面这几个,代码片段我会放在文末,没有什么比较难的地方,就是要注意下计算的时候不要算错就行。

需要注意的点

由于素材的大小可能会有不同,所以在重新选择素材的时候高度要重新设置一下,这里我用了一个方法来重置高度,主要是每次重新选择素材的时候就用 wx.getImageInfo() 这个api去获取图片素材的宽高,再计算出宽高比。

wxs实现方式

实现方式

思路跟普通方式是一样的,不同的是这里将绑定事件通过 wxs 去实现,直接设置标签的参数而不通过逻辑层去处理,在性能上会比较好一点,不过这种实现方式在进行旋转的时候最后生成的图片会有不准,后面会说到。

参数的获取是通过在标签上设置style,然后点击保存的时候用 wx.createSelectorQuery() 获取各个参数的

获取旋转的值

由于 wx.createSelectorQuery() 并不能获取到 rotate 这个参数,所以我是通过下面这种方式来拿到旋转的值的,将旋转值以宽度的形式赋值给 .vo-ro

但是我发现旋转之后生成的图片不是正确的,原因是旋转之后通过 wx.createSelectorQuery() 拿到的宽高并不是图片大小的宽高,而是旋转之后的宽高,按理来说不应该是这样的,即使通过样式旋转,它的宽高应该保持不变才对,这样就造成了参数上的错误,所以画出来的图片是不准确的。

因为加了旋转之后画出来的图片会不准确,暂时想不出别的方法,我把旋转的按钮先注释掉了,只支持缩放跟拖拽。

总结

两种方式,wxs性能要更好,但是效果没第一种的好,看你要哪种了,最后祝大家圣诞节快乐,祝你生活愉快

https://developers.weixin.qq.com/s/Cizd1RmY7qdg

最后一次编辑于  2019-12-25  
点赞 5
收藏
评论

2 个评论

  • 小肥羊
    小肥羊
    2019-12-25

    过来学习

    2019-12-25
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2019-12-25

    wxs的方式如果 wx.createSelectorQuery拿不到,也可以把参数 triggerEvent 传给page嘛~ BB完毕,已点赞

    2019-12-25
    赞同
    回复 2
    • var 友原
      var 友原
      2019-12-25
      第一次用不熟哈,我研究下
      2019-12-25
      回复
    • 卢霄霄
      卢霄霄
      2019-12-25回复var 友原
      是要麻烦点,要这么用的话,需要把整个帽子部分做成组件
      2019-12-25
      回复
登录 后发表内容