借问各位大神, 小弟在用canvas绘图之后,出现图像层级不正确的问题?
发布于 6 年前 作者 lei97 9533 次浏览 来自 官方Issues

如下图所示, 覆盖在上层的是canvas绘制出来的图像,下层是一个compenent,做的类似弹出效果。但是被canvas覆盖了。在电脑端没有这个问题。

6 回复

你可以根据需求 使用 wx:if 。来控制显示隐藏,以及使用wx:if 的最后加载来控制层级(试试,忘记了 是否有效。)

1.你可以将canvas 绘制结果导出图片后显示在弹窗2.可以将弹窗component的view使用cover-view代替

弹窗用cover-view写

请问这个问题解决了嘛?我也遇到了这个问题 使用

<View className="panel">
           <View className="panel-background">
               <Canvas
                   type="2d"
                   className="canvas"
                   style="z-index:-10"
                   ref={(node) => { this.canvasNode = node }}
                   id="myCanvas"
               >
                   <CoverView className="panel-background-gray" ref={canvasRef}>
                       <CoverImage className="panel-background-img" src={PanelImg} alt="" />
                       <CoverView className={cs({ 'panel-loading': true, 'ani-rotate': loading })} />
                   </CoverView>
               </Canvas>
                
           </View>
       </View>

canvas 还是会覆盖coverView和coverimage

手机端是原生组件,层级最高

回到顶部