¿De dónde viene el desplazamiento en Raphael javascript

Question

Me gusta mucho la biblioteca Raphael Javascript, que es muy útil para manejar SVG con javascript.

Sin embargo, hay un valor de compensación que se agrega al código svg generado que no entiendo. ¿Alguien sabe de dónde viene y cómo evitarlo?

Aquí está mi código JS:

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

El código SVG generado es

<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 qué los atributos x e y del rect son 0.5 y no 0?

Actualización: Parece que los valores se redondean con el siguiente código:

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

¿Alguien sabe el motivo?

Answer 1

La expresión + num + (~~ num === num) * .5 dice:

1. + num : obtenga el valor de la variable num como un número;
2. (~~ num === num) : devuelve verdadero si el bit-NOT del bitwise_NOT del valor de la variable num (que es num con cualquier componente fraccional eliminado, equivalente a Math.floor (num) ) es exactamente igual al valor de la variable num: es decir, devuelve true si num es un entero, < code> false de lo contrario;
3. agregue el resultado del paso 1 al resultado del paso 2, forzando así el valor booleano devuelto por el paso 2 en un valor numérico: para el caso cuando la variable num tiene el valor numérico 0, esto dará como resultado 1;
4. multiplique el resultado del paso 3 por 0.5.

Entonces obtenemos el resultado (0 + 1) * 0.5 , que es 0.5.

En otras palabras, el código dice " Para todos los enteros, agregue 0.5; para todos los no enteros, no agregue nada. "

Esto tiene algunos resultados interesantes cuyo propósito es oscuro por decir lo menos; considere su aplicación a los siguientes 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 ;

... y así sucesivamente.

En cuanto a por qué hacen esto: realmente no tengo la menor idea. FWIW Tengo grandes cantidades de SVG, tanto estáticas como dinámicamente creadas, trabajando felizmente en Firefox, Safari y Opera, y ninguna de ellas ha necesitado este tipo de tonterías.

Si alguien descubre la razón de esto, me encantaría saberlo :-)

Answer 2

La razón puede ser el sistema de coordenadas utilizado para dibujar: una línea negra de 1px dibujada en x = 1.0 está a la izquierda de 1.0 y la mitad a la derecha de la misma, lo que da como resultado una línea gris de 2px. Con el desplazamiento de 0.5px, la línea está entre 1.0 y 2.0.