Taro Canvas 组件在支付宝小程序里 表现 模糊

[jschyz]

相关平台

支付宝小程序

小程序基础库: 最新
使用框架: React

复现步骤

核心代码

注意 width，height 2个参数，设置后无效

import { Canvas} from "@tarojs/components";
import "./index.scss";

exprot defult () => {

  return (
    <Canvas
        canvasId='my-canvas'

         width='200'
         height='200'

         style='width: 100px;height:100px'
         className='my-canvas'
        />
  )
}

支付宝标注：

如果需要在高 DPR（devicePixelRatio）下取得更细腻的显示，需要先将 canvas 用属性设置放大，用样式缩小，例如

<!-- getSystemInfoSync().pixelRatio === 2 -->
<canvas width="200" height="200" style="width:100px;height:100px;"/>

期望结果

期望能在调试器面板 AXML 中
出现

<canvas 
  width='200' 
  height='200'
  style='width:100px;height:100px;'></canvas>

实际结果

实际出现

<canvas 
  style='width:100px;height:100px;'></canvas>

环境信息

👽 Taro v3.0.6


  Taro CLI 3.0.6 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.3.1 - ~/.nvm/versions/node/v12.3.1/bin/node
      Yarn: 1.22.4 - ~/.yarn/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v12.3.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.7 => 3.0.7 
      @tarojs/components: 3.0.7 => 3.0.7 
      @tarojs/mini-runner: 3.0.7 => 3.0.7 
      @tarojs/react: 3.0.7 => 3.0.7 
      @tarojs/runtime: 3.0.7 => 3.0.7 
      @tarojs/taro: 3.0.7 => 3.0.7 
      @tarojs/webpack-runner: 3.0.7 => 3.0.7 
      babel-preset-taro: 3.0.7 => 3.0.7 
      eslint-config-taro: 3.0.7 => 3.0.7 
      react: ^16.10.0 => 16.13.1 
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.3 

[jschyz]

@Chen-jj 我觉得是runtime库这里没有透传下去，但是无从定位编译后的代码哪段出问题

[now1then]

遇到同样问题。在 支付宝小程序中当前 taro3.0.6使用自定义组件无效，高清屏canvas 画出的图形模糊。

[Chen-jj]

看看 base.axml 中 Canvas 的模板是不是漏了 width 和 height

[jschyz]

看看 base.axml 中 Canvas 的模板是不是漏了 width 和 height

的确缺少 width 和 height, 期待你们修复