|
背景：项目需要自定义底部导航栏。但是上面显示饼状图两个，刚好会覆盖底部导航栏。
效果图：让扫一扫按钮不被饼状图覆盖。
1、搜索发现有《cover-view》这么个标签。可以高于画布，哎这不错，试试。
html：
<cover-view>
<button class="scan" style="background:url('{{storeImgUrl}}scan.png') no-repeat;background-size:100%;" bindtap='getScancode'></button>
</cover-view>
css：
/* 扫一扫 */
.scan{
width: 200rpx;
height: 200rpx;
position: fixed;
bottom: 30rpx;
left: 275rpx;
z-index: 1000;
}
运行不显示，必须要把cover-view这标签及里面的东西放入canvas中才能覆盖上，但是扫一扫这个标签需要在页面底部。用定位fixed不好使。咋整？？？
用cover-view不行，换换。
看到有大神说可以把画布转换成图片，哎，听起来不错试试。
html：
<canvas hidden='{{imgSrc}}' canvas-id="pieCanvas1" class="canvas" style="height:300px;width:{{width}}px;" bindtouchstart="touchHandler1"> </canvas>
<image hidden='{{!imgSrc}}' src="{{imgSrc}}" style="width:{{width}}px;height:300px" />
js：
data中定义imgSrc变量：
data: {
imgSrc:'',//图片
},
// 生成图片方法
canvasToTempImage: function () {
var that = this
setTimeout(function() { /// 定时器一定要加，之前没加图片不出来，闹心半天。
wx.canvasToTempFilePath({
canvasId: "pieCanvas1",
success: (res) => {
console.log(res)
let tempFilePath = res.tempFilePath;
that.setData({
imgSrc: tempFilePath,
});
}
}, this);
}, 2000);
},
//调用生成的方法。
我是用的别人的插件做的饼状图。在饼状图设置完数据、显示之后再调用生成图片方法。
| 
转播
