小程序-canvas在IOS手機層級最高無法展示問題

要求的效果：

正面：

背面：

 

在開發者工具 利用css 和定位實現了一個版本

　

.topBox.on { transform:rotateY(180deg); } .topBox { position:relative; height:300rpx; transform-style:preserve-3d; transition:1s; } .codeBg { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); backface-visibility:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; position:absolute; width:600rpx; height:300rpx; background:#fff; }

此時 在真機上測試 會發現出現問題

canvas在最上面  之后看官網api，原生組件的使用注意點，層級最高,其他組件的z-index無論為多少，都無法蓋在原生組件上。

為了解決覆蓋問題，在翻轉在背面的時候 我進行了 對畫布的清空，這樣畫布雖然在最上層 但是不會遮擋住后面的會員卡信息

但是會出現一個問題  翻轉事件的觸發問題，我的翻轉事件是綁定在 最大的容器上 （包裹會員卡和二維碼的大盒子容器）

 <view class="topBox {{isTrans?'on':''}}" bindtap='toTrans'>

　　在安卓上，效果是可以實現的，在ios上，canvas所占領的位置 會無法觸發翻轉事件，為了解決這個問題 我在canvas上進行了方法綁定

<canvas class="canvas " canvas-id='canvas'  bindtouchstart="moveStart" bindtouchmove="move" bindtouchend="moveEnd"></canvas>

　　監聽了canvas的觸摸事件，在確定為ios的設備上 進行事件觸發

//畫布的觸摸事件
  moveStart:function(){
    var that=this;
      
    if (!that.isIOS()) { return }
    console.log(1)
      var a=setInterval(function(){
        that.setData({
          moveTime:that.data.moveTime++
        })
        console.log(that.data.moveTime)
      },10)
    
      that.setData({
        timeBar:a
      })
  },
  move:function(){
    if (!this.isIOS()) { return }
    console.log('移動了')
  },
  
  moveEnd:function(){
    var that=this;
   
    if (!that.isIOS()){return null}
    console.log(this.data.moveTime)
    if (this.data.moveTime<500){
       
     
        clearInterval(that.data.timeBar)
        that.setData({
          moveTime: 0
        })
  
       this.toTrans();
      }else{
        clearInterval(that.data.timeBar)
        that.setData({
          moveTime: 0
        })
      }
  },

　　設置一個定時器，獲取觸摸開始到結束的時間超過500ms為 長按不進行翻轉事件的觸發，小於500ms的確定為觸發事件

isIOS: function () {
    var flag = false;
    wx.getSystemInfo({
      success: function (res) {
        if (res.platform == "ios") {
          flag = true
        }
      }
    })
    return flag;
  },
 // 卡片旋轉
  toTrans:function(){
  var that=this;
  that.setData({
    isTrans: !that.data.isTrans
  })
   
  if(that.data.isTrans){
    that.getCode();
  }else{
    const ctx = wx.createCanvasContext('canvas')
    ctx.clearRect(0, 0, 125, 125)
    ctx.draw()
  }
  },
data里聲明moveTime:0,
    timeBar:null

　　這樣就完成了 正反兩面的翻轉問題，但是還是有一點小問題 就是 清空canvas以后 會出現一瞬間的空白 暫時還沒有好的辦法解決 如果大家有好的方法 請一定留言告訴我