微信小程序Canvas隐藏问题

  当前微信小程序的Canvas还存在不足，使用Canvas画图制作图片时，Canvas无法进行隐藏，会显示在界面上。

 

 
 

错误隐藏方式

不可以使用wx:if隐藏

wx:if会让canvas销毁，而不是隐藏。
使用wx:if进行隐藏会导致无法将Canvas生成图片，对其进行操作；会报错提示：画板为空
canvasToTempFilePath: fail canvas is empty
包括对Canvas外加一个view也不可以使用wx:if
 
 

Canvas的直接隐藏无法使用

  Canvas 的直接隐藏目前不可用 display：none，只要使用上线文draw绘制就会显示在页面最上层，遮盖其他内容。Canvas组件的显示层级是最高的，它会显示在你的说有组件之上。
 
 

目前可行的隐藏方式

对包含Canvas的view设置隐藏

<view style='width:0px;height:0px;overflow:hidden;'>
  <canvas canvas-id='canvas'></canvas>
</view>

利用对于包含Canvas的view进行隐藏，以达到隐藏Canvas的效果。

 
 

将Canvas放到屏幕之外

对Canvas组件设置位置属性，使其在不滑动屏幕的时候看不见，然后设置屏幕禁止滑动。

  <view style="position:fixed;top:99999999999px;">
      <canvas canvas-id='canvas'></canvas>
  </view>

然后在json文件中设置禁止滑动。

    "disableScroll": true

  这样写的方式就会导致页面无法滑动若页面需要显示的内容一个屏幕展示不了的时候，这个方法将无法使用。
 
 

常见错误

canvasToTempFilePath: fail canvas is empty

1. 使用了wx:if
   使用了wx:if导致canvas被销毁，无法获取。
2. 自制组件
   自制组件里得用this canvasToTempFilePath({},this) 加上this