تعرف على المزيد حول كيفية حل مشكلة الرسم غير الواضح على القماش على الأجهزة المحمولة

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

قبل شرح المشكلة، تحتاج أولاً إلى فهم بعض المعرفة الأساسية حول شاشة الهاتف المحمول والكافانات لتسهيل المزيد من الاستكشاف. إذا كنت تريد رؤية النتائج مباشرة، يمكنك التمرير إلى النهاية.

تسمى وحدات البكسل المادية أيضًا وحدات البكسل الخاصة بالجهاز، وكثيرًا ما نسمع أن دقة الهواتف المحمولة هي وحدات بكسل فعلية، على سبيل المثال، تبلغ الدقة الفعلية لجهاز iPhone 7 750*1334. تتكون الشاشة من بكسلات، مما يعني أن الشاشة تحتوي على 750 بكسل في الاتجاه الأفقي و1334 بكسل في الاتجاه الرأسي.

تسمى أيضًا البكسلات المنطقية، على سبيل المثال، يبلغ حجم كل من Iphone4 وIphone3GS 3.5 بوصة. تبلغ الدقة الفعلية لجهاز iphone4 640 * 980، بينما تبلغ دقة 3gs 320 * 480 فقط. إذا رسمنا صورة بعرض 320 بكسل وفقًا لـ. تخطيط حقيقي، في iPhone4، يحتوي نصف الشاشة فقط على محتوى، والنصف المتبقي فارغ. ولتجنب هذه المشكلة، قدمنا ​​وحدات البكسل المنطقية وقمنا بتعيين وحدات البكسل المنطقية لكلا الهاتفين المحمولين على 320 بكسل لتسهيل الرسم.

وحدات البكسل المستقلة للجهاز المذكورة أعلاه هي في النهاية لتسهيل الحساب، لقد قمنا بتوحيد البكسلات المنطقية للجهاز، لكن البكسلات المادية التي يمثلها كل بكسل منطقي غير مؤكدة من أجل تحديد العلاقة بين البكسلات المادية والبكسلات المنطقية دون تغيير الحجم ،، قدمنا ​​مفهوم نسبة بكسل الجهاز (DPR)

 نسبة بكسلات الجهاز = بكسلات الجهاز / وحدات البكسل المنطقية DPR = DP / DIP

هناك الكثير من النظريات المذكورة أعلاه، وهنا صورة للتوضيح.

كما يتبين من الشكل أعلاه، مع نفس حجم البكسلات المنطقية، تحتوي الشاشة عالية الوضوح على عدد أكبر من البكسلات المادية. تحت الشاشة العادية، يقابل 1 بكسل منطقي 1 بكسل مادي، بينما تحت شاشة عالية الوضوح مع dpr = 2، يتكون 1 بكسل منطقي من 4 بكسلات فعلية. وهذا أيضًا هو السبب الذي يجعل الشاشات عالية الوضوح أكثر حساسية.

هذه نقطة معرفة يجب أن يعرفها كل من يعرف القماش، وهي أيضًا جوهر المشكلة التي سنحللها لاحقًا.

سنترك شرح الصور النقطية لاحقًا. والآن نحتاج فقط إلى معرفة أن الصورة المرسومة بالقماش هي صورة نقطية.

من السهل جدًا على المبتدئين ارتكاب الأخطاء في سمات العرض والارتفاع للقماش. غالبًا ما يتم الخلط بين هاتين الخاصيتين وخصائص العرض والارتفاع في CSS.

على سبيل المثال، لدينا الكود التالي (1):

 <عرض القماش = ارتفاع 600 = 300 نمط = العرض: 300 بكسل الارتفاع: 150 بكسل ></قماش> 

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

إذا كنت لا تزال غير قادر على فهمه، فيمكنك تخيله كالرمز التالي (2):

 <!-- بكسلات logo.png هي 600 * 300 --><img style=width: 300px height: 150px src=logo.png />

العرض والارتفاع الافتراضي للوحة القماشية هما 300 * 150. بعد تعيين CSS، سيتم تغيير حجم اللوحة القماشية (ملاحظة لم يتم اقتصاصها) وفقًا لعرض وارتفاع CSS المحدد ، وهو نفس علامة img.

يمكن بالفعل تفسير الكود أعلاه (1) بطريقة أكثر شيوعًا، أي أن البكسل المنطقي الواحد يتم ملؤه فعليًا ببكسلتين من القماش.

ما ورد أعلاه هو مقدمة لبعض المعرفة الأساسية المطلوبة، وسيبدأ الاستكشاف الرسمي أدناه.

أولاً، ذكرنا أن استخدام اللوحة القماشية لرسم الصور هو عبارة عن صورة نقطية، كما أن الصورتين jpg وpng اللتين نستخدمهما عادةً هي أيضًا صور نقطية. إذن ما هي الصورة النقطية؟

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

لنفترض أن لدينا الكود التالي، والذي سيتم عرضه على شاشة شبكية العين لجهاز iPhone 4:

 <عرض القماش = ارتفاع 320 = 150 نمط = العرض: 320 بكسل الارتفاع: 150 بكسل ></قماش>

تبلغ وحدات البكسل الفعلية لجهاز iPhone 4 نفسه 640 * 980، بينما تبلغ وحدات البكسل المستقلة للجهاز 320 * 480، مما يعني أن 1 بكسل CSS يتكون في الواقع من 4 وحدات بكسل مادية. تبلغ وحدات البكسل القماشية 320 * 150، وبكسلات CSS الخاصة بها 320 * 150. وهذا يعني أن بكسل CSS الواحد سيتكون من عنصر قماش واحد، لذلك يتم التحويل على النحو التالي: على شاشة شبكية العين، سيملأ بكسل قماشي واحد (أو بكسل نقطي واحد) 4 بكسلات فعلية نظرًا لأنه لا يمكن تقسيم بكسل نقطي واحد بشكل أكبر، فيمكنه فقط أخذ اللون الأقرب، مما يؤدي إلى عدم وضوح الصورة.

إذا كنت لا تزال في حيرة من أمرك، فيمكن أن توضح الصورة التالية كيفية ملء الصورة النقطية على شاشة شبكية العين:

يُظهر الجانب الأيسر من الصورة أعلاه قواعد العرض على شاشة عادية، ويمكن ملاحظة أن هناك 4 بكسلات نقطية، بينما تحتوي الشاشة عالية الوضوح على اليمين على 16 بكسل. نظرًا لأنه لا يمكن قطع وحدات البكسل، يتغير اللون.

ولكن الشيء الوحيد الذي لم يتم شرحه بوضوح هو سبب أخذ الصورة للون الأقرب بدلاً من أخذ القيمة الأصلية مباشرةً، وهذا أيضًا هو السبب وراء التمويه.

فيما يلي ما ساعدني أحد زملائي الكبار في شرحه. لقد قلنا للتو أن كل عنصر من عناصر الصورة النقطية هو في الواقع بكسل ذو لون خالص. لنفترض الآن أننا بحاجة إلى رسم رقم 0 على شاشة عادية بحجم CSS يبلغ 4px * 4px وdpr قدره 1. ثم ما نرسمه يجب أن يبدو مثل الصورة التالية، حيث يمثل 1 وحدات البكسل السوداء و0 يمثل وحدات البكسل البيضاء.

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

نحن نعلم أنه تحت شاشة شبكية العين، يمثل بكسل CSS واحد 4 بكسلات مادية. إذا لم نقم بأي معالجة، وقمنا بالترتيب المباشر وفقًا للمصفوفة أعلاه، وقمنا بتوسيع المصفوفة، فسنجد أنه تحت شاشة شبكية العين، يوجد نمط لدينا. من الواضح جدًا أن الصورة تفتقر إلى أي تلميح لـ Hue.

إذا قمنا بتغيير الصورة قليلاً، قم بتغييرها إلى الصورة التالية

تبدو الصورة أكثر ليونة على الفور، لكن المكان الذي كان ينبغي ملؤه بـ 4 0 أصبح 3 1s زائد 1 0. وهذا في الواقع ما يسمى بعملية تجانس الصورة، ومن أجل حل الشعور بالخشونة، يتم تغيير اللون الأصلي في الصور المليئة بمزيد من الألوان، لكي تكون مفاصل الصور ذات ألوان تقريبية أكثر يوضح السبب عند تعبئة اللون أعلاه، لا يتم استخدام اللون الأصلي ولكن اللون التقريبي.

بعد اجتياز الشرح أعلاه، دعونا الآن نلخص الاستنتاجات التالية: الآن بعد أن أصبحت المحطات المتنقلة شائعة وأصبحت الشاشات عالية الوضوح شائعة بشكل أساسي، فإن بكسل CSS بحجم 1 بكسل يمثل في الواقع 4 بكسلات مادية أو أكثر. ومع ذلك، نظرًا لمشكلة الكود لدينا، فإن 1 بكسل CSS بكسل و1 بكسل قماشي متساويان، مما يؤدي إلى ضرورة ملء 1 بكسل قماش فعليًا بـ 4 بكسلات فعلية أو أكثر لضمان المعالجة السلسة للصور، فإن التعبئة المادية المتبقية تستخدم وحدات البكسل لونًا تقريبيًا للون الأصلي، مما يؤدي إلى الحصول على صورة ضبابية.

بمجرد فهم سبب المشكلة، يصبح من السهل حل المشكلة. أهم شيء لحل المشكلة هو مساواة بكسل قماشي واحد وبكسل فعلي واحد.

توجد سمة DevicePixelRatio معلقة أسفل كائن النافذة في متصفحات الإصدار الأعلى، وهي dpr المذكورة أعلاه.

عندما يتم تحديد العرض والارتفاع لعنصر قماش CSS، يمكننا القيام بذلك

 Let Canvas = document.getElementById('canvas');let ctx = Canvas.getContext('2d');let dpr = window.devicePixelRatio; // افترض أن dpr هو 2// احصل على عرض وارتفاع CSS Let { width: cssWidth، height: cssHeight } = Canvas.getBoundingClientRect();// وفقًا لـ dpr، قم بتوسيع وحدات البكسل في لوحة القماش بحيث يساوي بكسل قماش واحد بكسلًا فعليًا Canvas.width = dpr * cssWidth; Canvas.height = dpr * cssHeight; يتم توسيع اللوحة القماشية أيضًا إذا كان محتوى الرسم يعتمد على نظام الإحداثيات الأصلي، فسيتم تقليل المحتوى // لذا يجب تكبير مقياس الرسم ctx.scale(dpr,dpr);

في كثير من الأحيان، عندما نجد مشكلة، لا يمكننا التركيز على حل المشكلة، وبدلاً من ذلك، يجب أن نفهم سبب المشكلة بعمق حتى نتمكن من المضي قدمًا بشكل أفضل.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.