تعليق: في المرة الأخيرة التي ذكرنا فيها أن القماش يحتوي في بعض الأحيان على خطوط 1 بكسل غير واضحة ويبدو أنها أوسع. من الواضح أن مثل هذه الخطوط ليست ما نريد. الغرض من هذه المقالة هو معرفة المبادئ وحلها. يمكن للأصدقاء المهتمين معرفة المزيد.
تابع مع تعليمي رسم خط القماش السابقفي المرة الأخيرة التي ذكرنا فيها أن القماش يحتوي في بعض الأحيان على خطوط 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 بكسل.