Skip to content

fix(视图): 修复空格导致Element宽度小于文字宽度。#19

Open
Webb-L wants to merge 1 commit intowanglin2:mainfrom
Webb-L:main
Open

fix(视图): 修复空格导致Element宽度小于文字宽度。#19
Webb-L wants to merge 1 commit intowanglin2:mainfrom
Webb-L:main

Conversation

@Webb-L
Copy link

@Webb-L Webb-L commented Jan 9, 2024

测试文字:

// 计算文本的实际渲染宽度
let textCheckEl = null
export const getTextActWidth = (text, style) => {
  if (!textCheckEl) {
    textCheckEl = document.createElement('div')
    textCheckEl.style.position = 'fixed'
    textCheckEl.style.left = '-99999px'
    document.body.appendChild(textCheckEl)
  }
  let { fontSize, fontFamily } =                                                        style
  textCheckEl.innerText = text
  textCheckEl.style.fontSize = fontSize + 'px'
  textCheckEl.style.fontFamily = fontFamily
  let { width } = textCheckEl.getBoundingClientRect()
  return width
}

wanglin2 github io_tiny_whiteboard_demo_

localhost_3000_tiny_whiteboard_demo_

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments