HarmonyOS 鸿蒙Next CanvasRenderingContext2D绘制文字设置字体无效

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next CanvasRenderingContext2D绘制文字设置字体无效

Canvas(this.context)
.width(‘100%’) 
.height(‘100%’)
.backgroundColor(’#ffff00’)
.onReady(() =>{
this.context.strokeStyle = ‘#0000ff’
this.context.font = ‘20px sans-serif’
this.context.fillText(‘Hanging’, 295, 120)
})
请问设置font的字符串sans-serif是注册字体库时的familyName吗?我设了familyName但是无效,请问要怎么设置字体


更多关于HarmonyOS 鸿蒙Next CanvasRenderingContext2D绘制文字设置字体无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

font-family(可选),指定字体系列,支持如下几种类型:'sans-serif', 'serif', 'monospace'。

默认值:'normal normal 14px sans-serif'。

参考demo:

[@Entry](/user/Entry)

@Component

struct Fonts {

  private settings: RenderingContextSettings = new RenderingContextSettings(true)

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {

    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      Canvas(this.context)

        .width(‘100%’)

        .height(‘100%’)

        .backgroundColor(’#ffff00’)

        .onReady(() =>{

          this.context.font = ‘30vp monospace’

          this.context.fillText(“Hello px”, 20, 60)

          this.context.font = ‘30vp sans-serif’

          this.context.fillText(“Hello vp”, 20, 100)

        })

    }

    .width(‘100%’)

    .height(‘100%’)

  }

}

更多关于HarmonyOS 鸿蒙Next CanvasRenderingContext2D绘制文字设置字体无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,如果你在使用Next CanvasRenderingContext2D绘制文字时发现设置字体无效,这通常是由于以下几个原因导致的:

  1. 字体未正确加载:确保你设置的字体名称是系统中已安装的有效字体。如果使用的是自定义字体,需要确保字体文件已正确加载到应用中,并且路径正确无误。

  2. 字体设置语法错误:检查字体设置的字符串格式是否正确。例如,ctx.font = "20px Arial" 是正确的格式,而 ctx.font = 20px "Arial" 则会导致错误。

  3. 绘制上下文未正确初始化:确认Next CanvasRenderingContext2D对象已经正确初始化,并且是在有效的画布(Canvas)元素上创建的。

  4. 系统限制或Bug:虽然不太可能,但也有可能是系统本身存在的限制或未修复的Bug。检查HarmonyOS的官方文档或更新日志,看是否有相关的说明。

  5. 缓存问题:尝试清除应用缓存或重启设备,看问题是否依然存在。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。这样可以获得更专业的技术支持和帮助。

回到顶部