Получение реальной ширины текста в пикселях

Question

Как я могу достичь цели в KineticJS? Если я использую либо .getWidth(), либо .getTextWidth() методов объекта Text, данная сумма представляет собой сумму ширины всех букв. Он не учитывает пробел между буквами. Таким образом, я не могу получить точную ширину отображаемого текста. Я видел, что есть решение, связанное с некоторым классом метрик экрана, но, возможно, есть более простой?

Answer 1

Не могли бы вы просто добавить скрытый элемент в тело и проверить его сгенерированную ширину?

С JQuery:

element = $('<span />').addClass('hide').text('some dummy text'); 
element.appendTo('body'); 
console.log(element.width()); 

Не уверен, что я понял вопрос хорошо, и не уверен, что это применимо к брезентовым элементам.

Answer 2

Есть много способов сделать то, что вам нужно, но ...

Эта функция будет получить ширину текста в пикселях, используя холст

function getTextWidth(font,text){ 
    var canvas=document.createElement(“canvas”); 
    var ctx=canvas.getContext(“2d”); 
    ctx.font=font; // for example “14pt Verdana”; 
    var measure=ctx.measureText(text); 
    return(measure.width); 
}