以像素为单位获取文本的真实宽度

如何在KineticJS中实现主题目标？如果我使用Text对象的.getWidth()或.getTextWidth()方法，则给定量是所有字母宽度的总和。它不计算字母之间的空格。所以，我无法获得显示文本的确切宽度。我看到有一个解决方案涉及一些屏幕度量类，但也许有一个更简单的解决方案？以像素为单位获取文本的真实宽度

来源

2013-06-24 noncom

你能不能把它拿来例如用'$（''）.text（'machin chouette'）。jQuery'width（）'？ –

难道你不能简单地追加一个隐藏的元素到身体并检查他生成的宽度？

使用jQuery：

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

不知道我已经明白这个问题很好，不知道它的适用于画布元素。

来源

2013-06-24 15:36:27

Afaik这是一个不同的方法。可以在画布上使用DOM元素，但在这里我只使用画布绘制的元素......所以此方法不适用于纯绘制的元素。必须有一些KineticJS方法或画布每像素的方式... – noncom

有很多方法可以做到你所需要的，但是......

这个函数将会使用帆布获取文本的像素宽度

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); 
}

来源

2013-06-24 20:53:13 markE

嗯，很遗憾，它会给出与'Text'实例的'.getTextWidth（）'方法相同的结果。接近真实的东西如果我测量的是'measure.width + text.length'而不是'measure.width'，但是仍然有点+/- 1像素在这里和那里。我的字体是Consolas 14，我试图设置光标在文本元素中的位置......不幸的是，计算的精确度希望更好......也许你有更多的想法？ – noncom

是的，您可以以性能为代价获得像素完美。在画布上绘制文本，然后使用context.getImageData（）测量文本在哪个X坐标处开始和停止。当然，你必须为自己衡量“完美”与“实用”的成本。 – markE

嘿，你的意思是使用扫描线技术？：d。哦，这个21世纪，给我一个休息..：D，好的，我想这是唯一的方法，所以我尽快尝试，当它的工作，这是答案..然后.. – noncom

以像素为单位获取文本的真实宽度

回答

相关问题