javascript - Raphael javascript 中的偏移量在哪里

Question

我非常喜欢 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;
}; 

有人知道原因吗？

Answer 1

表达式 +num + (~~num === num) * .5 表示:

1. +num:获取变量num的值作为数字；
2. (~~num === num):如果变量 num 的值的 bitwise_NOT 的按位非(它是 num 与任何去掉小数部分，相当于Math.floor(num)) 正好等于变量num的值:即如果num是整数，返回true，false 否则；
3. 将步骤1的结果与步骤2的结果相加，从而将步骤2返回的 bool 值强制转换为数值:对于变量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 上愉快地工作，而且它们都不需要这种愚蠢的东西。

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