专注Java教育14年 全国咨询/投诉热线:400-8080-105
动力节点LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 告诉你如何解决小程序canvas层级太高的问题

告诉你如何解决小程序canvas层级太高的问题

更新时间:2022-11-28 10:38:05 来源:动力节点 浏览1036次

首先是在wxml页面的处理,我的宽高设置的是自适应宽高,只需改成自己的宽高即可,关键部分是加一个判断 wx:if="{{!canvasImg}}"

<canvas style='width: {{windowWidth}}px; height: {{windowHeight}}px'  bindtouchstart="canvasTouchStart" bindtouchmove="touchMove" bindtouchend="canvasTouchEnd" canvas-id="canvas"  wx:if="{{!canvasImg}}"></canvas>
  <image wx:else src="{{canvasImg}}" style="width: {{windowWidth}}px; height: {{windowHeight}}px" />

然后是js页面,弹框结束时直接 canvasImg=null 即可

// 需要让 弹窗等 出现在canvas上的事件
  handleCanvarToImg() {
    var that=this;
    var windowWidth = that.data.windowWidth;
    var windowHeight = that.data.windowHeight;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: windowWidth,
      height: windowHeight,
      canvasId: 'canvas',
      success: function(res) {
        that.setData({ canvasImg: res.tempFilePath});
      }
    });
  },
  // 最后弹窗等消失时,触发的事件中需将canvasImg初始化(=null)

 

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>