2016-01-11 45 views
-1

我想將文本放置在形狀中。我有:字體,textWidth,textHeight,文本邊距。文本放入有其座標x和y的形狀: 等什麼我得到的是:在形狀中放置文本

generateImage

這是SVG,我產生:

<g class='nodeGroup' transform='translate(43,-66)' style='-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;'> 
<rect stroke='lightgray' fill='#FEFEF5' x='0' y='0' width='260' height='618' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/> 
<text fill='black' x='98' y='8' width='64' height='14' padding='0,0,0,0' cursor='default' angle='0' font='14px Calibri Bold' horizontalAlignment='center' marginBottom='8' marginLeft='0' marginRight='0' marginTop='8' textHeight='14' textWidth='60' verticalAlignment='top'> 
processtest</text> 
<line stroke='lightgray' fill='none' x='0' y='30' x1='0' y1='30' x2='260' y2='30' width='260' height='0' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/> 
</g> 

<g class='nodeGroup' transform='translate(43,-36)' style='-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;'> 
<rect stroke='lightgray' fill='#FEFEF5' x='0' y='0' width='260' height='588' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/> 
<text fill='black' x='113' y='8' width='34' height='14' padding='0,0,0,0' cursor='default' angle='0' font='14px Calibri Bold' horizontalAlignment='center' marginBottom='8' marginLeft='0' marginRight='0' marginTop='8' textHeight='14' textWidth='30' verticalAlignment='top'>lane0</text> 
</g> 

而且我試圖把文本放在正確的位置與矩形形狀座標比較,我想要得到的:

image

,這是我想要得到的SVG:

<g class="nodeGroup" transform="translate(43,-66)" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;"> 
    <rect stroke="#2e3d54" stroke-width="2" fill="#FEFEF5" x="0" y="0" width="260" height="618" /> 
    <text fill="black" cursor="default" x="100" y="19" style="font:14px Calibri Bold;">processtest</text> 
    <line stroke="#2e3d54" stroke-width="1" fill="none" x1="0" y1="30" x2="260" y2="30" /> 
</g> 
<g class="nodeGroup" transform="translate(43,-36)" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;"> 
    <rect stroke="#2e3d54" stroke-width="2" fill="#FEFEF5" x="0" y="0" width="260" height="588" /> 
    <text fill="black" cursor="default" x="115" y="19" style="font:14px Calibri Bold;">lane0</text> 
</g> 

使用JavaScript,我怎麼能放置文本,並計算其x和y?

+0

你可以請添加一些代碼示例? –

+1

我們需要代碼示例。另外,爲什麼要使用JavaScript?造型通常使用CSS完成。我認爲你正在尋找['線height'(https://developer.mozilla.org/en/docs/Web/CSS/line-height)第一直覺IST,就像是這種情況[在這個問題上](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css)。另外,你爲什麼要關注盒子的座標?如果文本在方框內(小孩),相對定位應該是可能的,並且在大多數情況下是優選的。 – domsson

+0

請提供代碼或製作小提琴。 –

回答

-1

沒有代碼很難說。

如果它是在一個表中嘗試使用CSS:

text-align: center; 
vertical-align: middle; 

否則padding-top: 10px;應與定位工作。

當CSS可以完成所有工作時,不需要JavaScript。

1

呃......你在找這樣的東西嗎?

* {font-family: 'Consolas', 'Courier New', monospace; line-height: 1;} 
 
.classDgm {border: 1px solid #666; text-align: center; width: 175px;} 
 
.classDgm .head {border-bottom: 1px solid #666; padding: 5px;} 
 
.classDgm .body {min-height: 100px; padding: 5px;}
<div class="classDgm"> 
 
    <div class="head">processTest</div> 
 
    <div class="body">lane0</div> 
 
</div>

前瞻:

你可以玩的line-heightmin-height。我已經給出了一個min-height,以防萬一所有其他類似的圖表與它對齊。

+0

我產生了JavaScript的SVG,所以我應該用js代碼放置文本的形狀 – ameni

+0

@ameni你能親切地展示JS代碼和一切,產生你的?這樣我們纔能有效調試。請從中創建一個http://jsbin.com。 ':)'會更有幫助,更輕鬆。 –