当前位置: 首页 > 知识库问答 >
问题:

javascript - 如何精确测量Canvas中带拼音的字体高度?

宗政永望
2024-02-21

请问如何用canvas计算带拼音的字体的高度?image.png

measureText返回的结果并不对,而且用dom的方式计算也是不准确(image.png),虚心请教各位大佬

共有1个答案

钱经业
2024-02-21

可以看下这个是不是能用
https://opentype.js.org/

Font.draw(ctx, text, x, y, fontSize, options)

Create a Path that represents the given text.

ctx: A 2D drawing context, like Canvas.
x: Horizontal position of the beginning of the text. (default: 0)
y: Vertical position of the baseline of the text. (default: 0)
fontSize: Size of the text in pixels (default: 72).
Options is an optional object containing:

kerning: if true, takes kerning information into account (default: true)
features: an object with OpenType feature tags as keys, and a boolean value to enable each feature. Currently only ligature features "liga" and "rlig" are supported (default: true).
hinting: if true uses TrueType font hinting if available (default: false).

Glyph.getBoundingBox()

Calculate the minimum bounding box for the unscaled path of the given glyph. Returns an opentype.BoundingBox object that contains x1/y1/x2/y2. If the glyph has no points (e.g. a space character), all coordinates will be zero.
 类似资料:
  • 本文向大家介绍JS使用canvas中的measureText方法测量字体宽度示例,包括了JS使用canvas中的measureText方法测量字体宽度示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS使用canvas中的measureText方法测量字体宽度。分享给大家供大家参考,具体如下: 工作项目中用到的东西,要限制一个容器的宽度,超过了这个宽度就要显示展开按钮,点击展开按钮要全

  • 本文向大家介绍如何使用C# Stopwatch 测量微秒级精确度,包括了如何使用C# Stopwatch 测量微秒级精确度的使用技巧和注意事项,需要的朋友参考一下 跟同事讨论到- 用C# Stopwatch 取得效能数值,Stopwatch.ElapsedMilliseconds 只到毫秒(ms),如果需要更高的时间精确度(微秒μs,甚至奈秒ns),该怎么做? 原以为要费番功夫,在Stackove

  • 本文向大家介绍Javascript中拼接大量字符串的方法,包括了Javascript中拼接大量字符串的方法的使用技巧和注意事项,需要的朋友参考一下 在php、python中都有heredoc方式的字符串定义方法: php: python: js拼接大量字符串没个heredoc风格的操作符是比较繁琐的: 拼接方式一: 拼接方式二: JS字符串需要打破原字符串风格,每行处理,这点有点让人受不了。 给个

  • 本文向大家介绍android实现汉字转拼音功能 带多音字识别,包括了android实现汉字转拼音功能 带多音字识别的使用技巧和注意事项,需要的朋友参考一下 android 汉字转拼音带多音字识别功能,供大家参考,具体内容如下 问题来源 在做地名按首字母排序的时候出现了这样一个bug。长沙会被翻译拼音成zhangsha,重庆会被翻译拼音成zhong qing。于是排序出了问题。 汉字转拼音库和多音字

  • 本文向大家介绍Android自定义带拼音音调Textview,包括了Android自定义带拼音音调Textview的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android自定义带拼音音调Textview的具体代码,供大家参考,具体内容如下 1.拼音textview,简单的为把拼音数组和汉字数组结合在一起多行显示 2.汉字转拼音使用 implementation ‘com.bel

  • 我有一个字体对象,我需要字体的宽度和高度。我知道getSize()返回字体的高度,因为字体的点号通常是高度,但在确定字体的宽度时,我不知所措。 或者,能够确定字体支持的每个特定字符的宽度也是一个可接受的解决方案。 我的最佳猜测是,宽度是在使用loadFont方法时指定的,但文档没有指定size参数是表示字体的宽度还是高度。 使用的所有字体都是单空格字体,如DejaVu Sans mono、GNU