canvas에서 문자열 측정값. baseline 기준 하단 상단 높이 측정. fontBoundingBoxAscent, fontBoundingBoxDescent

1
const textMetrics = ctx.measureText("foo")



textMetrics.fontBoundingBoxAscent; // 폰트 baseline에서부터의 상단 높이. (폰트에 포함된 글자 중 가장큰 값을 가지는 글자의 상단 높이)
textMetrics.fontBoundingBoxDescent ; // 폰트 baseline에서부터의 하단 높이. (폰트에 포함된 글자 중 가장큰 값을 가지는 글자의 하단 높이)

textMetrics.actualBoundingBoxAscent; // 그려지는 문자열 기준 baseline에서부터의 상단 높이.
textMetrics.actualBoundingBoxDescent; // 그려지는 문자열 기준 baseline에서부터의 하단 높이.

actualBoundingBoxAscent 와 actualBoundingBoxDescent 는 문자열에 따라서 달라진다.
특히 y 같이 밑이 긴 문자가 들어가면 actualBoundingBoxDescent 값이 더 커진다.

다른 문자열과 일관적으로 보이게 하려면
fontBoundingBoxAscent, fontBoundingBoxDescent 를 사용하라
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
6.29
6.30
7.1
7.2
7.3
7.4
7.5
7.6
7.7
7.8
7.9
7.10
7.11
7.12
7.13
7.14
7.15
7.16
7.17
7.18
7.19
7.20
7.21
7.22
7.23
7.24
7.25
7.26
7.27
7.28
7.29
7.30
7.31
8.1
8.2