uni-app中CanvasContext.font为什么不起作用

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app中CanvasContext.font为什么不起作用

const instance = getCurrentInstance() const picCanvas = uni.createCanvasContext(‘picCanvas’, instance)

uni.loadFontFace({ family: ‘testFace’, source: ‘url("${config.baseUrl}/static/ttf/FZSEJW.TTF)’, success() { picCanvas.font = ${Math.ceil(txtArr.value[0].fontSize * r)}px "shaoer" picCanvas.fillText(txtArr.value[0].val, left1, top1) } })

这样写绘制出来的文字是默认字体，在onLoad中调用loadFontFace加载字体，再设置picCanvas.font再绘制文字还是默认字体。有大神能帮忙解决这个问题吗？怎么搞都只能绘制默认字体，是怎么回事呢？


Harmonyos Next教程
1 回复

在uni-app中使用Canvas绘制图形时，CanvasContext.font 属性用于设置绘制文本的字体样式，包括字体大小、字体粗细、字体族等。如果 CanvasContext.font 不起作用，可能是由于以下几个原因：

  1. 设置时机不正确：确保在设置 font 属性之后再调用绘制文本的方法（如 fillText 或 strokeText）。

  2. 属性格式错误：font 属性的格式必须正确，例如 "20px Arial" 或 "bold italic 20px Arial"。

  3. 上下文丢失：确保在设置和绘制操作之间，Canvas上下文没有被重置或丢失。

  4. Canvas版本或兼容性问题：检查uni-app和Canvas组件的版本，确保没有已知的bug或兼容性问题。

以下是一个正确的使用 CanvasContext.font 的示例代码：

// 获取canvas上下文
const ctx = uni.createCanvasContext('myCanvas');

// 设置字体样式
ctx.setFontSize(20); // 也可以直接使用 ctx.font = '20px Arial';
ctx.setFontWeight('bold');
ctx.setFontFamily('Arial');
// 或者合并成一行设置
// ctx.font = 'bold 20px Arial';

// 设置文本对齐方式
ctx.setTextAlign('center');

// 设置文本基线
ctx.setTextBaseline('middle');

// 填充文本颜色
ctx.setFillStyle('red');

// 绘制文本
ctx.fillText('Hello, uni-app!', 150, 150);

// 将绘制操作提交到画布上
ctx.draw();

注意：在uni-app中，setFontSize, setFontWeight, setFontFamily 等方法并不是标准的Canvas API，而是uni-app对Canvas API的封装。直接使用 ctx.font 属性设置字体样式通常是更标准和兼容的做法。

如果上述代码仍然无法正确设置字体样式，请检查以下几点：

  • 确认 myCanvas 是页面上Canvas组件的正确ID。
  • 确保在调用 draw() 方法前，所有绘制操作（包括设置字体样式）都已经完成。
  • 查看控制台是否有错误信息，这可能会提供关于问题的更多线索。

如果问题依旧存在，建议查阅uni-app的官方文档或社区论坛，看看是否有其他开发者遇到并解决了类似的问题。

回到顶部