使用canvas实现如下效果图
- 使用微信小程序官方canvas API,需要进一步了解可以查看参考文档,这里不加以重复直接上代码
canvas.wxml
<view>
<canvas class="firstCanvas _6a4ef3a" style="width:{
{windowWidth}}px;height:{
{windowHeight}}px;" canvas-id="firstCanvas" bindlongtap="generate"/>
</view>
canvas.js
let promiseAvatar=null; //定义暂存头像的function
const ctx = wx.createCanvasContext('firstCanvas'); //定义画图常量
Page({
/**
* 页面的初始数据
*/
data: {
windowHeight:0,
windowWidth:0
rate:0 //适配参数
},
methods:{
//获取设备参数
getWindowInfo() {
let {windowWidth,windowHeight} = wx.getSystemInfoSync();
let rate = windowWidth / 750;
this.setData({windowWidth,windowHeight,rate})
},
getUserAvatar(){
let userInfo=wx.getStorageSync('userInfo),
userAvatar=userInfo.avatarUrl,promiseAvatar;
return new Promise(function (resolve, reject) {
wx.getImageInfo({
src: userAvatar,
success: function (res) {
resolve(res);
},
fail: function (res) {
reject(res);
}
});
},
async drawImage(){
let {rate} = this.data;
let res = await getUserAvatar();
// 因为这个是其他的画报中截取的片段,所以这里要先保存一下
// 大致的实现步骤rate
// 绘制一个圆进行截切 ctx.clip()
// 最后填充图片
ctx.save(); //保存原有的画图
ctx.beginPath() //重新开始
ctx.arc( //绘制圆心坐标为(350,132),半径为66的圆
Math.floor(375 * rate),
Math.floor(132 * rate),
Math.floor(66 * rate),
0,
2 * Math.PI
);
ctx.clip() //裁剪
ctx.drawImage( //定位在圆圈范围内便会出现
res[0].path, //图片暂存路径
Math.floor(310 * rate),
Math.floor(66 * rate),
Math.floor(132 * rate),
Math.floor(132 * rate)
);
ctx.restore()
ctx.draw()
}
}
onShow(){
this.getWindowInfo();
this.drawImage();
}
})
对于图片需要注意的是,如果是网络资源,需要先把图片下载到临时路径才能使用,调用wx.downloadFile方法,然后绘制的图片路径使用该方法返回的路径(文件的下载域名需要在微信的后台配置一下)