导航

小程序canvas组件层级过高问题的解决方法

Posted on 2020-08-04 11:34  WinChance  阅读(8144)  评论(0编辑  收藏  举报

HTML:

<canvas canvas-id="canvasLine" v-show="!charImg" id="canvasLine" class="charts" disable-scroll="true" @touchstart="touchLine"
@touchmove="moveLine" @touchend="touchEndLine"></canvas>
<!-- image用来解决canvas组件层级过高问题 -->
<image v-if="charImg" :src="charImg" class="charts"></image>

Vue方法:

// 解决canvas层级过高,遮挡弹出层的问题;参考:https://blog.csdn.net/liya_nan/article/details/82023761
            handleCanvarToImg(that) {
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: uni.upx2px(702),
                    height: uni.upx2px(544),
                    canvasId: 'canvasLine',
                    success: function(res) {
                        that.charImg = res.tempFilePath;
                        // console.log('that.charImg',that.charImg);
                    }
                });
                
            }

参考:

https://blog.csdn.net/liya_nan/article/details/82023761