Raphael javascript中的偏移量从哪里来 [英] Where does come the offset in Raphael javascript

问题描述

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

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

这是我的JS代码:

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

生成的SVG代码为

<svg width="510" height="510"><desc>由拉斐尔创作</desc><defs/><rect x="0.5" y="0.5" width="500" height="500" r="10" rx="10" ry="10" fill="#ffffff" stroke="#000000"/></svg>

为什么矩形的 x 和 y 属性是 0.5 而不是 0?

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

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

有人知道原因吗?

解决方案

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

1. +num:以数字形式获取变量num的值；
2. (~~num === num):如果变量num(即num与任何去掉小数部分，相当于Math.floor(num)) 正好等于变量num的值:即如果num为整数则返回true，false 否则；
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 上愉快地工作，而且没有一个需要这种愚蠢的.

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

I really like the Raphael Javascript library which is very useful for handling SVG with javascript.

However there is an offset value which is added to the generated svg code that I don't understand. Does anybody know where does it come from and how to avoid it?

Here is my JS code:

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

The generated SVG code is

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

Why does the x and y attributes of the rect are 0.5 and not 0?

Update: It seems that the values are rounded with the code below:

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

Does anybody know the reason?

解决方案

The expression +num + (~~num === num) * .5 is saying:

1. +num: get the value of the variable num as a number;
2. (~~num === num): return true if the bitwise-NOT of the bitwise_NOT of the value of the variable num (which is num with any fractional component removed, equivalent to Math.floor(num)) is exactly equal to the value of the variable num: that is, return true if num is an integer, false otherwise;
3. add the result of step 1 to the result of step 2, thereby coercing the Boolean value returned by step 2 into a numeric value: for the case when the variable num has the numeric value 0, this will result in 1;
4. multiply the result of step 3 by 0.5.

So we get the result (0 + 1) * 0.5, which is 0.5.

In other words, the code is saying "For all integers, add 0.5; for all non-integers, add nothing."

This has some interesting results whose purpose is obscure to say the least; consider its application to the following values:

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;

...and so on.

As to why they do this: I really haven't got the faintest idea. FWIW I've got large amounts of SVG, both static and dynamically created, working happily on Firefox, Safari and Opera, and none of it has ever needed this kind of silliness.

If anybody ever finds out the reason for this, I'd love to know it :-)

这篇关于Raphael javascript中的偏移量从哪里来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！