javascript - 调整文本大小的纯 Javascript 算法

Question

我有一个固定大小的 html div 和一个用于输入文本的附加 HTML 输入框。然后该文本显示在 div 中。

我希望文本始终居中，并且始终是字符串中字符数可能的最大尺寸。

我想出了一个工作原型(prototype)，但效果不是很好。文本的大小并不总是正确的。

function bindText(readElement, writeElement, extra){   
    //the text from the input form triggered by onkeyup event
    var textStr = document.getElementById(readElement).value;

    //the div to write the text to 
    var element = document.getElementById(writeElement);

    //the major part of the function that I have just brute forced to try and work out
    if(textStr.length > 0){                        

        //check the length of the string
        if(textStr.length > 8 && textStr.length < 12){
             //set a the font size accordingly
             element.style.fontSize = 150;
        }

        //same again    
        if(textStr.length >= 12 && textStr.length < 16){
            element.style.fontSize = 120;
        }

        if(textStr.length >= 16 && textStr.length < 20){
            element.style.fontSize = 100;
        }

        if(textStr.length >= 20 && textStr.length < 25){
            element.style.fontSize = 80;
        }

        if(textStr.length >= 25 && textStr.length < 32){
            element.style.fontSize = 55;
        }

        if(textStr.length >= 32 && textStr.length < 40){
            element.style.fontSize = 50;
        }

        if(textStr.length >= 40 && textStr.length < 50){
            element.style.fontSize = 45;
        }

        if(textStr.length >= 76){
            element = textStr.splice(0, 75);
        }
       }
   }

是否有更优雅的解决方案来获得更一致的结果？

提前致谢

Answer 1

正如我在您对字体大小和文本长度之间依赖性的近似估计中所看到的:

我为此做了以下形式的插值:

你可以看到带有参数的结果:

现在您可以用一个字体大小 h 计算公式替换所有 if 和 else if 并耦合 min(h , max_font_size) 和 max(min_font_size, h) 用于设置字体的最小和最大尺寸。

function bindText(readElement, writeElement, extra){   
    var textStr = document.getElementById(readElement).value;
    var element = document.getElementById(writeElement);
    var x, h;

    x = textStr.length;
    h = Math.exp(-0.1 * x + 6) + 38;
    h = Math.min(h, 120);
    h = Math.max(h, 45);

    element = textStr.splice(0, 75);// as you wish and it is not my business why %)
    element.style.fontSize = h;

    return (0);
}