使用 svg (D3.js
)或 canvas (PIXI.js
)绘图时,经常要考虑文字长度和一些动态边界问题,所以还是有必要弄清楚:在 svg 或 canvas 中获取 text 文字宽度的方法。
一、在 SVG 中获取文字元素度
因为 svg 中是一个一个元素组成的,和原生DOM元素差不多,所以就可使用获取普通元素宽度的API, getComputedTextLength
、getBoundingClientRect
。
1 | let $text = document.querySelector('.text') |
二、在 Canvas 中获取文字元素度
Canvas 相当于是一个黑盒,内部没有元素的概念,所以就不能使用原生DOM提供的方法,但是可以使用 Canvas 提供的API, measureText
。
1 | const c = document.getElementById("myCanvas") |
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2022-07-19
最后更新: 2022-12-07
本文标题: 在svg或canvas中获取text文字宽度
本文链接: https://www.tiven.cn/p/65cf97cf/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2022-07-19
最后更新: 2022-12-07
本文标题: 在svg或canvas中获取text文字宽度
本文链接: https://www.tiven.cn/p/65cf97cf/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!