11/4/2018 Two-Dimensional Graphics

Chapter II

Fathalla R. Faraj Mansouri

‫‪Two-Dimensional Graphics‬‬

‫‪2.‬‬ ‫‪Introduction‬‬
‫ان رسومات ‪ 2D‬هي رسومات من السهل جدا تخيلها و رسمها سواء في الطبيعة او على الكمبيوتر و ال‬
‫تحتاج الى مساقط او تفكير من عدة نواحي او جوانب الن الرسم معروض و موضح في عرض و ارتفاع‬
‫على اقصى تقدير‪ ,‬و هذا تماما ما تمثله شاشة الكمبيوتر‪ ,‬و الجدير بالذكر ايضا ان االشكال في ابعاد مثل ‪3D‬‬
‫او أكثر‪ ,‬هي امور تخيلية في الكمبيوتر أليمكن تنفيذها اال على هذا النحو‪.‬‬
‫‪2.1‬‬ ‫‪Pixels, Coordinates, and Colors‬‬
‫إلنشاء صورة ثنائية األبعاد‪ ,‬يتم تعيين لون لكل نقطة او بكسل بمعنى اصح‪ ,‬في كل صورة‪ .‬يمكن تحديد نقطة‬
‫في ‪ 2D‬بواسطة زوج من اإلحداثيات الرقمية‪ ,‬يمكن أيضا تحديد األلوان عدديا‪ .‬ومع ذلك‪ ,‬فإن تعيين األرقام‬
‫للنقاط أو األلوان أمر عشوائي إلى حد ما‪ .‬لذلك نحن بحاجة إلى قضاء بعض الوقت في دراسة أنظمة‬
‫اإلحداثيات‪ ,‬التي تربط األرقام بالنقاط‪ ,‬ونماذج األلوان‪ ,‬التي تربط األرقام باأللوان‪.‬‬
‫‪2.1.1 Pixel Coordinates‬‬
‫تتكون الصورة الرقمية من صفوف وأعمدة البكسل‪ .‬يمكن تحديد بكسل في صورة معينة وذلك بتحديد أي‬
‫عمود وأي صف تحقق تقاطع هذه البكسل‪ .‬من ناحية اإلحداثيات الرياضية‪ ,‬يمكن تحديد بيكسل بواسطة زوج‬
‫من األعداد الصحيحة يعطي رقم العمود ورقم الصف‪ .‬على سبيل المثال‪ ,‬نجد ان البكسل مع اإلحداثيات‬
‫(‪ )3،5‬يكمن في العمود رقم ‪ 3‬ورقم الصف ‪ .5‬بشكل تقليدي‪ ,‬يتم ترقيم األعمدة من اليسار إلى اليمين‪ ,‬بد ًءا‬
‫من الصفر‪ .‬ان معظم أنظمة الرسومات‪ ,‬بما في ذلك تلك التي سنقوم بدراستها‪ ,‬سيتم ترتيبها من األعلى إلى‬
‫األسفل‪ ,‬بد ًءا من الصفر‪.‬‬
‫‪0 1 2 3 4 5 6 7 8 91011‬‬ ‫‪0 1 2 3 4 5 6 7 8 91011‬‬

‫‪12-by-8 pixel grids, shown with row and column numbers.‬‬

‫الحظ على وجه الخصوص أن البكسل المحدد بواسطة زوج من اإلحداثيات (‪ )x ,y‬يعتمد على اختيار نظام‬
‫اإلحداثيات‪ .‬تحتاج دائما إلى معرفة نظام اإلحداثيات قيد االستخدام قبل معرفة النقطة التي تتحدث عنها‪.‬‬
‫أن تحديد أرقام الصفوف واألعمدة كبيكسل‪ ,‬وليس نقطة‪ .‬قد ال يكون جيدا و خصوصا ان الهدف من‬
‫رسومات الكمبيوتر ليس في الواقع لون للبكسل‪ ,‬بل هو إنشاء الصور ومعالجتها‪ .‬بمعنى ما‪ ,‬يجب تعريف‬

‫‪1‬‬
‫‪Two-Dimensional Graphics‬‬

‫الصورة بتحديد لون لكل نقطة‪ ,‬وليس لكل بكسل فقط‪ .‬الن عملية استخدام البكسل هي عملية تقريبية‪ .‬فإذا‬
‫تصورنا أن هناك صورة حقيقية مثالية نريد عرضها‪ ,‬فإن أي صورة سوف نعرضها عن طريق تلوين البيكسل‬
‫هي صورة تقريبية‪ ,‬هذا ما سيقودنا الى التفكير بشكل مختلف‪.‬‬
‫نفترض‪ ,‬على سبيل المثال‪ ,‬أننا نريد رسم جزء من خط مستقيم‪ .‬الخط الرياضي ال سماكة له ويكون غير‬
‫مرئي‪ .‬لذلك نريد حقا ً رسم جزء من خط مستقيم سميك‪ ,‬مع عرض محدد‪ .‬لنفترض أن الخط يجب أن يكون‬
‫بعرض واحد بكسل‪ .‬تكمن المشكلة في أنه ما لم يكن الخط أفقيا أو رأسيا‪ ,‬ال يمكننا رسم الخط عن طريق‬
‫تلوين البكسل‪ .‬سيغطي الخط الهندسي القطري بعض البيكسل بشكل جزئي فقط‪ .‬انه ليس من الممكن أن تجعل‬
‫جزء من البيكسل أسود وجزء منه أبيض‪ .‬عند محاولة رسم خط بوحدات بكسل باللون األبيض واألسود فقط‪,‬‬
‫تكون النتيجة خط متعرج‪ .‬ويمكن أيضا رؤية التعريج في الخطوط العريضة لألحرف المرسومة على الشاشة‬
‫وفي الحدود القطرية أو المنحنية بين أي منطقتين بلون مختلف‪( .‬يشير مصطلح ‪ aliasing‬على األرجح إلى‬
‫حقيقة أن الصور المثالية يتم وصفها بشكل طبيعي في إحداثيات الرقم الحقيقي‪ .‬فعندما تحاول تمثيل الصورة‬
‫باستخدام وحدات البكسل‪ ,‬فإن العديد من إحداثيات األرقام الحقيقية سوف ترسم إلى نفس إحداثيات البكسل ذات‬
‫العدد الصحيح‪ ,‬إذ يمكن اعتبارها جميعا كأسماء مختلفة أو "‪ " aliasing‬لنفس البكسل‪).‬‬
‫‪ Antialiasing‬هو مصطلح للتقنيات التي تم تصميمها للتخفيف من تأثيرات ال ‪ .aliasing‬الفكرة هي‬
‫أنه عندما يتم تغطية البكسل جزئيا فقط بالشكل‪ ,‬يجب أن يكون لون البكسل خليط من لون الشكل ولون الخلفية‪.‬‬
‫فعند رسم خط أسود على خلفية بيضاء‪ ,‬فإن لون البيكسل المغطى جزئيًا سيكون رمادي‪ ,‬مع تظليل الرمادي‬
‫اعتمادا على جزء البكسل المغطى بالخط‪( .‬من الناحية العملية‪ ,‬سيكون حساب هذه المنطقة بالضبط لكل بكسل‬
‫أمر صعب للغاية‪ ,‬لذلك يتم استخدام بعض الطرق التقريبية‪ ).‬هنا‪ ,‬على سبيل المثال‪ ,‬الخط هندسي‪ ,‬الذي‬
‫يظهر على اليسار‪ ,‬و إلى جانبه خطوط تم رسمهما بواسطة تلوين البيكسل‪ ,‬و تم تكبير الخطوط بشكل معين‬
‫بحيث يمكنك رؤية وحدات البكسل الفردية كما موضحة في لشكل ادناه‪ .‬يتم رسم الخط الموجود على اليمين‬
‫باستخدام الحواف‪ ,‬بينما الخط الموجود في الوسط لم تستخدم فيه كما يلي‪:‬‬

‫‪2‬‬
‫‪Two-Dimensional Graphics‬‬

‫الحظ أن الحواف ال تعطي صورة مثالية‪ ,‬ولكنها يمكن أن تقلل من التعرجات (على األقل عندما يتم‬
‫عرضها على مقياس طبيعي)‪.‬‬
‫هناك قضايا أخرى تشارك في تخطيط إحداثيات الرقم الحقيقي للبكسل‪ .‬على سبيل المثال‪ ,‬ما هي‬
‫النقطة في البكسل التي يجب أن تتوافق مع إحداثيات ذات قيمة صحيحة مثل (‪)3،5‬؟ مركز البكسل؟ واحد‬
‫من أركان البكسل؟ بشكل عام‪ ,‬نفكر في األرقام على أنها تشير إلى الزاوية العلوية اليسرى للبكسل‪ .‬هناك‬
‫طريقة أخرى للتفكير في هذا االمر وهي أن اإلحداثيات الصحيحة تشير إلى الخطوط بين البكسل‪ ,‬بدال ً‬
‫من وحدات البكسل نفسها‪ .‬لكن ذلك ال يحدد بالضبط أي وحدات البكسل تتأثر عند رسم شكل هندسي‪.‬‬
‫على سبيل المثال‪ ,‬في ما يلي سطرين يتم رسمهما باستخدام رسومات بتنسيق ‪ , HTML‬حيث يتم تكبيرها‬
‫بشكل كبير‪ .‬تم تحديد الخطوط لتكون سوداء مع عرض خط واحد بكسل‪:‬‬

‫تم رسم السطر العلوي من النقطة (‪ )100,100‬الى النقطة (‪ .)120,100‬في الرسومات ذات‬
‫إحداثيات عدد صحيح تتطابق مع الخطوط بين البكسالت‪ ,‬ولكن عندما يتم رسم خط ذو بكسل واحد‪ ,‬فإنه‬
‫يمتد بمقدار نصف بكسل على جانبي الخط الهندسي الرقيق‪ .‬لذا بالنسبة للخط العلوي‪ ,‬فإن الخط الذي يتم‬
‫رسمه يقع في نصف صف واحد من البكسل والنصف اآلخر في صف آخر‪ .‬نظام الرسومات‪ ,‬الذي‬
‫يستخدم ‪ ,antialiasing‬يعطي الخط بتلوين صفين البكسل بلون الرمادي‪ .‬تم رسم الخط في الثاني من‬
‫النقطة (‪ )100.5,100.5‬الى (‪ .)120.5,120.5‬في هذه الحالة‪ ,‬يقع الخط بالضبط على طول خط واحد‬
‫من البيكسل‪ ,‬والذي يصبح أسود اللون‪ .‬تتعلق البكسل الرمادية في نهايات السطر السفلي بحقيقة أن الخط‬
‫يمتد فقط في منتصف المسافة إلى البكسل عند نقاط النهاية‪ .‬مع مالحظة انه قد تقوم أنظمة رسومات مختلفة‬
‫بعرض الخطوط نفسها بشكل مختلف‪.‬‬
‫كل هذا أكثر تعقيدًا بسبب حقيقة أن البكسل ليست ما كانت عليه من قبل‪ .‬البكسل األن اصبحت أصغر!‬
‫يمكن قياس دقة جهاز العرض من حيث عدد البكسل لكل بوصة على الشاشة‪ ,‬وكمعيار يشار إليها بـ ‪PPI‬‬
‫(بكسل لكل بوصة) أو أحيانا ‪( DPI‬نقطة لكل بوصة)‪ .‬تمثيل الشاشات قديما‪ ,‬تكون فيه وحدات البكسل‬
‫الفردية مرئية بوضوح‪ .‬لفترة من الوقت‪ ,‬يبدو أن معظم شاشات العرض كانت حوالي ‪ 100‬بيكسل في‬

‫‪3‬‬
‫‪Two-Dimensional Graphics‬‬

‫البوصة‪ ,‬ولكن يمكن أن تحتوي شاشات العرض عالية الدقة اليوم على ‪ 200‬أو ‪ 300‬أو حتى ‪400‬‬
‫بكسل لكل بوصة‪ .‬في أعلى دقة‪ ,‬و هنا ال يمكن تمييز وحدات البكسل الفردية‪.‬‬
‫تعتبر حقيقة أن البيكسل تأتي في مثل هذا النطاق من األحجام مشكلة إذا استخدمنا أنظمة اإلحداثيات‬
‫القائمة على وحدات البكسل‪ .‬سوف تظهر صورة تم إنشاؤها على افتراض أن هناك ‪ 100‬بكسل في‬
‫البوصة صغيرة على عرض ‪ .PPI 400‬يبدو الخط بعرض بكسل واحد جيد عند ‪ ,PPI 100‬ولكن عند‬
‫‪ ,PPI 400‬من المحتمل أن يكون الخط بعرض بكسل واحد رقيق جدا‪.‬‬
‫في الواقع‪ ,‬في العديد من أنظمة الرسومات‪ ,‬ال تشير "البكسل" او بمعنى ادق إلى حجم البكسل المادي‪.‬‬
‫فبدال من ذلك‪ ,‬تستخدم وحدة قياس أخرى‪ ,‬يحددها النظام لتكون مناسبة‪( .‬على نظام سطح المكتب‪ ,‬عادة‬
‫ما تكون البكسل حوالي واحد في المائة من البوصة‪ .‬على الهاتف الذكي‪ ,‬الذي عادة ما ينظر إليه من‬
‫مسافة أقرب‪ ,‬قد تكون القيمة أقرب إلى ‪ 160/1‬بوصة‪ .‬يمكن أن تتغير وحدة البكسل كوحدة قياس عندما‬
‫يقوم المستخدم‪ ,‬على سبيل المثال‪ ,‬بتطبيق تكبير لصفحة ويب‪).‬‬
‫تسبب البكسل مشاكل لم يتم حلها بالكامل‪ .‬ولكن هذه المشاكل تكون اقل للرسومات المتجهة‪ ,‬وهو في‬
‫الغالب ما سنستخدمه في هذا التخصص‪ .‬بالنسبة للرسومات المتجهة‪ ,‬تصبح البكسل فقط مشكلة أثناء‬
‫التنقيط‪ ,‬وهي الخطوة التي يتم تحويل الصورة المتجهة بها إلى وحدات بكسل للعرض‪ .‬يمكن إنشاء الصورة‬
‫المتجهة نفسها باستخدام أي نظام إحداثيات مالئم‪ .‬وهو يمثل صورة مثالية مستقلة‪ .‬الصورة المنقطة هي‬
‫تقريبا تمثل الصورة المثالية‪ ,‬ولكن عموما يمكن ترك كيفية إجراء التقريب ألجهزة العرض‪.‬‬
‫‪2.1.2Real-number Coordinate Systems‬‬
‫عند تنفيذ رسومات ثنائية األبعاد‪ ,‬يتم منحك مستطيالً تريد فيه رسم بعض الرسومات األولية‪ ,‬يتم‬
‫تحديدها باستخدام نظام اإلحداثيات على المستطيل‪ .‬يجب أن يكون من الممكن تحديد نظام إحداثي مناسب‬
‫للتطبيق‪ .‬على سبيل المثال‪ ,‬إذا كان المستطيل يمثل مخط ً‬
‫طا لألرضية لـ ‪ 15‬قدم و بعرض ‪ 12‬قدم‪ ,‬فقد‬
‫تحتاج إلى استخدام نظام إحداثي حيث تكون وحدة القياس قدم واحدة‪ ,‬وتتراوح اإلحداثيات من ‪ 0‬إلى ‪15‬‬
‫في االتجاه األفقي و من ‪ 0‬إلى ‪ 12‬في االتجاه العمودي‪ .‬وحدة القياس في هذه الحالة هي قدم بدال من‬
‫وحدات البكسل‪ ,‬ويمكن أن تتطابق وحدة قدم واحدة‪ ,‬مع العديد من وحدات البكسل في الصورة‪ .‬بشكل‬
‫عام‪ ,‬تكون إحداثيات البكسل أرقام حقيقية بدالً من أعداد صحيحة‪ .‬في الواقع‪ ,‬من األفضل نسيان وحدات‬
‫البكسل والتفكير فقط في النقاط في الصورة‪ .‬سيكون للنقطة زوج من اإلحداثيات المعطاة بأرقام حقيقية‪.‬‬

‫‪4‬‬
‫‪Two-Dimensional Graphics‬‬

‫لتحديد نظام اإلحداثيات على مستطيل‪ ,‬يجب عليك فقط تحديد اإلحداثيات األفقية للحواف اليسرى‬
‫واليمنى للمستطيل واإلحداثيات الرأسية لألعلى واألسفل‪ .‬سنسمي هذه القيم اليسار واليمين واألعلى‬
‫واألسفل‪ .‬في كثير من األحيان‪ ,‬يُنظر إليها على أنها ‪ ,xmin‬و ‪ ,xmax‬و ‪ , ymin‬و ‪ ,ymax‬وقد‬
‫يحدث أن تكون القمة أعلى من القاع‪ .‬قد نرغب في نظام إحداثيات يزداد فيه التنسيق الرأسي من األسفل‬
‫إلى األعلى بدالً من من األعلى إلى األسفل‪ .‬في هذه الحالة‪ ,‬ستقابل القمة القيمة القصوى للقيمة ‪ y‬بدالً من‬
‫الحد األدنى للقيمة‪.‬‬
‫للسماح للمبرمجين بتحديد نظام اإلحداثيات الذي يرغبون في استخدامه‪ ,‬سيكون من الجيد وجود روتين‬
‫فرعي مثل‬
‫)‪setCoordinateSystem(left,right,bottom,top‬‬

‫عندئ ٍذ يكون نظام الرسومات مسؤوالً عن تحويل اإلحداثيات تلقائيا من نظام اإلحداثيات المحدد إلى‬
‫إحداثيات البكسل هذا امر جيد طبعا‪ .‬و لكن قد ال يكون هذا الروتين الفرعي متاح‪ ,‬لذلك من المفيد معرفة‬
‫كيفية إجراء التحويل بشكل يدوي‪ .‬لننظر في الحالة العامة‪ .‬وبالنظر إلى إحداثيات نقطة في نظام إحداثي‬
‫واحد‪ ,‬فإننا نريد إيجاد اإلحداثيات للنقطة نفسها في نظام إحداثي آخر‪( .‬تذكر أن نظام اإلحداثيات هو مجرد‬
‫طريقة لتعيين أرقام للنقاط‪ .‬إنها النقاط الحقيقية!) لنفترض أن الحدود القديمة للنقطة )‪(oldX,oldY‬‬
‫موضحة في الشكل االتي‪ .‬نريد أن نجد اإلحداثيات للنقطة في الشكل الجديد( ‪. )newX ,newY‬‬

‫‪Formulas for newX and newY are then given by‬‬

‫‪newX = newLeft +‬‬
‫)‪((oldX - oldLeft) / (oldRight - oldLeft)) * (newRight - newLeft‬‬
‫‪newY = newTop +‬‬
‫)‪((oldY - oldTop) / (oldBottom - oldTop)) * (newBotom - newTop‬‬

‫‪5‬‬
‫‪Two-Dimensional Graphics‬‬

‫المنطق هنا هو أن ‪ oldX‬يقع في جزء معين من المسافة من ‪ oldLeft‬إلى ‪ .oldRight‬يتم إعطاء‬

‫هذا الجزء من بالشكل االتي‪:‬‬
‫))‪((oldX - oldLeft) / (oldRight - oldLeft‬‬

‫تقول الصيغة لـ ‪ newX‬فقط أن ‪ newX‬يجب أن تقع في نفس الجزء من المسافة من ‪ newLeft‬إلى‬

‫‪ .newRight‬يمكنك أيضا التحقق من الصيغ عن طريق اختبار أنها تعمل عندما يكون ‪ oldX‬يساوي‬
‫القديم إلى اليسار أو إلى ‪ , oldRight‬وعندما يكون ‪ oldY‬مساويًا لـ ‪ OldBottom‬أو إلى ‪.oldTop‬‬
‫على سبيل المثال‪ ,‬افترض أننا نريد تحويل بعض نظام اإلحداثيات الحقيقي مع حدود لليسار و اليمينو‬
‫أعلى و أسفل إلى إحداثيات البكسل التي تتراوح من ‪ 0‬في اليسار إلى ‪ 800‬في اليمين ومن ‪ 0‬في أعلى‬
‫‪ 600‬في األسفل ‪ .‬في هذه الحالة‪ ,‬يكون ‪ newLeft‬و ‪ newTop‬صفرا‪ ,‬وتصبح الصيغ ببساطة‬
‫‪newX = ((oldX - left) / (right - left)) * 800‬‬
‫‪newY = ((oldY - top) / (bottom - top)) * 600‬‬

‫بالطبع‪ ،‬هذا يعطي ‪ newX‬و ‪ newY‬كأرقام حقيقية‪ ،‬و يجب أن يتم تقريبها أو اقتطاعها إلى قيم‬
‫صحيحة إذا احتجنا إلى إحداثيات صحيحة للبيكسل‪ .‬كما أن التحويل العكسي الناتج من إحداثيات البكسل‬
‫ضا‪ .‬على سبيل المثال‪ ،‬إذا كانت الصورة معروضة على‬
‫إلى إحداثيات اعدد حقيقية غالبا سيكون مفيد أي ً‬
‫شاشة الكمبيوتر‪ ،‬وتريد التعامل معها بأستخدام الماوس‪ ،‬فمن المحتمل أن تحصل على إحداثيات الماوس‬
‫بحيث تكون إحداثيات بكسل صحيحة‪ ،‬ولكنك ستحتاج إلى تحويل إحداثيات البكسل هذه إلى نظام اإلحداثيات‬
‫المختار‪.‬‬
‫من الناحية العملية‪ ،‬لن تحتاج في العادة إلى إجراء التحويالت بنفسك‪ ،‬نظرا ألن معظم واجهات برمجة‬
‫تطبيقات الرسومات تقدم طريقة أعلى مستوى لتحديد التحويالت‪.‬‬
‫‪2.1.3Aspect Ratio‬‬
‫نسبة العرض إلى االرتفاع للمستطيل هي نسبة عرضه إلى ارتفاعه‪ .‬على سبيل المثال ‪ ,‬نسبة العرض‬
‫إلى االرتفاع ‪ 1 :2‬تعني أن المستطيل يبلغ عرضه ضعف طوله ‪ ,‬وأن نسبة العرض إلى االرتفاع ‪3 :4‬‬
‫تعني أن العرض يبلغ ‪ 3\4‬أضعاف االرتفاع‪.‬ان المربع يحتوي على نسبة عرض إلى ارتفاع تساوي ‪.1‬‬
‫والمستطيل مع نسبة العرض إلى االرتفاع ‪ 4\5‬و االرتفاع ‪ 600‬له عرض يساوي ‪ )4/5( * 600‬أو‬
‫‪.750‬‬

‫‪6‬‬
‫‪Two-Dimensional Graphics‬‬

‫يحتوي نظام اإلحداثيات أيضا على نسبة عرض إلى ارتفاع‪ .‬إذا كانت الحدود األفقية والرأسية لنظام‬
‫اإلحداثيات هي اليسار واليمين واألسفل واألعلى‪ ,‬كما هو موضح أعاله‪ ,‬فإن نسبة العرض إلى االرتفاع‬
‫هي القيمة المطلقة للمعادلة التالية‪:‬‬
‫)‪(right - left) / (top - bottom‬‬

‫إذا تم استخدام نظام اإلحداثيات على مستطيل له نفس نسبة العرض إلى االرتفاع‪ ,‬عند عرضه فأن‬
‫المستطيل‪ ,‬سيكون لدى وحدة واحدة في االتجاه األفقي نفس الطول الظاهري كوحدة في االتجاه العمودي‪.‬‬
‫إذا لم تتطابق نسب العرض إلى االرتفاع ‪ ,‬فسيكون هناك بعض التشويش‪ .‬على سبيل المثال‪ ,‬يجب أن‬
‫يكون الشكل المعرف بواسطة المعادلة ‪ x2 + y2 = 9‬عبارة عن دائرة‪ ,‬ولكن ذلك لن يكون صحيحا إال‬
‫إذا كانت نسبة العرض إلى االرتفاع (‪ )x ,Y‬تتطابق مع نسبة االرتفاع في منطقة الرسم‪.‬‬

‫ليس من السيئ دائ ًما استخدام وحدات طول مختلفة في االتجاهات الرأسية واألفقية‪ .‬ومع ذلك‪ ,‬لنفترض‬
‫أنك تريد استخدام إحداثيات ذات حدود لليسار أو اليمين أو األسفل أو األعلى‪ ,‬و أنك تريد الحفاظ على‬
‫نسبة العرض إلى االرتفاع‪ .‬في هذه الحالة‪ ,‬بنا ًء على شكل مستطيل العرض‪ ,‬قد تضطر إلى ضبط القيم‬
‫إما من اليمين أو اليسار أو من األسفل إلى األعلى لتتناسب مع نسب العرض إلى االرتفاع‪:‬‬
‫يفترض ان ننظر بشكل أعمق في التحويالت الهندسية‪.‬‬

‫‪7‬‬
‫‪Two-Dimensional Graphics‬‬

‫‪2.2‬‬ ‫‪Shapes‬‬
‫لقد كنا نتحدث عن مفاهيم الرسومات منخفضة المستوى مثل البيكسل واإلحداثيات‪ ,‬ولكن لحسن الحظ ال‬
‫يتعين علينا عادة العمل على أدنى المستويات‪ .‬تتيح لك معظم أنظمة الرسومات العمل بأشكال أعلى‬
‫مستوى‪ ,‬مثل المثلثات والدوائر‪ ,‬بدالً من وحدات البكسل الفردية‪ .‬ويتم الكثير من العمل الشاق باإلحداثيات‬
‫باستخدام التحويالت بدالً من العمل مع اإلحداثيات مباشرة‪.‬‬
‫‪2.2.1 Basic Shapes‬‬
‫في واجهة برمجة تطبيقات الرسومات‪ ,‬سيكون هناك أشكال أساسية معينة يمكن رسمها باستخدام أمر‬
‫واحد‪ ,‬بينما ستتطلب األشكال األكثر تعقيدا أوامر متعددة‪ .‬بالضبط ما يتأهل كشكل أساسي يختلف من‬
‫‪ API‬إلى آخر‪ .‬في واجهة برمجة تطبيقات جافا سكريبت لرسم لوحة ‪ ,HTML‬على سبيل المثال‪ ,‬األشكال‬
‫األساسية الوحيدة هي الخطوط والمستطيالت‪ .‬في غيرها‪ ,‬أعتبر الخطوط والمستطيالت واألشكال‬
‫البيضوية أساسية‪.‬‬
‫من خالل "الخط" ‪ ,‬نعني حقا مقطع السطر‪ ,‬وهو عبارة عن جزء مستقيم يربط نقطتين محددتين في‬
‫مستوى معين‪ .‬جزء بسيط من خط واحد بكسل‪ ,‬دون الحواف‪ ,‬هو الشكل األساسي‪ .‬يمكن رسمه بواسطة‬
‫تلوين البيكسالت الموجودة على طول الجزء الهندسي الرقيق غير المحدود‪ .‬يجب أن تحدد خوارزمية‬
‫لرسم الخط بدقة بحيث تحدد أي بيكسل ملونة او ال‪ .‬واحدة من أول خوارزميات رسوميات الكمبيوتر‪,‬‬
‫خوارزمية ‪ Bresenham‬لرسم خط المستقيم‪ ,‬و هي إجراء فعال جدا للقيام بذلك‪.‬‬
‫يمكن أن تحتوي األسطر على سمات أو خصائص أخرى تؤثر على مظهرها‪ .‬السؤال هنا‪ ,‬ما الذي‬
‫ينبغي أن يحدث في نهاية خط واسع؟ يمكن تحسين المظهر عن طريق إضافة "سقف" مدورة في نهايات‬
‫ضا‪ .‬سؤال آخر‪ ,‬عندما يلتقي خطان‬
‫الخط‪ .‬أي‪ ,‬توسيع الخط إلى نصف عرض الخط ‪ .‬و من المنطقي أي ً‬
‫‪8‬‬
‫‪Two-Dimensional Graphics‬‬

‫كجزء من شكل أكبر‪ ,‬كيف ينبغي ضم الخطوط؟ والعديد من أنظمة الرسومات تدعم الخطوط التي هي‬
‫أنماط من النقاط والنقط‪ .‬يوضح هذا الرسم التوضيحي بعض االحتماالت‪:‬‬

‫يحتوي الشكل المستطيل األساسي على جوانب رأسية وأفقية‪ .‬يمكن تحديد مستطيل من هذا القبيل بنقطتين‬
‫(‪ x1‬و ‪ )y1‬و (‪ x2‬و ‪ ,)y2‬والتي تعطي نقاط النهاية ألحد األقطار في المستطيل‪ .‬بدالً من ذلك‪ ,‬يمكن‬
‫إعطاء العرض واالرتفاع ‪ ,‬مع نقطة أساسية واحدة (‪ .)y, x‬في هذه الحالة‪ ,‬يجب أن يكون العرض‬
‫واالرتفاع موجبين‪ ,‬أو أن المستطيل فارغ‪ .‬النقطة األساسية (‪ )y ,x‬ستكون الزاوية العليا اليسرى للمستطيل‬
‫إذا زاد ‪ y‬من األعلى إلى األسفل ‪ ,‬وستكون الزاوية السفلية اليسرى للمستطيل إذا زاد ‪ y‬من األسفل إلى‬
‫األعلى‪.‬‬

‫افترض أنك تحصل على نقاط (‪ )y1 ,x1‬و (‪ , )y2 ,x2‬وأنك تريد رسم المستطيل الذي يحدده‪ .‬ولنفترض‬
‫أن أمر المستطيل للرسم الوحيد المتاح لديك هو الذي يتطلب نقطة (‪ )y, x‬و عرض و ارتفاع‪ .‬لذلك يجب‬
‫أن يكون ‪ x‬أصغر ‪ x1‬و ‪ ,x2‬ويمكن حساب العرض كقيمة مطلقة لـ ‪ x1‬ناقص ‪ .x2‬وبالمثل عن االرتفاع‪.‬‬

‫‪DrawRectangle from points(x1,y1)and(x2,y2):‬‬

‫) ‪x = min( x1, x2‬‬
‫) ‪y = min( y1, y2‬‬
‫) ‪width = abs( x1 - x2‬‬
‫) ‪height = abs( y1 - y2‬‬
‫) ‪DrawRectangle( x, y, width, height‬‬

‫هناك استخدام شائع في المستطيالت و هو السماح للزوايا الدائرية‪ .‬للحصول على "شكل شبه دائري" ‪,‬‬
‫حيث يتم استبدال الزوايا بأقواس‪ .‬يمكن تحديد درجة التقريب بإعطاء نصف القطر األفقي ونصف القطر‬
‫الرأسي للقطاع الناقص‪ .‬فيما يلي بعض األمثلة على الشكل الدائري‪.‬‬

‫‪9‬‬
‫‪Two-Dimensional Graphics‬‬

‫الشكل البيضاوي هو عبارة عن دائرة‪ .‬و الدائرة عبارة عن شكل بيضاوية يكون للقطرين فيها نفس‬
‫الطول‪.‬‬
‫إذا كانت األشكال البيضاوية غير متوفرة كأشكال أساسية‪ ,‬فيمكن تقريبها عن طريق رسم عدد كبير‬
‫من مقاطع الخطوط‪ .‬يعتمد عدد الخطوط المطلوبة لتقريب جيد على حجم الشكل البيضاوي‪ .‬من المفيد‬
‫معرفة كيفية القيام بذلك‪ .‬لنفترض أن الشكل البيضاوي يحتوي على نقطة مركز (‪ )y, x‬ونصف قطر‬
‫أفقي ‪ r1‬و نصف قطر رأسية ‪ .r2‬رياضيا يتم إعطاء النقاط على الشكل البيضاوي كالتي‪:‬‬
‫) )‪( x + r1*cos(angle), y + r2*sin(angle‬‬

‫حيث تأخذ الزاوية القيم من ‪ 0‬إلى ‪ 360‬إذا تم قياس الزوايا بالدرجات أو من ‪ 0‬إلى ‪ π2‬إذا كانت تقاس‬
‫بالقطار‪ .‬هنا ‪ sin‬و ‪ cos‬هي وظائف الجيب و جيب التمام القياسية‪ .‬للحصول على تقريب بيضاوي‪,‬‬
‫يمكننا استخدام هذه الصيغة لتوليد بعض النقاط ثم توصيل هذه النقاط بقطع خطية‪ .‬بافتراض ‪ pi‬تمثل‬
‫الثابت الرياضي ‪, π‬‬
‫‪Draw Oval with center (x,y), horizontal radius r1, and vertical‬‬
‫‪radius r2:‬‬
‫‪for i = 0 to numberOfLines:‬‬
‫)‪angle1 = i *(2*pi/numberOfLines‬‬
‫)‪angle2=(i+1)*(2*pi/numberOfLine‬‬
‫)‪a1 = x + r1*cos(angle1‬‬
‫)‪b1 = y + r2*sin(angle1‬‬
‫)‪a2 = x + r1*cos(angle2‬‬
‫)‪b2 = y + r2*sin(angle2‬‬
‫)‪Draw Line from (x1,y1) to (x2,y2‬‬

‫بالنسبة إلى الدائرة‪ ,‬بالطبع سيكون لديك ‪.r1 = r2‬‬

‫‪10‬‬