uni-app nvue中使用canvas 首次获取字符串长度为undefined

uni-app nvue中使用canvas 首次获取字符串长度为undefined

操作步骤：

  • context.measureText(text).width

预期结果：

  • 首次返回正确长度

实际结果：

  • undefined

bug描述：

nvue中使用canvas 首次获取字符串长度为undefined，图片为官方示例演示。 api ：measureText

开发环境 版本号 项目创建方式
PC开发环境 macOS Big Sur 11.4 HBuilderX
手机系统 iOS
手机系统版本号 IOS 14
手机厂商 苹果
手机机型 iphones 6s

图片


更多关于uni-app nvue中使用canvas 首次获取字符串长度为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

目前做了兼容判断，如果获取为undefined，则使用自定义方法获取文本长度

更多关于uni-app nvue中使用canvas 首次获取字符串长度为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，运行的是哪个示例？ 涉及canvas的部分，或者使用vue、或者使用web-view。不推荐使用nvue的canvas

在 nvue 的 canvas 中首次调用 measureText 返回 undefined，通常是由于 canvas 上下文尚未完全初始化或渲染导致的。这是一个已知的异步问题，尤其在 iOS 上较常见。

解决方案：

  1. 延迟执行：在 canvas 渲染完成后，使用 setTimeout 或 nextTick 延迟调用 measureText，确保上下文已就绪。

    this.$nextTick(() => {
    const width = context.measureText(text).width;
    console.log(width); // 应返回正确数值
});

  2. 确保绘制完成：在调用 measureText 前，先执行一次简单的绘制操作（如 fillText），强制上下文初始化。

    context.fillText('', 0, 0); // 初始化上下文
const width = context.measureText(text).width;

  3. 检查上下文类型：确认使用的是 2d 上下文（nvue 的 canvas 仅支持 2d）。

    const context = canvas.getContext('2d');
回到顶部