獲取RaphaelJS中文本的實際邊界框

我注意到Paper.text的邊界框並不等於文本的實際區域，但高度更高。我認爲這是因爲它正在查看字體中的某些信息，這些信息有可能是大的（斜槓）或位置非常高/低（overcores）的字形 - 至少這是我的理論 - 但是getBBox高度而實際仍然看起來太大了。任何想法如何我可以獲得文本的實際「印刷」大小？獲取RaphaelJS中文本的實際邊界框

這裏有一些數字：

getBBox（）結果：

height: 162.28235294117644 
width: 1113.1764705882351 
x: 13.411764705882433 
x2: 1126.5882352941176 
y: 13.411764705882351 
y2: 175.6941176470588

SVG節點（從path.node）作爲我的屏幕上測量

<text x="0" y="93.88235294117646" text-anchor="start" font-family="Franklin Gothic Demi Cond" font-size="107px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: &quot;Franklin Gothic Demi Cond&quot;; font-size: 107px;" transform="matrix(2.3865,0,0,1.3412,13.4118,-31.329)" stroke-width="0.4190289116994294"><tspan dy="37.491727941176464" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Hello World</tspan></text>

實際尺寸/位置：

x: 30px 
y: 50px 
width: 1085px 
height: 97px

當我使用Paper.print()事情沒問題時 - 由於複雜字形的性能問題，我切換到Paper.text()。

編輯 - 最重要的是，它似乎getBBox是不是跨瀏覽器兼容。使用Pauls的片段answer FF和Chrome顯示比較結果。

來源

2016-11-25 cyberwombat

當你正在尋找的高度，你考慮到邊框的Y位置？或者你是否認爲這可能是文本基線以上的高度？

請記住，高度覆蓋從最高上升到最低下降的距離。

var mytext = document.getElementById("mytext"); 
 
var myrect = document.getElementById("myrect"); 
 

 
var textBBox = mytext.getBBox(); 
 

 
myrect.x.baseVal.value = textBBox.x; 
 
myrect.y.baseVal.value = textBBox.y; 
 
myrect.width.baseVal.value = textBBox.width; 
 
myrect.height.baseVal.value = textBBox.height;

<svg width="550" height="200"> 
 
    <text id="mytext" 
 
      x="0" y="93.88235294117646" text-anchor="start" font-family="Franklin Gothic Demi Cond" font-size="107px" stroke="none" fill="black"><tspan dy="37.491727941176464" >Hell&#x1eb; &#x174;orld</tspan></text> 
 
    <rect id="myrect" fill="none" stroke="red" stroke-width="1"/> 
 
</svg>

來源

2016-11-25 09:55:57

這就是我遇到的問題。你的例子使用低/高元素的字形，但如果我說只輸入「aaaa」，我會希望矩形只覆蓋該區域，而不是添加〜40px的空白區域。我需要知道我使用的實際文字需要多少空間。 – cyberwombat

Argh ..看起來getBBox與瀏覽器不兼容：FF和Chrome顯示不同大小 – cyberwombat

只有非常微小的差別Chrome（0,35.3594,539.313,119）與Firefox（0,35.3741,539.117,120）對你有所幫助？ –

獲取RaphaelJS中文本的實際邊界框

回答

相關問題