Taro React H5中报错: this.ctx.measureText is not a function

hs1ihplo  于 4个月前  发布在  React
关注(0)|答案(1)|浏览(51)

相关平台

H5

浏览器版本: Chrome 122.0.6261.129 (Official Build) (arm64)
使用框架: React

复现步骤

const canvas = Taro.createCanvasContext('measureText');
canvas.font = ${fontSize}px ${fontFamily} ;
const metrics = canvas.measureText(text);

期望结果

正确调用canvas.measureText函数

实际结果

提示measureText不是一个函数

环境信息

👽 Taro v3.6.24

  Taro CLI 3.6.24 environment info:
    System:
      OS: macOS 14.4
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
      Yarn: 1.22.19 - ~/.yarn/bin/yarn
      npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.24 => 3.6.24 
      @tarojs/components: 3.6.24 => 3.6.24 
      @tarojs/helper: 3.6.24 => 3.6.24 
      @tarojs/plugin-framework-react: 3.6.24 => 3.6.24 
      @tarojs/plugin-html: 3.6.24 => 3.6.24 
      @tarojs/plugin-platform-alipay: 3.6.24 => 3.6.24 
      @tarojs/plugin-platform-h5: 3.6.24 => 3.6.24 
      @tarojs/plugin-platform-jd: 3.6.24 => 3.6.24 
      @tarojs/plugin-platform-qq: 3.6.24 => 3.6.24 
      @tarojs/plugin-platform-swan: 3.6.24 => 3.6.24 
      @tarojs/plugin-platform-tt: 3.6.24 => 3.6.24 
      @tarojs/plugin-platform-weapp: 3.6.24 => 3.6.24 
      @tarojs/plugin-react-devtools: 3.6.24 => 3.6.24 
      @tarojs/react: 3.6.24 => 3.6.24 
      @tarojs/runtime: 3.6.24 => 3.6.24 
      @tarojs/shared: 3.6.24 => 3.6.24 
      @tarojs/taro: 3.6.24 => 3.6.24 
      @tarojs/taro-loader: 3.6.24 => 3.6.24 
      @tarojs/webpack5-runner: 3.6.24 => 3.6.24 
      babel-preset-taro: 3.6.24 => 3.6.24 
      eslint-config-taro: 3.6.24 => 3.6.24 
      react: ^18.0.0 => 18.2.0

补充信息

TypeError
this.ctx.measureText is not a function
Call Stack
 CanvasContext.measureText
  node_modules/.pnpm/@tarojs taro-h5@3.6.24_@tarojs components@3.6.24_@tarojs taro@3.6.24/node_modules/@tarojs/taro-h5/dist/api/canvas/CanvasContext.js:645:23
 measureText
  src/components/cell/cell-text.tsx:46:24
 eval
  src/components/cell/cell-text.tsx:84:30
 renderWithHooks
  node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:16305:18
 mountIndeterminateComponent
  node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:20069:13
 beginWork
  node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:21582:16
 HTMLUnknownElement.callCallback
  node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:4164:14
 HTMLUnknownElement.sentryWrapped
  node_modules/.pnpm/@sentry browser@7.93.0/node_modules/@sentry/browser/esm/helpers.js:101:17
 Object.invokeGuardedCallbackDev
  node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:4213:16
 invokeGuardedCallback
  node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js:4277:31
sf6xfgos

sf6xfgos1#

h5 环境下需要添加节点且渲染完成后才能正确创建上下文: Taro.createCanvasContext('measureText')

相关问题