我非常喜欢 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;
};
有人知道原因吗?
最佳答案
表达式 +num + (~~num === num) * .5
表示:
+num
:获取变量num
的值作为数字;(~~num === num)
:如果变量num
的值的 bitwise_NOT 的按位非(它是 num 与任何去掉小数部分,相当于Math.floor(num)
) 正好等于变量num的值:即如果num是整数,返回true
,false
否则;- 将步骤1的结果与步骤2的结果相加,从而将步骤2返回的 bool 值强制转换为数值:对于变量
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 上愉快地工作,而且它们都不需要这种愚蠢的东西。
如果有人能找出原因,我很想知道 :-)
关于javascript - Raphael javascript 中的偏移量在哪里,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1630176/