解决微信小程序canvas层级太高覆盖原生组件问题

解决微信小程序canvas层级太高覆盖原生组件问题

我的项目需求是在同一个页面上用echart显示图表，但由于底部的tab栏不是原生组件，所以在上下滑动的时候会被canvas覆盖，该方法的应该不适应弹窗覆盖的问题。

开发框架：uniapp

echarts组件：echarts-for-wx

在网上搜了好几种解决方法，有用cover-view的，有用图片的，cover-view在我的项目里无效，很奇怪，所以只能把canvas转换为图片，由于使用第三方组件，所以在转换的时候遇到不少困难。

坑1

如果使用最新的canvas 2D来转换，uni.canvasToTempFilePath({canvasId:this.canvasId})这里不能填canvasId，只能填canvas:this.canvas，这里的this.canvas是canvas的实例。

坑2

使用uni.canvasToTempFilePath方法的时候要加settimeout方法，因为要先等canvas加载完才能生成图片。

坑3

由于使用了settimeout，uniapp不能在更新视图，这点我也非常奇怪，用this.$forceUpdate()也没有效果。

我的方法

踩完三个坑之后，好像出不来了。我的方法是不用settimeout，监听页面的滑动事件，当页面滑动到一定高度的时候就触发生成图片的方法，并隐藏canvas。实际上当你点进去，再滑动到指定位置的时候，canvas早就加载出来了，所以这个方法是行得通的。

在uni-ec-canvas.vue中添加该方法来生成图片

transformImage(){
			  var that = this
			  	uni.canvasToTempFilePath({
			  	canvasId:this.canvasId,
			  	success: (res) => {
			  		console.log(res)
			  		let tempFilePath = res.tempFilePath;
							uni.setStorageSync("imageUrl",tempFilePath)
			  		this.imgSrc = tempFilePath;
			  		
			  	},
			  	fail: (res) => {
			  		console.log(res)
			  	}
			  }, this);
		  },

大概步骤就是在uni.canvasToTempFilePath的成功回调函数里，用uni.setStorageSync存储图片路径

在父组件中

onPageScroll(res) {
			// console.log(res)
			if(res.scrollTop == 300){
				this.$refs.canvas1.transformImage()
			} else if(res.scrollTop>=400 && res.scrollTop<=410){
				this.fansile = false
			}
			this.canvasImgUrl = uni.getStorageSync("imageUrl")
		},

添加onpagescroll事件，当页面距离顶部的高度等于300的时候，调用子组件的transformImage()事件并生成图片，并且当页面距离顶部的高度到达一定范围的时候，隐藏canvas，也就是this.fansile = false，最后将缓存里的图片路径赋值给image标签

父组件html

<view class="container">
					<uni-ec-canvas v-if="fansile" class="uni-ec-canvas1" id="uni-ec-canvas1" ref="canvas1" canvas-id="unieccanvas1" :ec="ec1"></uni-ec-canvas>
					<view style="width: 750upx; height: 500upx;">
						<image :src="canvasImgUrl" mode="widthFix" style="width: 750upx;height: 500upx !important;"></image>
					</view>
					
				</view>

到此为止，完美解决！