7

私はラファエルで画像を作成していますが、それが生成するSVGは 、「数値」がAttr（font-size：n）に基づく数値でfor paper.text()ある場合に追加します。<tspan dy="number">

toJSON()シリアル化されたデータをサーバーに送信し（ElbertF / Raphael.JSONと呼ばれるラファエルのサードパーティプラグイン）、サーバー上でSVGを再作成するため、この数値がどのように計算されるかを誰かに教えてもらえますか？テキストは常にこれで出てdy="number"

値は、値を四捨五入したかのようdyにテキストのy属性にもリンクされているようです。値も0.5に最も近い値に四捨五入されます。ydy

たとえば、次のようになります。

textEmement = paper.text(Math.round(x_positionOfText),
                                                    Math.round(y_positionOfText));
textEmement.attr({ "font": "",
                   "fill": fontColour,
                   "font-family": "Arial",
                   "text-anchor": "middle",
                   "font-size": 17});

作る->

<text style="text-anchor: middle; font-family: Arial; font-size: 17px;" x="161" y="48" text-anchor="middle" font="" stroke="none" fill="#ffffff" font-family="Arial" font-size="17px">
<tspan dy="5.5">Text 3</tspan>
 </text>

Math.round()から削除y_positionOfTextする

 <text style="text-anchor: middle; font-family: Arial; font-size: 17px;" x="161" y="48.188976378525" text-anchor="middle" font="" stroke="none" fill="#ffffff" font-family="Arial" font-size="17px">
 <tspan dy="5.501476378524998">Text 3</tspan>
 </text>

y="48"与えるdy="5.5" がy="48.188976378525"与える方法に注意してくださいdy="5.501476378524998"

これは私を殺しています！なぜラファエルはこれをどのように行うのですか！？

4

3 に答える 3

4

ライブラリがどのように機能するかを知る必要があるときはいつでも、ソースコードを読みます。Raphaelを作成しなかったため、tspanがこのように作成された理由を正確に伝えることはできませんが、その方法は確かにわかります。

var bb = el._getBBox(),
    dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});

おそらく、これはアンカーの問題を修正しています。tspanの中点がy属性と揃うように、テキストをシフトしています。

これは、y属性とテキストの中央位置（境界ボックスの上部と高さの半分）の差をチェックすることによって計算されます。

于 2012-11-01T12:49:04.527 に答える
3

ラファエル+バックボーンを使用したときに同様の問題が発生しました。この問題はgitハブの照明で見つかりました。私の場合の根本的な原因は、Paper.textを使用している時点でDOMに接続されていないビューを操作していることです。問題で説明されているように、これによりRaphaelはバウンディングボックスに高さがないと信じます。Matt Eschの回答と組み合わせると、dyがyに等しくなるように調整されます。回避策として、描画の瞬間に要素をDOMにアタッチすることを試みることができます。

于 2013-11-13T11:49:42.843 に答える
3

私も同様の問題を抱えており、変更することで解決します

var bb = el._getBBox(),
    dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});

これとともに：

var bb = el._getBBox(),
    dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: [0]});

dy：difからdyへの変更：[0]

THXからMattEschへの暗示

于 2014-01-18T02:44:05.490 に答える