Où vient le décalage en javascript Raphaël

Question

J'aime beaucoup la bibliothèque Javascript de Raphael, très utile pour la gestion de SVG avec javascript.

Cependant, il existe une valeur de décalage qui est ajoutée au code svg généré et que je ne comprends pas. Est-ce que quelqu'un sait d'où ça vient et comment l'éviter?

Voici mon code JS:

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

Le code SVG généré est

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

Pourquoi les attributs x et y du rect sont-ils 0,5 et non 0?

Mise à jour: il semble que les valeurs soient arrondies avec le code ci-dessous:

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

Quelqu'un connaît-il la raison?

Answer 1

L'expression + num + (~~ num === num) * .5 dit:

1. + num : obtenez la valeur de la variable num sous forme de nombre;
2. (~~ num === num) : retourne vrai si le bitwise-NOT du bitwise_NOT de la valeur de la variable num (qui est num avec tout le composant fractionnaire supprimé, équivalent à Math.floor (num) ) est exactement égal à la valeur de la variable num: c’est-à-dire, retourne true si num est un entier, < code> false sinon;
3. ajoute le résultat de l'étape 1 au résultat de l'étape 2, forçant ainsi la valeur booléenne renvoyée par l'étape 2 en une valeur numérique: dans le cas où la variable num a la valeur numérique 0, cela donnera 1;
4. multipliez le résultat de l'étape 3 par 0,5.

Nous obtenons donc le résultat (0 + 1) * 0.5 , qui est 0.5.

En d'autres termes, le code indique "Pour tous les entiers, ajoutez 0,5; pour tous les non-entiers, n'ajoutez rien. "

Cela a des résultats intéressants dont le but est pour le moins obscur; Son application aux valeurs suivantes:

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 ;

... et ainsi de suite.

Pour pourquoi , ils agissent ainsi: je n’ai vraiment pas la moindre idée. FWIW J’ai de grandes quantités de SVG, statiques et dynamiques, fonctionnant avec bonheur sur Firefox, Safari et Opera, et aucun d’eux n’a jamais eu besoin de ce genre de bêtise.

Si quelqu'un découvre la raison de cela, j'aimerais le savoir: -)

Answer 2

La raison peut être le système de coordonnées utilisé pour dessiner: une ligne noire de 1px dessinée à x = 1,0 correspond à la moitié à gauche de 1,0 et à la moitié à droite de celle-ci, ce qui donne une ligne grise de 2px. Avec le décalage de 0,5 px, la ligne est comprise entre 1,0 et 2,0.