1

如果文本对于框来说太大（适合框），我有一个算法可以减小给定文本框中的字体大小

它工作得很好，但它确实效率低下，因为它实际上只是将字体大小减小了 1 直到它适合。

任何人都可以帮助我提高效率，例如二进制切碎或其他东西吗？

代码是：

function fitToBox(object, maxFontSize, minFontSize, maxHeight) {
    var box = document.getElementById(object);
    var currentHeight = box.offsetHeight;                       
    var currentFontSize = maxFontSize;                  
    do {
        box.style.fontSize = currentFontSize+"pt";
        currentFontSize = box.style.fontSize.replace("pt", "");
        currentHeight = box.offsetHeight;                                                       
        if(currentHeight >= maxHeight) {
            currentFontSize -= 1;
        }
    } while (currentHeight > maxHeight && currentFontSize > minFontSize);
    box.style.lineHeight = currentFontSize+"pt";
}

HTML 中的完整示例（只需向 div 添加更多文本以查看正在进行的拟合）

<html>
<head>
<script type="text/javascript">
function fitToBox(object, maxFontSize, minFontSize, maxHeight) {
    var box = document.getElementById(object);
    var currentHeight = box.offsetHeight;                       
    var currentFontSize = maxFontSize;                  
    do {
        box.style.fontSize = currentFontSize+"pt";
        currentFontSize = box.style.fontSize.replace("pt", "");
        currentHeight = box.offsetHeight;                                                       
        if(currentHeight >= maxHeight) {
            currentFontSize -= 1;
        }
    } while (currentHeight > maxHeight && currentFontSize > minFontSize);
    box.style.lineHeight = currentFontSize+"pt";
}
</script>
</head>
<body>

<div id="fitme" style="background-color: yellow; font-size: 24pt; width: 400px;">
    This is some text that is fit into the box This is some text that is fit into the box This is some text that is fit into the box
</div>

<script type="text/javascript">
    fitToBox("fitme", 24, 4, 80);
</script>

</body>
</html>
4

3 回答 3

1

这是一个将循环计数从示例中的 9 减少到 4 的版本：

function fitToBox(box, maxFontSize, minFontSize, maxHeight) {
    inc = (maxFontSize - minFontSize) / 2;
    currentFontSize = minFontSize + inc;
    box.style.fontSize = currentFontSize+"pt";
    while(inc >= 1) {
        if(box.offsetHeight > maxHeight) {
            dir = -1;
        } else {
            dir = 1;
        }
        inc = Math.floor(inc/2);
        currentFontSize += (dir * inc);
        box.style.fontSize = currentFontSize+"pt";
    }
}

它首先假设中间大小是一个好的开始，并且二进制切碎到最大值以下的最佳拟合，并根据需要改变方向。

我不知道你为什么要更改 CSS 行高，所以我没有这样做。

于 2012-11-29T22:42:20.687 回答
0

你能做这样的事情来测量以 px 为单位的字体高度吗？

 function fitToBox(object, maxFontSize, minFontSize, maxHeight) {
     var box = document.getElementById(object);                       
     var currentFontSize = box.offsetHeight - 6; //however much space you want to leave                  
     if(currentFontSize > maxFontSize){
          currentFontSize = maxFontSize;
     }else if(currentFontSize < minFontSize){
          currentFontSize = minFontSize;
     }
     box.style.lineHeight = currentFontSize+"px";
  }
于 2012-11-28T16:43:39.717 回答
0

尝试根据盒子样式计算最大允许大小。

获取元素高度 - 顶部填充 - 底部填充，您将获得最大尺寸。

var height = parseInt(box.clientHeight);
var pt = parseInt(box.style.paddingTop);
var pb = parseInt(box.style.paddingBottom);
var fontsize = (height - pt - pb) + "px";

至于下一部分。在检测溢出时想到的解决方案是执行类似的操作。

var boxClone = box.cloneNode(true)
boxClone.style.visibility = "hidden";
boxClone.id = "boxClone";
document.getElementsByTagName('body')[0].appendChild(boxClone);

box.onkeydown = function(e) { 

}

在 keydown 事件中，截取即将附加的字符并将其附加到 boxclone 中 - 然后测量其大小并将其与原始字符进行比较。一旦你知道了数字，你就可以相应地调整你的文本。

于 2012-11-28T16:45:42.383 回答