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

Question

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

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

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

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

正如我在您对字体大小和文本长度之间依赖关系的近似所看到的那样：

我对此进行了插值：

您可以使用参数查看结果：

if现在，您可以用else if一个公式替换所有的字体大小h计算公式，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);
}

Answer 2

您实际上可以构建一个试错算法来修改font-size您的文本，直到它的大小合适。
我现在没有时间写它，所以这是我想到的类似伪代码的东西：

test_element = clone(element);
test_element.innerText = text;
test_element.style.left = '-9999px'; // so that it would be hidden from the user
for(var i = maxFontSize; i > minFontSize; i--)
    {
        test_element.style.fontSize = i + 'px';
        if(test_element.width <= element.width && test_element.height <= element.height)
            break;
    }
 // and the fontSize is stored in the `i` var

更新
尚未对其进行测试，但这是我正在考虑的算法：

function getFontSize(text, width){
    var minFontSize = 1,
        maxFontSize = 200,
        testElement = document.createElement('span'),
        fontSize = null;

    testElement.style.position = 'absolute';
    testElement.style.left = '-999999px';
    testElement.style.top = '-999999px';
    document.body.appendChild(testElement);

    testElement.innerText = text;

    for(var i = minFontSize; i <= maxFontSize; i++)
        {
            testElement.style.fontSize = i + 'px';
            if(testElement.offsetWidth > width)
                {
                    fontSize = Math.max(minFontSize, i-1);
                    break;
                }
        }

    if(fontSize == null)
        fontSize = i;

    document.removeChild(testElement);

    return fontSize + 'px';
}

function bindText(readElement, writeElement){
    //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){
        element.style.fontSize = getFontSize(textStr, element.outerOffset);
        // aditional, you can set the text-align property to center
        // element.style.textAlign = 'center';
    }
}