uni-app 引用官方gcanvas demo的fillText无法绘制中文 秋云的图表引用gcanvas同样无法绘制中文

uni-app 引用官方gcanvas demo的fillText无法绘制中文 秋云的图表引用gcanvas同样无法绘制中文

1 回复

更多关于uni-app 引用官方gcanvas demo的fillText无法绘制中文 秋云的图表引用gcanvas同样无法绘制中文的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 gcanvas 绘制中文时出现乱码或无法显示，通常是由于字体文件未正确加载或编码问题导致的。以下是几个关键排查点：

  1. 字体文件路径：确保字体文件（如 .ttf）放在项目的 static 目录下，并通过正确路径引用。例如：

    const fontPath = '/static/font.ttf'; // 静态资源路径

  2. 异步加载字体：在 onReady 生命周期或绘制前，先加载字体文件：

    const ctx = gcanvas.getContext('2d');
ctx.loadFont(fontPath, 'CustomFont'); // 加载并注册字体

  3. 设置字体样式：绘制前指定已加载的字体族：

    ctx.font = '24px CustomFont'; // 使用注册的字体
ctx.fillText('中文文本', x, y);

  4. 检查字体兼容性：部分中文字体（如思源黑体）兼容性较好，可尝试替换字体文件测试。

  5. 秋云图表适配：若使用 uCharts 等图表库，需在图表配置中指定字体：

    opts.font: { fontPath, fontFamily: 'CustomFont' }

注意：小程序平台需在 manifest.json 的 mp-weixin 节点下声明字体文件：

"requiredPrivateInfos": ["loadFontFace"]
回到顶部