قاعدة ملء SVG: كيف نرسم فجوة تحيط بجزيرة داخل المسار؟

تحدد قاعدة fill-rule المناطق المملوءة داخل المسار المركب. تفحص evenodd فردية عدد العبور، بينما تفحص nonzero محصلة العبور الموجه. [1]

الخلاصة السريعة

في رسمنا، صنعت evenodd فجوة حول الجزيرة دون تغيير اتجاه الحلقات.
صنعت nonzero النتيجة نفسها بعدما عكسنا الحلقة الوسطى وحدها.
تغيرت قيمة الملء عند Q، وبقيت الجزيرة عند R مملوءة.
isPointInFill يفحص نقطة بإحداثيات العنصر المحلية. [2]

رسم واحد بثلاث حلقات محددة

بنينا مثالا تعليميا من ثلاثة مستطيلات مغلقة داخل مسار واحد. يمتد الخارجي أفقيا من 10 إلى 210 وعموديا من 10 إلى 190. يمتد الأوسط من 50 إلى 170 ومن 50 إلى 150، والصغير من 90 إلى 130 ومن 80 إلى 120. هذه إحداثيات اخترناها، وليست أبعاد شعار مقتبس.

بدأنا كل حلقة من زاويتها العليا اليسرى، ثم سرنا إلى العليا اليمنى فالسفلى اليمنى فالسفلى اليسرى. أردنا لونا أزرق مخضرا في الحزام الخارجي والجزيرة الصغيرة، مع ظهور خلفية رملية في الحزام الذي بينهما. لم نرسم مستطيلا أبيض فوق اللون لإخفائه.

أبقينا الأبعاد والألوان ثابتة في أربع حالات. غيرنا قاعدة الملء أولا، ثم عكسنا ترتيب رؤوس الحلقة الوسطى وحدها وأعدنا القاعدتين. لذلك يمكن تتبع سبب الفرق من إعداد معلوم، دون مقارنة رسمين مختلفين في الحجم أو الموضع.

عد العبور من نقاط محددة

لتطبيق القاعدة نمد شعاعا من النقطة إلى الخارج. تعتبر evenodd العدد الفردي داخلا والزوجي خارجا. أما nonzero فتستخدم حصيلة عبور تراعي الاتجاه؛ الصفر خارج وغير الصفر داخل. [1]

اخترنا أربع نقاط على الارتفاع 100، بعيدا عن الحواف: O عند 5، وP عند 30، وQ عند 70، وR عند 110. أرسلنا من كل نقطة شعاعا عموديا إلى أعلى الرسم. أعداد عبور الحواف في مثالنا هي صفر وواحد واثنان وثلاثة على الترتيب.

في حسابنا الموجه أعطينا الحافة الأفقية المتجهة يمينا علامة موجبة، والمتجهة يسارا علامة سالبة. عندما تشابهت اتجاهات الحلقات، أصبحت المحصلات أيضا صفر وواحد واثنان وثلاثة. لهذا ملأت nonzero المواضع الثلاثة الداخلية، بما فيها Q التي أردناها فجوة.

بعد عكس الوسطى أصبح العبور الخاص بها سالبا. محصلة Q صارت واحدا ناقص واحد، أي صفرا. وعند R أضافت الحلقة الصغيرة عبورا موجبا آخر، فأصبحت المحصلة واحدا. أما عدد العبور غير الموجه فلم يتغير؛ لذلك أعطت evenodd النتيجة المطلوبة قبل العكس وبعده.

النقاط O وP وQ وR مع أشعة إلى الأعلى؛ أعداد العبور صفر وواحد واثنان وثلاثة، ومحصلات عكس الوسطى صفر وواحد وصفر وواحد. — الأشعة إلى أعلى الرسم فقط؛ عد الحواف المقطوعة ثم اجمع الإشارات المعلنة.

قارن الحالات الأربع عند Q وR

يلخص الجدول النتائج التي حسبناها ثم اختبرناها في Edge 155.0.4283.45. كلمة مملوء تعني أن النقطة تنتمي إلى ملء المسار نفسه. كانت O خارج الملء وP داخله في الحالات الأربع؛ لذلك نركز في العمودين الأخيرين على موضعي الخلاف والجزيرة.

في الحالة الأولى اختفت الفجوة المقصودة، لكن الجزيرة لم تختف من مجموعة النقاط المملوءة. وفي الحالات الثلاث الباقية ظهرت الخلفية الرملية عند Q وبقي الأزرق المخضر عند R. هذا التفريق يمنع وصف الشكل كله بأنه فارغ لمجرد وجود فجوة داخله.

اتجاه الوسطى	القاعدة	Q	R
مثل الأخريين	nonzero	مملوء	مملوء
مثل الأخريين	evenodd	خارج الملء	مملوء
معكوس	nonzero	خارج الملء	مملوء
معكوس	evenodd	خارج الملء	مملوء

أعد بناء الحالة الأولى وافحص نقطة

يعرض المقطع التالي الإحداثيات المستخدمة مع nonzero واتجاه موحد. بعد إدراجه في صفحة، اختر العنصر shape ونفذ مقطع الفحص. ستكون النتيجة عند Q هي true. بدل القاعدة إلى evenodd وأعد الفحص؛ تصبح false. أما فحص R فيعطي true في الحالتين.

يعيد isPointInFill قيمة منطقية عن وقوع النقطة داخل الملء. مررنا DOMPoint بإحداثيات العنصر المحلية، وليس بإحداثيات مؤشر الفأرة على الشاشة. [2]

لتجربة عكس الوسطى، استبدل سطرها وحده بالمسار البديل المعروض. احتفظ بالخارجية والصغيرة كما هما. مع nonzero تصبح Q خارج الملء، بينما تبقى R داخله. هكذا تعيد الاختبار بتغيير محدد تستطيع مراجعته حرفا حرفا.

<svg xmlns="http://www.w3.org/2000/svg"
     width="220" height="200"
     viewBox="0 0 220 200">
  <rect width="220" height="200"
        fill="#eee8d2"/>
  <path id="shape" fill="#148ca0"
    fill-rule="nonzero" d="
    M10 10 L210 10 L210 190 L10 190 Z
    M50 50 L170 50 L170 150 L50 150 Z
    M90 80 L130 80 L130 120 L90 120 Z"/>
</svg>

[1]

const shape=
  document.getElementById("shape");
shape.isPointInFill(
  new DOMPoint(70,100)
);

[2]

M50 50 L50 150 L170 150 L170 50 Z

الفحص الهندسي والفحص اللوني متفقان هنا

لم نكتف بقراءة قيمة منطقية. حولنا كل حالة إلى صورة ورسمناها محليا، ثم قرأنا لون بكسل عند كل نقطة. أعطت النقاط المملوءة اللون الأزرق المخضر نفسه، وأعطت النقاط الأخرى الخلفية الرملية. اتفق فحص النقاط الست عشرة مع الحساب ومع البكسلات الستة عشر.

هذه نتيجة لشكلنا الثابت ونقاطه البعيدة عن الحواف. لم نختبر نقاطا تقع على الحدود، ولم نضف تحويلا هندسيا أو نقيس مساحة الشكل. كما أن اختلاف علامة المحصلة كلها، لو بدلت اصطلاح الاتجاه، لا يغير كونها صفرا أو غير صفر. احتفظ باتجاه الشعاع وإشاراته معلنين حتى يستطيع قارئ آخر إعادة حساب الجدول.

المراجع

MDN — SVG fill-rule
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule
MDN — isPointInFill
https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/isPointInFill

أُعدّ هذا المقال بمساعدة الذكاء الاصطناعي وراجعته أدوات ذكاء اصطناعي. لا يُنسب إلى مراجع بشري أو خبير مستقل. منهجية المحتوى.