wx:if 跟 canvas绘图 一起使用的bug 微信小程序 canvas 绘图的踩坑

Posted @@@-小草

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wx:if 跟 canvas绘图 一起使用的bug 微信小程序 canvas 绘图的踩坑相关的知识,希望对你有一定的参考价值。

微信小程序

问题描述
当使用wx:if="{{showStatus}}"  去切换canvas 的消失与出现时,第一次渲染会成功
当关闭即设置showStatus为false,然后再次设置showStatus为true,会发现canvas 标签出现,但是内容为空

解决方案
1、this.setData({
showStatus为true
}) 时,不要立刻执行渲染函数,设置一个定时器,即

setTimeout(this.onDrawCanvasHandler,20)

大于20ms 就可以,但是这种做法不太保险,这个定时器的时候不确定

2、使用hidden="{{!showStatus}}"代替 wx:if
3、canvas 使用position,隐藏时,设置top/left/right/bottom 无限远即可

这是一个狠坑啊
————————————————
版权声明:本文为CSDN博主「gzyzwx」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/gzyzwx/java/article/details/84337023

以上是关于wx:if 跟 canvas绘图 一起使用的bug 微信小程序 canvas 绘图的踩坑的主要内容,如果未能解决你的问题,请参考以下文章

图形基础篇02 # 指令式绘图系统:如何用Canvas绘制层次关系图?

图形基础篇02 # 指令式绘图系统:如何用Canvas绘制层次关系图?

前端笔记 — canvas

canvas 绘图画出的线条粗细不一致

使用 canvas 绘图的几种方法

canvas 2D绘图