1

私は、javascriptでSVGを処理するのに非常に便利なRaphaelJavascriptライブラリが本当に好きです。

しかし、私が理解していない生成された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>

rectのx属性とy属性が0ではなく0.5であるのはなぜですか？

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

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

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

4

2 に答える 2

6

式+num + (~~num === num) * .5は言っています：

  1. +num：変数の値を数値として取得しますnum。
  2. (~~num === num)：変数の値のbitwise_NOTのbitwise-NOT num（小数部分が削除されたnumであり、に相当Math.floor(num)）が変数numの値と正確に等しい場合はtrueを返します。つまり、truenumが整数の場合はreturn 、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で問題なく動作しますが、このような愚かさは必要ありません。

誰かがこれの理由を見つけたら、私はそれを知りたいです:-)

于 2009-10-27T14:25:25.143 に答える
2

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

于 2011-02-22T22:03:43.780 に答える