微信小程序-fix canvas原生组件最顶层

写在前面

• 大家应该都知道过，在微信小程序中，canvas等原生组件的层级是最高的，页面中无论你设置多大的z-index都无法覆盖在其之上，这就可能会产生一些问题
• 就像这样
  • 
  • 柱状图是用canvas画的，它置于了我的tooltip之上。【这看起来真是一个可怕的问题

---

解决问题

• 微信官方提供了cover-view原生组件，覆盖在原生组件之上的文本视图
• 微信官方提供了将canvas转化为图片的方式–wx.canvasToTempFilePath，这样就可以”降级“

方法一：cover-view

• 将tooltip用cover-view改写，效果如下
  • 
  • 看上去，是解决了我们的问题，且tooltip后的灰色背景不能滑动了，【妈耶，好棒！
  • 但是，这产生了一个：当文本超出tooltip宽度时，scroll-y: auto，失效了，溢出部分被直接截取
  • 罪魁祸首就是它
    • 
  • 那我们可以：
    • 在tooltip分段内容中加上

      .modal-layer-content-rule {
               
          white-space: pre-wrap;
      }
      

    • 在内容wrapper中加上

      .modal-layer-content {
               
          overflow: scroll;
      }
      

  • 完美解决
    • 

方法二：wx.canvasToTempFilePath

• 首先我们要做的就是将网络图片绘制进canvas，官方关于canvas类型有两种
  
• 新canvas 2D接口尝试

  const query = wx.createSelectorQuery().in(this)
  query.select('#myCanvas')
    .fields({
        node: true, size: true })
    .exec((res) => {
       
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
      const img = canvas.createImage()
      img.onload = () => {
       
        ctx.drawImage(img, 0, 0, 100, 100)
      }
      img.src = 'https://p0.meituan.net/myvideodistribute/0990cc2062e81ab6cc11fd8690f8755042005.jpg'
      // 这种方式获取canvas区域隐含的像素数据
      console.log(ctx.getImageData(0, 0, 150, 100).data)
    })
  

  <canvas type="2d" id