تابع مع تعليمي رسم خط القماش السابق
في المرة الأخيرة التي ذكرنا فيها أن القماش يحتوي في بعض الأحيان على خطوط 1 بكسل غير واضحة ويبدو أنها أوسع ، كما هو موضح في الشكل أدناه:
من الواضح أن مثل هذه الخطوط ليست ما نريد.
الغرض من هذه المقالة هو معرفة المبادئ وحلها.
يعلم الجميع أن أصغر حجم عرض على الشاشة هو 1 بكسل. على الرغم من أنه قد لا يتم عرض الأشياء التي تقل عن 1 بكسل ، إلا أن الكمبيوتر لا يهتم وسيحاول رسمه.
في الواقع ، البكسل هي أيضا وحدة بعد كل شيء. إذا قمنا بتكبير القماش إلى حجم كبير بما يكفي لرؤية كل بكسل بوضوح ، فماذا سيحدث؟ ربما يكون مثل هذا:
كل بكسل له نطاق بداية ونهاية ، كما هو موضح في الشكل ، يبدأ نطاقها من اليسار ، ويمتد 1 بكسل ، ويتوقف اليمين.
إذا اتبعنا النطاق البدء والنهائي للبكسل عند رسم خطوط بكسل 1 ، فسوف نحصل بالتأكيد على خط رفيع قياسي للغاية. على النحو التالي:
ولكن لسوء الحظ ، يتم رسم خطوط قماش بشكل مختلف. في المقالة السابقة ، قلنا بالفعل أن كل سطر من القماش لديه خط متوسط رقيق بلا حدود ، ويمتد عرض الخط من خط الوسط إلى كلا الجانبين. إذا لم نرسم خطًا من نقطة بكسل الثانية ، فسيكون خط الوسط للخط قريبًا من نقطة البداية من بكسل الثاني ، ثم نبدأ في الرسم ، وتأتي المشكلة: يمتد خط القماش إلى كلا الجانبين مع خط الوسط ، بدلاً من جانب واحد (على سبيل المثال ، هنا ، إذا تمتد إلى اليمين فقط ، فإن مشكلتنا لم تعد مشكلة). بعد التمديد ، خطنا هو في الواقع مثل هذا:
هناك مشكلة أخرى في هذا الوقت: لا يسمح الكمبيوتر بالرسومات أقل من 1 بكسل ، لذلك قام بتسوية: ارسم كلا البكسلات.
لذلك ، وبهذه الطريقة ، يصبح خط 1PX الأصلي خطًا يبدو 2 بكسل.
تم العثور على سبب الفشل: الخط في القماش يتوافق مع خط الوسط مع نقطة انطلاق البيكسل ، وليس النقطة الوسطى للبكسل.
فكيف نحل هذه المشكلة المؤلمة؟ ربما فكر بعض الأشخاص بالفعل: نظرًا لأن نقطتي البداية مختلفة ، فلنجعل نقاط البداية كما هي!
نحتاج فقط إلى محاذاة الخط الأوسط للخط مع النقطة الوسطى للبكسل!
من السهل العثور على النقطة الوسيطة للبكسل. على سبيل المثال ، فإن النقطة الوسيطة للبكسل الثاني هي موضع 1.5 بكسل وفقًا للشرح على الشكل ، وبالتالي فإن النقطة الوسيطة للبكسل x هي (x-0.5) px.
بالطبع ، في مناسبات أقل صرامة ، يمكنك استخدام X+0.5.
الآن دعنا نجرب نتائجنا على القماش.
CTX.Moveto (100.5،100.5) ؛
CTX.Lineto (200.5،100.5) ؛
CTX.Lineto (200.5،200.5) ؛
CTX.Lineto (100.5،200.5) ؛
CTX.Lineto (100.5،100.5) ؛
ctx.closepath () ؛
ctx.linewidth = 1 ؛
CTX.Strokestyle = 'RGBA (255،0،0،5)' ؛
ctx.stroke () ؛
يبدو صحيحا؟
ولكن يبدو أنه عندما نرسم خطوطًا ، فإننا في حيرة من أمري. هل نضيف دائمًا هذا الاكتئاب 0.5؟ بالطبع لا ، لأننا نستخدم المتغيرات لتوفير القيم في معظم الأوقات ، لذلك لا نحتاج إلى إضافة 0.5 إلى كل قيمة
علاوة على ذلك ، بالنسبة للخطوط التي تحتوي على عرض خط> 1 ، لا داعي للقلق بشأنه: لأن هذه المشكلة هي الأكثر وضوحًا عندما يكون الخط 1 بكسل.