拉斐尔正在添加’dy’属性

我正在创建一个带有raphael的图像和它为paper.text()生成的SVG添加一个< tspan dy =“number”>其中“number”是一个基于Attr的数字(font-size:n)

有人可以告诉我这个数字是如何计算的,因为我需要知道的是因为我用序列化的数据发送到服务器的toJSON()(raphael的第三方插件名为ElbertF / Raphael.JSON)并在服务器上重新创建一个SVG文字永远是这个dy =“数字”

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>

从y_positionOfText中删除Math.round()会生成

<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”

这是杀了我!拉斐尔为什么这样做,如何!?

每当我需要知道库的工作原理时,我都会阅读源代码.既然我没有写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属性和文本中间位置之间的差异(边界框顶部加上高度的一半).

本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院