canvas绘成的饼型图后，出现新的遮罩，会出现层级问题？ - WXOPEN Club

这是模拟器上的情况，没有问题

点击店铺汇总，会出现弹框，但是在ios 和android 手机上，扇形图会出现在最上面，已经查询相关的资料

大致过程是，利用wx.canvasToTempFilePath生成图片地址赋值到image标签上，然后把canvas隐藏起来，在问题是 image 没有显示出来(宽，高的属性已设置)，返回的地址是 http://tmp/wx07b3c50d6a28ac9c.o6zAJs6JN-jvYOR0R9t0jqu0ewYY.e9LkHYuQxhrv21da755c451529527b33634676f3ee2b.png在手机上的地址是 wxfile://temp_…png,无法显示。<cover-view></cover-view> 也尝试的试用过了，也不行。好奇你们是怎么解决canvas遮挡住别的层级的问题，最开始用 echarts.js 后来用wxchart.js 求解，主要是自己舍不得这个底部出现的弹框，想解决这个问题，真的不行，我就换个交互了，比如跳页面什么的，希望有人解惑，谢谢

1 回复

tangxiulan1 楼6 年前

此问题已经解决。 wx.actionSheet虽然难看，至少能用吧。。。最先用的echart.js的小程序组件，因为效果多，内容丰富，挺好用的。由于自己懒得写组件的样式，就用了有赞的组件vant（有兴趣的朋友可以看看，有react， vue，weapp的，至少还有人会维护）中的actionSheet，但也暴露出canvas原生组件层级的问题，详细过程请看上面。然后换wxchart.js，很可惜，作者早已不维护了，github上还能搜索到。其实比echart.js方便很多，至于的为什么wx.canvasToTempFilePath生成图片地址赋值给image，就不得而知了，在微信社区各种搜索，看各种提问。

有人提出用了Painter这个，看了，虽然不能解决自己的问题，但是这个挺好的，以后做图片分享，相册或许可以用到。要说这次得到了什么？或许老老实实用微信提供的，就没这么多屁事了吧，花里胡哨的，作死（吐槽自己）