Transcript بسم هللا الرحمن الرحيم L10,CSE 101: 2014-2015 © Zag. Univ. Dr.Basheer M.

‫بسم هللا الرحمن الرحيم‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫في المحاضرة السابقة‬
‫‪‬التعامل مع الرسومات و الصور‪:‬‬
‫‪ ‬المتحكمات البيانية‪ :‬الخطوط واألشكال‪Line & Shape controls .‬‬
‫‪ ‬متحكمات الصور و الرسومات‪Image & PictureBox controls .‬‬
‫‪ ‬استخدام صندوق قائمة الملفات ‪File-List box‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫المحاضرة العاشره‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫المحاضرة العاشره‬
‫‪‬‬
‫صناديق التعامل مع الرسومات و الصور‪:‬‬
‫‪ o‬طرق الرسم ‪:Graphics methods‬‬
‫‪ o‬الخطوط‪ ,‬الدوائر‪ ,‬طبع النصوص‪,‬توقيع نقطة‪...,‬‬
‫‪ o‬نسخ الصور و األشكال مع امكانية تكبير جزء من صورة‪.‬‬
‫‪‬‬
‫الملخص ‪.‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫طرق الرسم ‪:Graphics methods‬‬
‫‪ ‬أهم الطرق النتاج رسومات في الـ ‪:VB‬‬
‫وظيفتها‬
‫رسم خط أو صندوق (مستطيل‪ ,‬مربع‪)..,‬‬
‫رسم دائرة أو شكل بيضاوى‬
‫وضع أو توقيع نقطة على كيان ما‬
‫ارجاع لون نقطة معينة‬
‫نسخ صورة من كيان على كيان أخر‬
‫اضافة أو كتابة نص على كيان‬
‫مسح منطقة الخرج على كيان ما‬
‫‪Method‬‬
‫‪Line‬‬
‫‪Circle‬‬
‫‪PSet‬‬
‫‪Point‬‬
‫‪PaintPicture‬‬
‫‪Print‬‬
‫‪Cls‬‬
‫‪ ‬أهم الكيانات التي يمكن الرسم‪/‬الكتابة عليها‪ :‬النموذج‪ ,‬صندوق الرسومات‬
‫‪ +‬كيان الطابعة ‪.Printer‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫طرق الرسم ‪:Graphics methods‬‬
‫‪ ‬مالحظة هامة جدا‪:‬‬
‫‪ ‬عند الرسم على كيان ما فإن شكل ولون الرسم الناتج يتحدد بناء على بعض خصائص‬
‫الكيان الذي نرسم عليه‪ .‬وأهم هذه الخصائص هى‪:‬‬
‫التاثير‬
‫اللون المستخدم لملء شكل‬
‫سمك الخط‬
‫نمط أو طريقة ملئ شكل (خطوط مائلة‪ ,‬متقطعة‪)...,‬‬
‫لون الخط الخارجى للرسم‬
‫الخاصية‬
‫‪FillColor‬‬
‫‪Draw Width‬‬
‫‪FillStyle‬‬
‫‪ForeColor‬‬
‫‪ ‬كالعادة اذا لم يتم ذكر الكيان الذي نرسم عليه فان النموذج هو الكيان الحالي للرسم‪.‬‬
‫‪ ‬هناك خاصيتين مرتبطين بالرسم هما ‪ CurrentX‬و ‪ CurrentY‬و دائما تشيران‬
‫ألخر نقطة تم رسمها علي الكيان صاحبهما‪.‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫‪ ‬طريقة الخطوط ‪:Line‬‬
‫]‪Object.Line (x1,y1) - (x2,y2) [,Par1, Par2‬‬
‫‪ ‬حيث أنه يلزم كتابة احداثيات نقطة البداية ‪ x1,y1‬و كذلك نقطة النهاية ‪.x2,y2‬‬
‫‪ ‬المعامل ‪ Par1‬اختياري و لكن يمكن تحديد لون الرسم فيه ‪vbRed, vbBlue,‬‬
‫‪.vbGreen‬‬
‫‪ ‬المعامل ‪ Par2‬اختياري أيضا ويمكن أن نكتب فيه ‪ B‬وبالتالى يتم رسم صندوق‪ ,‬أو‬
‫‪ BF‬ليتم ملء الصندوق المرسوم باللون المحدد في خاصية ‪ ForeColor‬للكيان‬
‫‪.Object‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫‪ ‬طريقة الخطوط ‪:Line‬‬
‫]‪Object.Line (x1,y1) - (x2,y2) [,Par1, Par2‬‬
‫‪‬يمكن تغيير خاصيتي ‪ FillColor , ForeColor‬ألي كيان في وضع التشغيل‬
‫و عليه يمكن تحديد اللون المطلوب مثل …‪.vbRed, vbBlue, vbGreen,‬‬
‫‪ ‬اذا لم يتم تحديد نقطة البداية فانها تكون ‪ Current position‬أي نقطة‬
‫النهاية ألخر خط أو شكل تم رسمه‪ .‬وتشير اليه خاصيتي‬
‫‪ CurrentX‬و ‪.CurrentY‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
:Line ‫طريقة الخطوط‬
‫مثلث متساوي الساقين‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫طريقة الخطوط ‪:Line‬‬
‫رسم مربع علي متحكم صندوق رسومات‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫طريقة الخطوط ‪:Line‬‬
‫‪ ‬من المعلوم ان وحدة قياس األبعاد الغيابية هي ال ‪ Twip‬وبالتالي جميع األبعاد المستخدمة‬
‫في انتاج رسومات في األمثلة السابقة تكون بال ‪ Twip‬ولكن يمكن تغيير وحدة القياس من‬
‫خالل خاصية ‪ScaleMode‬‬
‫‪ ‬يمكن أيضا تغيير هذه الخاصية للكيان‬
‫فى وضع التشغيل و لكن في هذه الحالة‬
‫سوف نستخدم القيم العددية‪.‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫طريقة الخطوط ‪:Line‬‬
‫مربع طول ضلعه ‪ 2‬سم على متحكم صندوق رسومات‬
‫مستطيل أبعاده ‪ 1.5 x 1‬بوصة علما بأن وحدة القياس‬
‫للنموذج مضبوط على ‪ Inch‬في وضع التصميم‪.‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫طريقة الخطوط ‪:Line‬‬
‫‪ ‬مثال ‪ :1‬رسم مثلث متساوي األضالع و طول ضلعه ‪ 5‬سم‪.‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫‪‬مثال ‪:2‬‬
‫وضح كيف يمكن رسم شكل سداسي منتظم في منتصف النموذج‬
‫تماما بحيث يكون طول ضلعه ‪ 1000‬تويب و ذلك في وضع التشغيل‬
‫علما بان ابعاد النموذج هي ‪Height = 3000, Width = 4000‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫حل مثال ‪:2‬‬
‫‪ ‬يمكن رسم شكل سداسي بأكثر من طريقة وأحد أسهل هذه الطرق هو اعتبار‬
‫أن الشكل السداسي يمكن أن يقسم الى مثلثات متساوية األضالع‪:‬‬
‫‪X2,Y2‬‬
‫‪X3,Y3‬‬
‫‪X1,Y1‬‬
‫‪X6,Y6‬‬
‫‪XC,YC‬‬
‫‪X4,Y4‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪X5,Y5‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
:2 ‫حل مثال‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫الدوائر ‪:Circles‬‬
‫]‪Object.Circle (x,y), radius [,color, start, end‬‬
‫‪ (x,y) ‬تمثل احداثيات مركز الدائرة‪.‬‬
‫‪ radius ‬تمثل نصف القطر‪.‬‬
‫‪ color ‬هي معامل (قيمة) اختيارية و تمثل لون الخط المرسوم به الدائرة‪.‬‬
‫‪( :start & end ‬معامالت اختيارية) يمثالن زوايا قطرية ) ‪(-2*pi : 2*pi‬‬
‫لبداية و نهاية جزء أو قطاع ‪ Sector‬من الدائرة‪ ,‬و اذا كان قيمة أي منهما سالبة‬
‫فانه يتم رسم خط من مركز الدائرة الي محيطها‪.‬‬
‫‪ ‬الحظ أن خصائص الكيان المرسوم عليه الدائرة تؤثر على شكلها مثل ‪,‬‬
‫‪.FillStyle FillColor‬‬
‫‪ ‬عند رسم دائرة فان خاصيتي ‪ CurrentX‬و ‪ CurrentY‬دائما تشير الي‬
‫مركز الدائرة‪.‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
:Circles ‫الدوائر‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫الدوائر ‪:Circles‬‬
‫الحظ أنه اليمكن كتابة قيمة زاوية البداية أو النهاية لقطاع‬
‫من الدائرة ب ‪ 2*pi‬أو ‪-2*pi‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
:Circles ‫الدوائر‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫‪‬مثال ‪:3‬‬
‫وضح كيف يمكن رسم مثلث متساوي األضالع على النموذج بقاعدة أفقية تمتد‬
‫بين )‪ (2000,3000‬و (‪ )1000,3000‬و يراد رسم دائرة داخل المثلث‬
‫مقسمة الي أربع أجزاء ملونة باألحمر و األخضر و األزرق واألصفر‪.‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
:3 ‫حل مثال‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫طريقة توقيع نقطة ‪:PSet‬‬
‫)‪Object.PSet(x,y‬‬
‫‪ ‬يتم رسم النقطة علي الكيان ‪ Object‬عند االحداثيات ‪.x,y‬‬
‫‪ ‬لون النقطة يتحدد من خاصية ‪ ForeColor‬للكيان‪.‬‬
‫‪ ‬حجم النقطة يتحدد من خاصية ‪ DrawWidth‬للكيان و تبدأ من قيمة ‪.1‬‬
‫‪ ‬يمكن استخدام هذه الطريقة في رسم الدوال الهندسية‪.‬‬
‫‪ ‬يمكن توقيع نقاط بطريقة عشوائية باستخدام الدالة ‪.Rnd‬‬
‫‪ ‬طريقة ‪ :Print‬الضافة نص عند نقطة الرسم الحالية ‪ CurrentX‬و ‪CurrentY‬‬
‫”‪Object.Print “text‬‬
‫للكيان ‪Object‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫‪‬مثال ‪:4‬‬
‫وضح كيف يمكن رسم الدالة ‪ y = x^2‬على النموذج‬
‫حيث أن ‪ 0 ≤ x ≤ 1‬و ‪ x‬تتغير كل ‪.0.1‬‬
‫ارسم أيضا المحور األفقي و الرأسي‪ .‬واستخدام مقياس رسم‬
‫مناسب لالتجاه األفقي و الرأسي‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫حل مثال ‪:4‬‬
‫تم استخدام مقياس رسم لالتجاه األفقي حيث انه‬
‫كل ‪ 1000‬تويب تقابل وحدة قياس لل ‪ .x‬وكذلك‬
‫كل ‪ 2000‬تويب تقابل وحدة قياس لل ‪.y‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
:4 ‫حل مثال‬
Line – (x,y) ‫ ب‬Pset(x,y) ‫اذا تم استبدال‬
‫فان الرسم يكون متصل‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫‪‬‬
‫طريقة توقيع نقطة ‪:PSet‬‬
‫‪‬الدالة ‪ Rnd‬تقوم بتوليد قيمة عشوائية بين ‪ 0‬و ‪ 1‬ولكن يمكنها توليد قيمة عشوائية بين‬
‫‪ 0‬و قيمة أخري ‪ MaxValue‬كالتالي‪:‬‬
‫‪x = Int(MaxValue)*Rnd‬‬
‫توقيع ‪100‬نقطه عشوائية علي النموذج‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
‫‪‬مثال ‪:5‬‬
‫وضح كيف يمكن رسم دائرة باللون األخضر في مركز النموذج بنصف قطر‬
‫‪ 750‬وعند نقر نقطة بالفأرة على النموذج يتم تحديد اذا ماكانت هذه النقطة‬
‫تقع داخل الدائرة أو ال و اخراج احداثياتها علي صندوق رسائل‪.‬‬
‫‪ ‬البد من استخدام طريقة )‪ Point(x,y‬التى ترجع لون النقطة ذات االحداثيات‬
‫‪.x , y‬‬
‫‪ ‬كذلك الحدث الذي سيمكنا من تحديد مكان النقر بالفأرة على النموذج هو‬
‫حدث‬
‫) (‪Form_MouseDown‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
:‫ الكود‬:5 ‫حل مثال‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
:‫ وضع التنفيذ‬:5 ‫حل مثال‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫‪ ‬طريقة مسح الشاسة ‪:Cls‬‬
‫‪ ‬تقوم ‪ Cls‬بمسح جميع الرسومات الموجودة على النموذج أو صندوق الرسومات‪.‬‬
‫‪ ‬طريقة نسخ الصور و األشكال ‪:PaintPicture‬‬
‫‪Dst.PaintPicture Src.Picture Xd, Yd, Wd, Hd, Xs, Ys, Ws, Hs‬‬
‫الكيان الذي يتم نسخ الصورة عليه‬
‫الكيان الذي ننسخ الصورة منه‬
‫اذا لم يتم ذكرهم فانه يتم‬
‫نسخ الصورة كاملة‬
‫احداثي بداية نسخ الصورة على ‪Dst‬‬
‫عرض وارتفاع جزء الصورة على ‪Dst‬‬
‫احداثي بداية نسخ الصورة من ‪Src‬‬
‫عرض وارتفاع جزء الصورة المطلوب من ‪Src‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
:PaintPicture ‫ طريقة نسخ الصور و األشكال‬
:‫ مثال‬
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
‫‪Exercises:‬‬
‫‪‬‬
‫‪ .1‬وضح كيف يمكن رسم األشكال التالية‪:‬‬
‫‪ ‬مثلث متساوى األضالع داخل دائرة‪.‬‬
‫‪ ‬مربع داخل دائرة‪.‬‬
‫‪ ‬شكل سداسى منتظم داخل مربع‪.‬‬
‫‪ .2‬وضح كيف يمكن رسم الدالة التالية مع رسم محور أفقي و رأسي‪:‬‬
‫‪x * 0.1* exp(x),if 0  x  2,‬‬
‫‪‬‬
‫‪y  2, if 2  x  4,‬‬
‫‪6 - x, 4  x  6.‬‬
‫‪‬‬
‫علما بأن السنتيميتر هو وحدة القياس المطلوبة و اعتبر أن ‪ x‬تتغير كل ‪0.1‬‬
‫في جميع الفترات‪.‬‬
‫‪Dr.Basheer M. Nasef‬‬
‫‪L10,CSE 101: 2014-2015 © Zag. Univ.‬‬
 Solution #2:
x * 0.1* exp(x),if 0  x  2,

y  2, if 2  x  4,
6 - x, 4  x  6.

Run
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
Code #2:
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef
L10,CSE 101: 2014-2015 © Zag. Univ.
Dr.Basheer M. Nasef