Onde vem o deslocamento em Raphael javascript

Question

Eu realmente gosto da biblioteca Raphael Javascript que é muito útil para a manipulação de SVG com javascript.

No entanto, há um valor de deslocamento que é adicionado ao código SVG gerado que eu não entendo. Alguém sabe onde ela vem e como evitá-lo?

Aqui está o meu código JS:

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

O código SVG gerado é

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

Por que o x e y atributos do rect são 0,5 e não 0?

Update: Parece que os valores são arredondados com o código abaixo:

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

Alguém sabe a razão?

Answer 1

O +num + (~~num === num) * .5 expressão está dizendo:

1. +num: obter o valor do num variável como um número;
2. (~~num === num): return true se o bit a bit-NOT do bitwise_NOT do valor da variável num (que é num com qualquer componente fracionário removido, o equivalente a Math.floor(num)) é exatamente igual ao valor da variável num: isto é, true retornar se num é um inteiro, false contrário;
3. adicione o resultado da etapa 1 para o resultado da etapa 2, coagir, assim, o valor booleano retornado pela etapa 2 em um valor numérico: para o caso quando a variável num tem o valor numérico 0, isso irá resultar em 1;
4. multiplicar o resultado do passo 3 por 0,5.

Assim, temos a (0 + 1) * 0.5 resultado, que é de 0,5.

Em outras palavras, o código está dizendo "Para todos os inteiros, adicione 0,5;. Para todos os não-inteiros, não acrescentam nada"

Isto tem alguns resultados interessantes, cujo propósito é obscuro para dizer o mínimo; considerar a sua aplicação com os seguintes valores:

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;

... e assim por diante.

Como a por eles fazem isso: Eu realmente não tenho a menor idéia. FWIW Eu tenho grandes quantidades de SVG, tanto estática e dinamicamente criado, trabalhando feliz no Firefox, Safari e Opera, e nenhum dos que nunca necessário esse tipo de bobagem.

Se ninguém nunca descobre a razão para isso, eu adoraria conhecê-la: -)

Answer 2

A razão pode ser o sistema de coordenadas utilizado para desenhar: uma linha preta 1 px desenhada em x = 1,0 é metade esquerda de 1,0 e metade direita da mesma, resultando numa linha cinzenta 2px. Com o 0.5px offset, a linha é entre 1.0 e 2.0.