今天uniapp项目中使用ucharts画一个分组柱状图,小程序预览时发现点击时颜色一直闪烁,背景也一直闪烁。
后来发现问题所在:
原来的情况是需要弹出选择框,但是canvas小程序的层级太高会遮住原生组件,所以需要在弹出选择框时转换成图片。所以我在每次图像渲染完成后都使用uni.canvasToTemplateFile把该canvas转换成图片格式,代码如下:
canvaColumn.addEventListener('renderComplete', () => { uni.canvasToTempFilePath({ canvasId: "canvasColumn", success: (res) => { console.log("图表渲染完成"); that.canvasImg = res.tempFilePath; } complete(res){ console.log(res); } }, that) });
后来发现每一次拖动图表,都会执行很多次的重新渲染,且点击也会重新渲染,才意识到可能是这个问题,
解决方法:只在弹出选择框时执行canvasToTemPlate方法,果然解决了