Raphael javascriptのオフセットはどこにありますか

Question

javascriptでSVGを処理するのに非常に役立つRaphael Javascriptライブラリが本当に好きです。

ただし、生成された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>          

長方形のxおよびy属性が0ではなく0.5である理由

更新：値は以下のコードで丸められているようです：

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

誰もが理由を知っていますか？

Answer 1

式 + num +（~~ num === num）* .5 は次のように言っています：

1. + num ：変数 num の値を数値として取得します。
2. （~~ num === num）：変数 num の値のbitwise_NOTのbitwise-NOTがtrue Math.floor（num）と同等）が削除された小数部は、変数numの値と正確に等しい。つまり、numが整数の場合は true を返し、< code> false それ以外の場合;
3. ステップ1の結果をステップ2の結果に追加して、ステップ2で返されたブール値を数値に強制します。変数 num の数値が0の場合、これは1になります。
4. ステップ3の結果に0.5を掛けます。

したがって、（0 + 1）* 0.5 という結果が得られます。これは0.5です。

言い換えると、コードは「すべての整数について、0.5を追加」と言っています。すべての非整数については、何も追加しません。＆quot;

これには、控えめに言ってもその目的が不明瞭な興味深い結果がいくつかあります。次の値への適用を検討してください。

1. 0-＆gt; 0.5 ;
2. 0.1-＆gt; 0.1 ;
3. 0.4-＆gt; 0.4 ;
4. 0.5-＆gt; 0.5 ;
5. 0.9-＆gt; 0.9 ;
6. 1.0-＆gt; 1.5 ;
7. 1.1-＆gt; 1.1 ;

...など。

なぜについては、彼らはこうしている：私は本当に微妙なアイデアを持っていない。 FWIW静的および動的に作成されたSVGが大量にあり、Firefox、Safari、Operaで快適に動作しますが、この種の愚かさを必要としたものはありません。

誰かがこの理由を見つけた場合、私はそれを知りたいです：-）

Answer 2

理由は、描画に使用される座標系である可能性があります。x= 1.0で描画される1pxの黒い線は、1.0の左半分と右半分で、2pxの灰色の線になります。 0.5pxオフセットでは、ラインは1.0〜2.0です。