1

我真的很喜欢 Raphael Javascript 库，它对于使用 javascript 处理 SVG 非常有用。

但是有一个偏移值被添加到我不理解的生成的 svg 代码中。有谁知道它来自哪里以及如何避免它？

这是我的 JS 代码：

var paper = Raphael("canvas", 510, 510);
paper.clear();
paper.rect(0, 0, 500, 500, 10).attr({fill: "#fff", stroke: "black"});

生成的 SVG 代码是

<div id="canvas">
    <svg width="510" height="510">
        <desc>Created with Raphaël</desc>
        <defs/>
        <rect x="0.5" y="0.5" width="500" height="500" r="10" rx="10" ry="10" fill="#ffffff" stroke="#000000"/>
    </svg>
</div>

为什么rect的x和y属性是0.5而不是0？

更新：似乎这些值是用下面的代码四舍五入的：

var round = function (num) {
    return +num + (~~num === num) * .5;
};

有人知道原因吗？

4

2 回答 2

6

表达式+num + (~~num === num) * .5是这样说的：

  1. +num：以数字形式获取变量num的值；
  2. (~~num === num): 如果变量的值的bitwise_NOT 的按位-NOT （它是去掉任何小数部分的num num，等价于,否则;Math.floor(num)truefalse
  3. 将第1步的结果与第2步的结果相加，从而将第2步返回的布尔值强制转换为数值：对于变量num为数值0的情况，结果为1；
  4. 将步骤 3 的结果乘以 0.5。

所以我们得到结果(0 + 1) * 0.5，即 0.5。

换句话说，代码是说“对于所有整数，加 0.5；对于所有非整数，什么都不加。”

这有一些有趣的结果，其目的至少可以说是模糊的；考虑将其应用于以下值：

  1. 0 -> 0.5;
  2. 0.1 -> 0.1;
  3. 0.4 -> 0.4;
  4. 0.5 -> 0.5;
  5. 0.9 -> 0.9;
  6. 1.0 -> 1.5;
  7. 1.1 -> 1.1;

...等等。

至于他们为什么这样做：我真的一点也不知道。FWIW 我有大量的 SVG，包括静态和动态创建的，在 Firefox、Safari 和 Opera 上运行良好，而且它们都不需要这种愚蠢的东西。

如果有人找到原因，我很想知道:-)

于 2009-10-27T14:25:25.143 回答
2

原因可能是绘制时使用的坐标系：在x=1.0处绘制的1px黑线在1.0的左半边和右半边，导致2px的灰线。使用 0.5px 偏移，线在 1.0 和 2.0 之间。

于 2011-02-22T22:03:43.780 回答