在svg或canvas中获取text文字宽度


字数:223 阅读时长:1分钟 阅读:85

使用 svgD3.js)或 canvasPIXI.js)绘图时,经常要考虑文字长度和一些动态边界问题,所以还是有必要弄清楚:在 svg 或 canvas 中获取 text 文字宽度的方法。

SVG && Canvas

一、在 SVG 中获取文字元素度

因为 svg 中是一个一个元素组成的,和原生DOM元素差不多,所以就可使用获取普通元素宽度的API, getComputedTextLengthgetBoundingClientRect

1
2
3
4
5
6
7
let $text = document.querySelector('.text')

// 方法 1
let w = $text.getComputedTextLength()

// 方法 2
let w = $text.getBoundingClientRect().width

二、在 Canvas 中获取文字元素度

Canvas 相当于是一个黑盒,内部没有元素的概念,所以就不能使用原生DOM提供的方法,但是可以使用 Canvas 提供的API, measureText

1
2
3
4
5
const c = document.getElementById("myCanvas")
const ctx = c.getContext("2d")
ctx.font = "30px Arial"
const txt = "Hello World"
let w = ctx.measureText(txt).width

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-07-19
最后更新: 2022-07-19
本文标题: 在svg或canvas中获取text文字宽度
本文链接: https://www.tiven.cn/p/65cf97cf/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^