收藏
回答

canvas 2d开发者工具中可以得到actualBoundingBoxAscent但真机调试没有?

const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object
text.actualBoundingBoxAscent; // 15.633333333333333;  开发者工具中有值,但微信真机调试没有这个属性值


对应的test.js文件是:
 wx.createSelectorQuery()
    .select('#secondCut'// 在 WXML 中填入的 id
    .fields({ nodetruesizetrue })
    .exec((res) => {
        const canvas = res[0].node
        const cdx = canvas.getContext('2d')
        // Canvas 画布的实际绘制宽高 
        let width = res[0].width
        let height = res[0].height
     
        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio 
        canvas.width = width * dpr
        canvas.height = height * dpr
        cdx.scale(dpr, dpr)
              
        cdx.clearRect(00, width, height)
        cdx.rect(00, width, height);
        cdx.fillStyle="white"; 
        cdx.fill(); 
        
        //绘制标题
        cdx.font="200px bolder";
        cdx.fillStyle = "black"; 
        cdx.textAlign="center";   
        let measureText=cdx.measureText("测试文字")
        console.log(measureText)
               //measureText.actualBoundingBoxAscent; // 开发者工具中有值,但微信真机调试则没有这个actualBoundingBoxAscent属性
 
    })  
  },
对应的test.wxml内容是:
 


最后一次编辑于  星期日 14:47
回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员--Demons
    社区技术运营专员--Demons
    星期日 14:22

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    星期日 14:22
    有用
    回复 13
    • 哄哄
      哄哄
      星期日 14:35
      调用measureText这个方法
      开发者工具中调用后获取的内容参考第一个图


      在真机调试中获取的内容参考第二图


      也就是说measureText两次调用返回的内容不一样
      无法在真机上获取actualBoundingBoxAscent的值
      星期日 14:35
      回复
    • 哄哄
      哄哄
      星期日 14:53
      https://developers.weixin.qq.com/s/qPcrM0mc7cY6代码片段
      星期日 14:53
      回复
    • 哄哄
      哄哄
      星期日 14:55
      index.js中第36行console.log(measureText)
      星期日 14:55
      回复
    • 社区技术运营专员--Demons
      社区技术运营专员--Demons
      星期日 15:23回复哄哄
      你是什么机型,我这边安卓加苹果都有输出!!!!
      星期日 15:23
      回复
    • 哄哄
      哄哄
      星期日 15:30回复社区技术运营专员--Demons
      安卓红米K20 PRO
      星期日 15:30
      回复
    查看更多(8)
登录 后发表内容