7

我正在用 raphael 创建一个图像，它生成的 SVGfor paper.text()添加了一个<tspan dy="number"> “数字”是基于 Attr(font-size:n) 的数字

有人可以告诉我这个数字是如何计算的，因为我需要知道，因为我使用什么将序列化数据发送到服务器toJSON()（用于 raphael 的第 3 方插件，称为 ElbertF / Raphael.JSON）并在服务器上重新创建 SVG 文本总是由此而出dy="number"

该dy值似乎也与文本的y属性相关联，就好像我将值四舍五入一样，y该dy值也被四舍五入到最接近的 0.5

例如：

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

使用 raphael + Backbone 时，我遇到了类似的问题。我在 git hub 上发现了这个问题。就我而言，根本原因是我在使用 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 给 Matt Esch 的建议

于 2014-01-18T02:44:05.490 回答