Question

我需要以“英寸”显示“宽度”。我目前正在尝试读取用户的输入文本并测量其宽度。

请告知

JS：

//change text width based on text input
    $('#text').on('change', function() {            
    function getTextWidth(text, font) {
        var canvas = getTextWidth.canvas || 
            (getTextWidth.canvas = document.createElement("canvas"));
        var context = canvas.getContext("2d");
        context.font = font;
        var metrics = context.measureText(text);
        return metrics.width;
    };

    //display text width to html
    $(".textWidth")
    .text("Width: " +
        getTextWidth(
                 $("#prev").text()) + " px");

Answer 1

我不知道是否有一种简单的方法可以做到这一点，但您可以使用下面的函数将计算出的样式作为您想要的任何单位（用法为.inch）并返回一个对象你可以使用它的(function(){ // pass to string.replace for camel to hyphen var hyphenate = function(a, b, c){ return b + "-" + c.toLowerCase(); } // get computed style property var getStyle = function(target, prop){ if(window.getComputedStyle){ // gecko and webkit prop = prop.replace(/([a-z])([A-Z])/, hyphenate); // requires hyphenated, not camel return window.getComputedStyle(target, null).getPropertyValue(prop); } if(target.currentStyle){ return target.currentStyle[prop]; } return target.style[prop]; } // get object with units var getUnits = function(target, prop){ var baseline = 100; // any number serves var item; // generic iterator var map = { // list of all units and their identifying string pixel : "px", percent : "%", inch: "in", cm : "cm", mm : "mm", point : "pt", pica : "pc", em : "em", ex : "ex" }; var factors = {}; // holds ratios var units = {}; // holds calculated values var value = getStyle(target, prop); // get the computed style value var numeric = value.match(/\d+/); // get the numeric component if(numeric === null) { // if match returns null, throw error... use === so 0 values are accepted throw "Invalid property value returned"; } numeric = numeric[0]; // get the string var unit = value.match(/\D+$/); // get the existing unit unit = (unit == null) ? map.pixel : unit[0]; // if its not set, assume px - otherwise grab string var activeMap; // a reference to the map key for the existing unit for(item in map){ if(map[item] == unit){ activeMap = item; break; } } if(!activeMap) { // if existing unit isn't in the map, throw an error throw "Unit not found in map"; } var temp = document.createElement("div"); // create temporary element temp.style.overflow = "hidden"; // in case baseline is set too low temp.style.visibility = "hidden"; // no need to show it target.parentElement.appendChild(temp); // insert it into the parent for em and ex for(item in map){ // set the style for each unit, then calculate it's relative value against the baseline temp.style.width = baseline + map[item]; factors[item] = baseline / temp.offsetWidth; } for(item in map){ // use the ratios figured in the above loop to determine converted values units[item] = numeric * (factors[item] * factors[activeMap]); } target.parentElement.removeChild(temp); // clean up return units; // returns the object with converted unit values... } // expose window.getUnits = this.getUnits = getUnits; })();属性：

some_variable_1, \
    some_variable_2, \ 
    some_variable_3, \
    some_variable_4, \
    some_variable_5 = sort_of_long_function_name(parameter_1, parameter_2,
    parameter_3, parameter_4)

some_variable_1, some_variable_2, some_variable_3, some_variable_4, \
    some_variable_5 = sort_of_long_function_name(parameter_1, parameter_2,
    parameter_3, parameter_4)

来自：web MVC

Answer 2

要获得每英寸的实际像素，您需要知道您正在显示的显示器的大小。如果你的分辨率为1920 x ......而你的可见宽度为20英寸，则结果为每英寸96px。

如何将像素转换为英寸？

2 个答案: