手机微信小程序流程“圣诞帽”的完成思路详解

日期：2021-01-19 类型：科技新闻 

关键词：在线网页制作，建网页，个人简介网页制作，简单网页，建立网页

这两天盆友圈被“圣诞帽”刷屏，这个小程序流程连手机微信官方都出来假新闻了，又1个状况级的玩意。从商品角度而言无疑是是非非常取得成功，但从技术性角度而言是的确见怪不怪，艺术创意很关键！简易说1下思路：获得头像，把头像画在Canvas里边，接着往Canvas里画帽子，调剂帽子的主要参数（部位、尺寸、转动），最终储存为照片。

先看来看实际效果

 

思路

1.获得客户头像

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

这里有个难题必须留意，canvas不适用互联网照片，上面获得的只是头像照片详细地址，因此在这里要把照片免费下载到手机微信的临时性文件目录。编码以下：

wx.downloadFile({   
    url: userInfo.avatarUrl, 
    success: function (res) {    
        if (res.statusCode === 200) {      
            avatarUrl = res.tempFilePath //这里的详细地址是指向当地照片 
        }     
    }  
})

获得头像这1步用的是手机微信现成的API 较为便捷。

2.绘图客户头像

此处封裝了常见的方式，正下方avatarImg.w和avatarImg.h是指头像的尺寸。

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

绘图照片应用drawImage涵数

3.绘图帽子

绘图帽子以前，我界定了1个目标object来储存帽子的主要参数

var hat = { 
    url: "../res/hat01.png", 
    w: 40,  
    h: 40,  
    x: 100, 
    y: 100, 
    b: 1,//放缩的倍率
    rotate: 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）,也便是帽子的管理中心点，帽子长的2分之1和宽的2分之1交汇处。

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    //这1块偷懒了，用slider组件 ，拖动赋值
     that.drawA() 
 }

放缩帽子：

scaleHat: function (e) {  
     hat.b = e.detail.value   
     hat.w = 40 * hat.b    
     hat.h = 40 * hat.b    
     that.drawA()    ////此处用slider组件 ，拖动赋值 
}

更改帽子款式：

changeHat: function (e) {
    hat.url = e.currentTarget.dataset.url  //更改帽子的款式   
    that.drawA() 
}

这几个方式中都有drawA(),这关键是每次挪动、转动、放缩、更改主要参数时重美术绘画布。

5.Canvas导出来照片

手机微信官方有出示相应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: '储存取得成功'})

总结

以上所述是网编给大伙儿详细介绍的手机微信小程序流程“圣诞帽”的完成思路，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！

上一篇：h5网页页面制做专用工具助商家降低等位客户外流 返回下一篇：没有了