拉斐尔正在添加一个“dy"属性 [英] Raphael is adding a 'dy' attribute

问题描述

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

I Am creating an image with raphael and the SVG it generats for paper.text() adds a <tspan dy="number"> where "number" is a number based off the Attr(font-size:n)

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

can someone tell me how this number is calculated as I need to know because what I send the serialized data to the server with toJSON() (a 3rd party plugin for raphael called ElbertF / Raphael.JSON) and recreate an SVG on the server the text is always out by this dy="number"

dy 值似乎也链接到文本的 y 属性，就好像我将 y 值四舍五入 dy 值也会四舍五入到最接近的 0.5

the dy value also seems to be linked to the text's y attribute as if I round the y value the dy value also gets rounded to the nearest 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() 使得

removing the Math.round() from y_positionOfText makes

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

Note how the y="48" gives dy="5.5" but y="48.188976378525" gives dy="5.501476378524998"

这让我很伤心！拉斐尔为什么要这样做以及如何做！?

this is killing me! why does Raphael do this and HOW!?

推荐答案

每当我需要了解库的工作原理时，我都会阅读源代码.现在考虑到我没有写 Raphael，我不能确切地告诉你为什么 tspan 是这样创建的，但我可以肯定地告诉你如何:

Whenever I need to know how a library works, I read the source code. Now given that I didn't write Raphael I can't tell you exactly why the tspan is created like this, but I can certainly tell you how:

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

据推测，这是解决锚定问题.它正在移动文本，使 tspan 的中点与 y 属性对齐.

Presumably this is fixing an issue with anchoring. It's shifting the text so that the mid-point of the tspan is aligned with the y attribute.

它是通过检查 y 属性和文本中间位置(边界框顶部加一半高度)之间的差异来计算的.

It's computed by checking the difference between the y attribute and the middle position of the text (bounding box top plus half the height).

这篇关于拉斐尔正在添加一个“dy"属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！