من أين يأتي الإزاحة في رافائيل جافا سكريبت

Question

تعجبني حقًا مكتبة Raphael Javascript التي تعد مفيدة جدًا للتعامل مع SVG باستخدام 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.5 وليس 0؟

تحديث:يبدو أنه تم تقريب القيم بالرمز أدناه:

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

هل يعرف أحد السبب؟

Answer 1

التعبير +num + (~~num === num) * .5 يقول:

1. +num:الحصول على قيمة المتغير num كرقم؛
2. (~~num === num):يُرجع صحيحًا إذا كان bitwise-NOT لـ bitwise_NOT لقيمة المتغير num (وهو رقم مع إزالة أي مكون كسري، أي ما يعادل Math.floor(num)) تساوي تمامًا قيمة المتغير num:وهذا هو، العودة true إذا كان num عددًا صحيحًا، 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، ولم يحتاج أي منها إلى هذا النوع من السخافة على الإطلاق.

إذا اكتشف أي شخص السبب وراء ذلك، فأنا أحب أن أعرفه :-)

Answer 2

والسبب قد يكون نظام الإحداثيات المستخدمة في الرسم: هو نصف يقم خط أسود 1PX رسمها عند x = 1.0 من 1.0 ونصف الحق منه، مما أدى إلى خط رمادي 2px. مع 0.5px تعويض، والخط هو بين 1.0 و 2.0.