画布绘制文字,垂直居中

需要绘制文字的时候能够垂直居中。

HarmonyOS
2024-09-23 12:08:35
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

参考官网api:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5

示例如下:

Canvas(this.context)  
  .width('100%')  
  .height('100%')  
  .backgroundColor('#ffff00')  
  .onReady(() =>{  
    this.context.fillStyle = '#0000ff'  
    this.context.font = '18vp'  
    this.context.fillStyle = Color.Black  
    this.context.textAlign = 'center'  
    this.context.textBaseline = 'middle'  
    let str = (-10.3456).toFixed(2)  
    let metrics = this.context.measureText(str)  
    this.context.fillStyle = Color.Green  
    //这里把文字显示的区域绘制出来  
    this.context.fillRect(10, (this.context.height - metrics.height)/2, metrics.width, metrics.height)  
    this.context.fillStyle = Color.Black  
    //这里把文字绘制出来  
    this.context.fillText(str,10+(metrics.width/2), (this.context.height)/2)  
  })
分享
微博
QQ
微信
回复
2024-09-23 17:55:23
相关问题
HarmonyOS使用canvas如何使文字垂直居中
643浏览 • 1回复 待解决
画布绘制图片如何实现?
334浏览 • 1回复 待解决
HarmonyOS 文字行高设定后文字居中
367浏览 • 1回复 待解决
Text文本不垂直居中,该怎么处理呢?
3105浏览 • 1回复 待解决
HarmonyOS 画布问题咨询
232浏览 • 1回复 待解决
解决Canvas画布缩放时闪烁
1463浏览 • 1回复 待解决
HarmonyOS RelativeContainer的居中问题
659浏览 • 1回复 待解决