javascript - jquery根据字符计算字体大小

Question

我正在尝试创建方法来读取文本框中的所有字符并返回字体大小值。

我的功能无法正常工作。下面是我的代码

    function sizeInput(input) {
    return shrinkToFill(input, 48, '', 'Impact');
}
function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
    var font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
    var $input = $(input);
    var maxWidth = $input.width() - 50;

    // we're only concerned with the largest line of text.
    var longestLine = $input.val().split('\n').sort(function (a, b) {
        return measureText(a, font).width - measureText(b, font).width;
    }).pop();

    var textWidth = measureText(longestLine, font).width;
    if (textWidth >= maxWidth) {
        // if it's too big, calculate a new font size
        // the extra .9 here makes up for some over-measures
        fontSize = fontSize * maxWidth / textWidth * 0.9;
        font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
        // and set the style on the input

    }
    else {
        font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
        // and set the style on the input        
    }
    $input.css({
        'font-size': fontSize
    });
    return fontSize;
}
var measureText = function (str, font) {
    str = str.replace(/ /g, ' ');
    var id = 'text-width-tester';
    var $tag = $('#' + id);
    if (!$tag.length) {
        $tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + str + '</span>');
        $('body').append($tag);
    } else {
        $tag.css({
            font: font
        }).html(str);
    }
    return {
        width: $tag.width(),
        height: $tag.height()
    };
};
var topText = $('#topText');
var bottomText = $('#bottomText');

var textUpdated = function () {
    var topFontSize = sizeInput(topText);
    var bottomFontSize = sizeInput(bottomText);
};

它不会返回任何错误，但不起作用。

Answer 1

解决方案在这里 https://jsfiddle.net/5bdLomyp/2/

var sizeInput = function(input) {
    return shrinkToFill(input, 48, '', 'Impact');
}

var shrinkToFill = function(input, fontSize, fontWeight, fontFamily) {
    var font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
    var $input = $(input);
    var maxWidth = $input.width() - 50;

    // we're only concerned with the largest line of text.
    var longestLine = $input.val().split('\n').sort(function (a, b) {
        return measureText(a, font).width - measureText(b, font).width;
    }).pop();

    var textWidth = measureText(longestLine, font).width;
    if (textWidth >= maxWidth) {
        // if it's too big, calculate a new font size
        // the extra .9 here makes up for some over-measures
        fontSize = fontSize * maxWidth / textWidth * 0.9;
        font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
        // and set the style on the input
       
    }
    else {
        font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
        // and set the style on the input        
    }
    $input.css({
        'font-size': fontSize
    });
    return fontSize;
}
var measureText = function (str, font) {
    str = str.replace(/ /g, ' ');
    var id = 'text-width-tester';
    var $tag = $('#' + id);
    if (!$tag.length) {
        $tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + str + '</span>');
        $('body').append($tag);
    } else {
        $tag.css({
            font: font
        }).html(str);
    }
    return {
        width: $tag.width(),
        height: $tag.height()
    };
};

var topText = $('#topText');
var bottomText = $('#bottomText');

$('#topText, #bottomText').keyup(function(){
	 var topFontSize = sizeInput(topText);
   var bottomFontSize = sizeInput(bottomText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="topText" class="hide text-tool top-text" type="text" placeholder="Top Text" />
<input id="bottomText" class="hide text-tool bottom-text" type="text" placeholder="Bottom Text" />

我想这就是您正在寻找的。

我没有在 HTML 中使用 onkeyup 或 onchange，而是使用 jQuery keyup 功能。