如何在邊界框內放置文本？

Question

我使用 Google vision api 提取了一些文本。 現在的想法是使用來自邊界框的坐標和尺寸信息將 plot 文件上的文本。

我有 position 和邊界框的高度和寬度。 現在我需要將文本放入框中。 我無法獲得完全適合框內的正確字體大小屬性。

我正在嘗試使用 Python 腳本 plot web 頁面上的數據。 所以我試圖獲取包含文本的跨度的 font-size 屬性。

到目前為止，我已經嘗試使用 jQuery 的 fitText() 插件，但它似乎不起作用。 任何其他想法如何獲得適當的字體大小？

Answer 1

只要其高度小於或等於邊界框高度，您就可以增加字體大小：

 fitTextInsideBox(document.querySelector('.text'), document.querySelector('.bounding-box')); function fitTextInsideBox(text, box) { // bounding box parameters var boxPosX = 20 var boxPosY = 20; var boxWidth = 500 var boxHeight = 500; box.style.position = 'absolute'; box.style.left = `${boxPosX}px`; box.style.top = `${boxPosY}px`; box.style.width = `${boxWidth}px`; box.style.height = `${boxHeight}px`; text.style.position = 'absolute'; text.style.left = `${boxPosX}px`; text.style.top = `${boxPosY}px`; text.style.width = `${boxWidth}px`; var fontSize = 0; increaseFontSize(text, box); function increaseFontSize(text, box) { fontSize++; text.style.fontSize = `${fontSize}px`; var textHeight = text.getBoundingClientRect().height; if (textHeight <= boxHeight) { increaseFontSize(text, box); } else { fontSize--; text.style.fontSize = `${fontSize}px`; } } }

 body, html { margin: 0; padding: 0; }.bounding-box { border: 2px solid red; box-sizing: border-box; }

 <div class="bounding-box"></div> <span class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>