剩人
剩人
  • 发布:2019-10-26 16:38
  • 更新:2019-11-01 11:58
  • 阅读:782

【报Bug】h5下canvas在隐藏层下初始化bug

分类:HTML5+

详细问题描述

canvas如果在初始化的时候处于隐藏层,第一次绘制将显示空白,通过dom节点查看canvas初始化后的宽高都是0。第二次及以后绘制就正常显示

在我的运用中,当用户第一次打开的界面是一个表格,这时候看到dom节点的canvas的宽高都是0(红线圈出部分),canvas的上一个节点的宽高是对的(绿色圈出的部分)

当界面第一次切换到图表时,这时候canvas的宽高是对的,但是图表出不来:

随便再次点击菜单(切换别的菜单请求数据绘制),这时候canvas正常了

微信小程序、安卓和ios不存在相同的情况,一切正常。

[步骤]

  1. canvas被封装到了组件中,在页面初始化时初始化组件并设置canvas的宽高;
  2. 根据菜单类型切换不同的界面
  3. 第一次切换到图表(canvas)界面时,绘制的canva空白,后期绘制一切正常

示例代码:

<template>  
    <view>  
           <view v-show="isChart"><mychart-comp chartWidth="300" chartHeight="300" @onInit="chartInit()" /></view>  
           <view v-show="!isChart">my other cantents.</view>  
    </view>  
</template>  
<script>  
 export default {  
        data() {  
            return {  
                 isChart:false  
            }  
         }  
}  
</script>

[结果]

[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
[IDE版本号]
HBuilderX 2.3.5.20191018-alpha

[windows版本号]

[mac版本号]
macOS Catalina 10.15

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
h5异常

[运行端版本号]

[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]

2019-10-26 16:38 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复