最近在微信小程序使用wxcharts.js绘图时遇到了一个问题， 因为在最终绘制完成的页面要做一个条件筛选，会有一个弹出框，在微信开发者工具上运行是是没有任何问题的，但到了真机预览时遇到了问题，绘制完成的图形总是在最上层，就把弹出框给覆盖了。
根据官方文档，cover-view覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image、button。不可以使用input组件，这与我的需求不相符合，所以只能另辟蹊径。
详情请看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
好，话不多说，直接上图，下面来看一下问题：
图片.png
解决之后的效果图：
图片.png
下面重点来了，我来说一下我的解决思路：我在data里定义了一个radarImg，然后wxml中判断，是否这个值是否有效，若有效，canvas隐藏；否则，显示canvas。然后在页面渲染图表时，执行了wx.canvasToTempfilepath方法，将生成的图标转化为图片。此时给radarImg赋值，canvas隐藏，image显示。下面是具体实现代码：
wxml:
<view class="canvas-content">
<canvas
canvas-id="radarCanvas"
wx:if="{{!radarImg}}"
style="width: 260px; height: 180px;">
</canvas>
<image wx:else src="{{radarImg}}" style="width: 260px; height: 180px;" />
</view>
js:
handleCanvarToImg(that) {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 260,
height: 180,
canvasId: 'radarCanvas', //对应canvas的id
success: function(res) {
that.setData({
radarImg: res.tempFilePath
});
}
});
},
// 在drawRadar之后，调用将canvas转化为图片方法(此处我是在点击按钮出现弹窗的点击事件中调用this.handleCanvarToImg(this)实现)
this.drawRadar(titleArr, countArr);
this.handleCanvarToImg(this);
好了，基本功能是实现了，顺道也说下我的小优化
初次渲染的时候会出现闪现的问题，然后我就给弹窗添加了一个动画
下面展示一个小demo
- wxml:
<view class='shade' hidden='{{popup}}' bindtap='hidePopup'></view>
<view class='shade_box popup' hidden='{{popup}}'>
<view class='title'><text>弹窗：</text></view>
<view class='content'>我是一个有动画的特效的窗口</view>
<view class='copy'>© 2018 helang.love@qq.com</view>
<view class='msg' bindtap='hidePopup'>点击遮罩层关闭弹窗</view>
</view>
<view style='margin:20rpx 50rpx;'>
<button type='primary' bindtap='showPopup'>打开弹窗</button>
</view>
- wxss:
.shade {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.75);
z-index: 10;
}
.shade_box {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 11;
min-width: 200rpx;
min-height: 200rpx;
font-size: 28rpx;
box-sizing: border-box;
color: #333;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
letter-spacing: 0;
word-wrap: break-word;
animation-name:popup;
animation-duration:0.2s;
animation-timing-function:linear;
animation-delay:0;
animation-iteration-count:1;
animation-direction:normal;
}
@keyframes popup
{
from{opacity:0;transform:scale(0.3,0.3);}
to {opacity:1;transform:scale(1,1);}
}
/* 当前弹窗样式 */
.popup{
width: 600rpx;
height: 600rpx;
background-color: #ffffff;
}
.popup .title{
padding: 0 20rpx;
border-bottom: #e5e5e5 solid 1px;
height: 70rpx;
line-height: 70rpx;
font-size: 32rpx;
background-color: #f6f6f6;
}
.popup .content{
margin: 100rpx;
font-size: 40rpx;
text-align: center;
color: #0099ff;
}
.popup .copy{
color: #999999;
text-align: center;
}
.popup .msg{
color: #ff0000;
text-align: center;
margin-top: 30rpx;
}
- js：
Page({
data: {
popup: true
},
/* 隐藏弹窗 */
hidePopup(flag = true) {
this.setData({
"popup": flag
});
},
/* 显示弹窗 */
showPopup() {
this.hidePopup(false);
}
})
好啦，最终完美实现想要的效果，收工~！
