Taro 2.2.6版本下的Canvas在缩放动画开始前无法获取具体宽高

[xuanzebin]

相关平台

H5

浏览器版本: Chrome 62
使用框架: React

复现步骤

新建一个Canvas组件，并通过动画使其进行缩放：

import Taro from '@tarojs/taro'
import { View, Canvas } from '@tarojs/components'

import BaseComponent from '../../../../../common/biz/base'

import './chart.scss'

class Chart extends BaseComponent {
  componentDidMount () {
    const ctx = Taro.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 100)
    ctx.draw()
  }
  render () {
    return (
      <View className='chart-container'>
        <Canvas style={{ width: '350px', height: '400px', background: 'white' }} canvasId='myCanvas' />
      </View>
    )
  }
}

export default Chart

会发现在canvas的宽高因为缩放动画的原因初始值均为0

期望结果

动画前后，canvas元素的宽高均可以自由设置

实际结果

动画前后，canvas元素的宽高均为0

环境信息

👽 Taro v2.2.6


  Taro CLI 2.2.6 environment info:
    System:
      OS: macOS 10.14.4
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.7.0 - ~/.nvm/versions/node/v11.15.0/bin/npm
    npmPackages:
      @tarojs/components: 2.2.6 => 2.2.6
      @tarojs/plugin-babel: 2.2.6 => 2.2.6
      @tarojs/plugin-csso: 2.2.6 => 2.2.6
      @tarojs/plugin-sass: 2.2.6 => 2.2.6
      @tarojs/router: 2.2.6 => 2.2.6
      @tarojs/taro: 2.2.6 => 2.2.6
      @tarojs/taro-alipay: 2.2.6 => 2.2.6
      @tarojs/taro-h5: 2.2.6 => 2.2.6
      @tarojs/taro-jd: 2.2.6 => 2.2.6
      @tarojs/taro-qq: 2.2.6 => 2.2.6
      @tarojs/taro-quickapp: 2.2.6 => 2.2.6
      @tarojs/taro-swan: 2.2.6 => 2.2.6
      @tarojs/taro-tt: 2.2.6 => 2.2.6
      @tarojs/taro-weapp: 2.2.6 => 2.2.6
      @tarojs/webpack-runner: 2.2.6 => 2.2.6
      eslint-config-taro: 1.3.38 => 1.3.38
      eslint-plugin-taro: 1.3.38 => 1.3.38
      nerv-devtools: ^1.4.0 => 1.5.7