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的按位NOT（返回true）删除小数部分，相当于 Math.floor（num））正好等于变量num的值：即，如果num是整数，则返回 true ，< code> false 否则;
3. 将步骤1的结果添加到步骤2的结果中，从而将步骤2返回的布尔值强制转换为数值：对于变量 num 具有数值0的情况，这将导致1;
4. 将步骤3的结果乘以0.5。

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

换句话说，代码是说“For all integer，add 0.5;对于所有非整数，不添加任何内容。“

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

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

......等等。

关于为什么他们这样做：我真的没有最微弱的想法。 FWIW我有大量的静态和动态创建的SVG，在Firefox，Safari和Opera上工作愉快，而且它们都不需要这种愚蠢。

如果有人发现了这个原因，我很想知道： - ）

Answer 2

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