- 1、原生组件层级问题(最高层)
- 2、canvas绘制圆形图片
- 3、canvas的draw(),需要等图片加载完毕之后绘制才生效
ps:在真机测试过,成功~
原生组件canvas始终在顶层
1、解决方式
– 1、cover-view
– > 覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image,可在cover-view中使用button。
– 2、cover-image
– > 覆盖在原生组件之上的图片视图,可覆盖的原生组件同cover-view,支持嵌套在cover-view里
canvas绘制圆形图片
tip:使用clip() 一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)
1、使用clip方法对画布进行裁剪
canvas的draw()需要等待图片加载完毕再绘制
- 使用promise 解决
完整踩坑demo:
wxml:
<view class="page-body-wrapper">
<canvas canvas-id="canvas" class="canvas">
<!-- 需要覆盖在原生组件上面的内容 -->
<cover-view class="cover-view" bindtap="tap1">cover-view1--tap1</cover-view>
<cover-view>
<cover-view class="cover-view" bindtap="tap2">cover-view2-tap1 </cover-view>
</cover-view>
<cover-view class="image-cnt">
<cover-image class="cover-image" bindtap="tap2" src="/images/game.png" />
</cover-view>
<!-- 需要覆盖在原生组件上面的内容 -->
</canvas>
</view>
wxss:
.canvas {
width: 304px;
height: 304px;
margin: 0 auto;
background-color:aquamarine;
}
.cover-view {
margin-left: 52px;
margin-top: 70px;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
background-color:rgba(0,0, 0, .7);
color: #fff;
}
.image-cnt {
display: flex;
align-items: center;
justify-content: center;
margin-top: -30px;
}
.cover-image {
width: 50px;
height: 50px;
}
js:
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo'),
userInfo: {}
},
onLoad: function() {
var user_icon = 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL6D31uFSDvq03aysJaxjBGVbQ8o3eRn4J1UWCmica3Os9NRcuafMicJCgg5Wblej8g12xYj1SeFMyQ/132';
const ctx = wx.createCanvasContext('canvas')
ctx.setFillStyle('#e2e2e2');
ctx.arc(150, 100, 80, 0, 2 * Math.PI);//设置头像描边
ctx.fill();
ctx.restore();
ctx.beginPath();//开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
ctx.setFillStyle('#ccc');
ctx.arc(150, 100, 78, 0, 2 * Math.PI);
ctx.fill();
ctx.clip();//一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)
// 确保图片加载了之后再进行绘制
var promise1 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: user_icon,
success: function(res) {
resolve(res);
}
});
});
Promise.all([promise1]).then(function(values) {
console.log(values[0].path);
ctx.drawImage(values[0].path, 70, 20, 160, 160);//绘制图片
ctx.draw();
});
},
bindGetUserInfo(e) {
console.log(e.detail.userInfo);
this.setData({
'userInfo': e.detail.userInfo
})
},
tap1: function() {
console.log('tap1')
},
tap2: function() {
console.log('tap2')
}
})
ps:还是多认真看看文档
参考:
– https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
– https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html