uni-app gcanvas 在nvue中不显示汉字(中文)

uni-app gcanvas 在nvue中不显示汉字(中文)

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.1.18

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：华为手机

页面类型：nvue

打包方式：云端

示例代码：
```cpp
const ganvas = this.$refs['gcanvess'];
this.canvasObj = enable(ganvas, {
bridge: WeexBridge
});
this.context = this.canvasObj.getContext('2d');
const ctx = this.context;
console.log(ctx)
ctx.drawImage(
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F10548990761%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631085943&t=7e86ef0276726e7d2a5ed21f5822c1ad',
0,
0,);
ctx.setFontSize(40)
ctx.fillText('这是个中文', 00,0)
ctx.draw(false)

操作步骤：

直接吧官方demo复制粘贴


预期结果：

显示中文

实际结果：

英文正常显示，但是中文不会显示


bug描述：

使用ctx.fillText('中文字题', 0,0)不显示
使用ctx.fillText('英文字题', 0,0)显示
英文正常显示，但是中文不会显示
这BUG这么明显，怎么还能发布当插件。。

更多关于uni-app gcanvas 在nvue中不显示汉字(中文)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

官方都不推荐使用。。。

更多关于uni-app gcanvas 在nvue中不显示汉字(中文)的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于 gcanvas 在 nvue 环境下默认不支持中文字体导致的。gcanvas 的底层实现依赖于原生 canvas，在 Android 平台上默认字体不包含中文字符集。

解决方案：

  1. 加载自定义字体文件（推荐）： 将中文字体文件（如 .ttf 格式）放入项目静态资源目录，在绘制前加载字体：

    // 加载字体（假设字体文件放在 static/font.ttf）
ctx.font = '40px "YourFontName"';
// 或者使用完整路径
ctx.font = '40px url(/static/font.ttf)';
ctx.fillText('这是个中文', 0, 0);

  2. 使用系统字体别名： 尝试使用已知支持中文的系统字体别名：

    ctx.font = '40px sans-serif'; // 或 'serif', 'monospace'
ctx.fillText('这是个中文', 0, 0);

  3. 确保字体加载完成： 如果使用网络字体，需要确保字体加载完成后再绘制：

    const fontFace = new FontFace('MyFont', 'url(/static/font.ttf)');
fontFace.load().then(() => {
    ctx.font = '40px MyFont';
    ctx.fillText('这是个中文', 0, 0);
    ctx.draw(false);
});
回到顶部