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说：

+num：获取变量num的值作为数字;
(~~num === num)：如果变量值num的bitwise_NOT的bitwise-NOT（删除了任何小数部分的num，相当于Math.floor(num)），则返回true等于变量num的值：即，如果num是整数，则返回true，否则返回false;
将步骤1的结果添加到步骤2的结果中，从而将步骤2返回的布尔值强制转换为数值：对于变量num具有数值0的情况，这将导致在1;
将步骤3的结果乘以0.5。

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

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

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

0 -> 0.5;
0.1 -> 0.1;
0.4 -> 0.4;
0.5 -> 0.5;
0.9 -> 0.9;
1.0 -> 1.5;
1.1 -> 1.1;

......等等。

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

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

Answer 2

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

Raphael javascript中的偏移量在哪里？

2 个答案: