1. התוכנית הגראפית הראשונה
C# בקלי קלות
פרק 4
התוכנית הגראפית הראשונה

2. התוכנית הגראפית הראשונה
נושאי לימוד:
מבנה החלון
אזור הלקוח
מערכת הקואורדינאטות
הגדרת אובייקט גראפי והצגתו

3. התוכנית הגראפית הראשונה
מבנה החלון
התוכנית הגראפית הראשונה
החלון הוא האובייקט הגראפי החשוב ביותר בתוכניות שנכתוב.
החלון משמש כמסגרת של התוכנית, כל הפקודות שנכתוב יבוצעו בחלון.
החלון יצייר את האובייקטים הגראפיים (עיגול, משולש, מלבן, טקסט).
החלון מיוצג בתוכנית על ידי המחלקה MyForm

4. התוכנית הגראפית הראשונה
מבנה החלון
התוכנית הגראפית הראשונה
אזור הלקוח (Client Area) הוא החלק בחלון החשוב ביותר מבחינתנו, כל הפעולות שנבצע והפקודות שנפעיל יבוצעו באזור הלקוח,
כל האובייקטים שנגדיר יצוירו באזור הלקוח.

5. התוכנית הגראפית הראשונה
מבנה החלון
התוכנית הגראפית הראשונה
גראפיקה ממוחשבת מצוירת באזור הלקוח.
אזור הלקוח הוא החלק המרכזי והחשוב ביותר בחלון מבחינתנו.
לאזור הלקוח יש כמה תכונות חשובות שחשוב להכירם.
אזור הלקוח
אובייקטים גראפיים

6. התוכנית הגראפית הראשונה
מבנה החלון
התוכנית הגראפית הראשונה
מידותיו של אזור הלקוח
לעיתים נצטרך לדעת מהם מידותיו של אזור הלקוח, במקרים אלו נעזר בשתי תכונות: התכונה ClientWidth מספקת את רוחבו של אזור הלקוח, התכונה ClientHeight מספקת את גובהו של אזור הלקוח.
ClientHeight
ClientWidth

7. ClientMeasurements

8. התוכנית הגראפית הראשונה
מבנה החלון
התוכנית הגראפית הראשונה
צביעת אזור הלקוח
מתוכניות מחשב בכלל וממשחקים בפרט נדרשת אטרקטיביות.
אטרקטיביות מושגת באמצעות צבע, צליל, תנועה.
שתי התכונות הבאות "משדרגות" את החזות של התוכנית באמצעות "צביעת" אזור הלקוח.
צבע רקע - ניתן להגדיר צבע רקע באמצעות התכונה BackColor אשר מקבלת את אחד מהערכים של "קופסת צבעים" הוירטואלית שלנו- Color.
תמונת רקע - כתחליף לצבע רקע ניתן להגדיר תמונת רקע באמצעות התכונה BackgroungImage אשר מקבלת את אחד מערכיו של הטיפוס ClientImage המציע לשימוש 100 תמונות רקע.

9. BackColorSample
ClientImageSample

10. התוכנית הגראפית הראשונה
מבנה החלון
התוכנית הגראפית הראשונה
מערכת הקואורדינאטות
כדי לצייר אובייקט גראפי באזור הלקוח יש צורך להגדיר מספר תכונות חשובות, ביניהן מיקומו.
מיקומו של האובייקט באזור הלקוח נקבע על פי מערכת הקואורדינאטות של אזור הלקוח.
במערכת הקואורדינאטות אזור הלקוח ישנם שני צירים:
ציר X - הציר האופקי ציר Y - הציר האנכי.

11. התוכנית הגראפית הראשונה
מבנה החלון
התוכנית הגראפית הראשונה
כאשר X=0 ו- Y=0 המיקום הוא הנקודה השמאלית העליונה של אזור הלקוח.
המיקום : X=0 ו- Y=0
ככל ש-X גדול יותר מיקום האובייקט הוא ימינה יותר, ככל ש- Y גדול יותר האובייקט ממוקם למטה יותר.

12. התוכנית הגראפית הראשונה
מבנה החלון
התוכנית הגראפית הראשונה
דוגמה:

13. הגדרת אובייקט גראפי והצגתו
התוכנית הגראפית הראשונה
באזור הלקוח ניתן להציג ולשלוט באובייקטים גראפיים שונים.
תהליך הצגת האובייקט הגראפי מורכב משלושה שלבים:
הקצאה
עיצוב
הצגה

14. הגדרת אובייקט גראפי והצגתו
התוכנית הגראפית הראשונה
שלב ראשון - הקצאה אובייקט גראפי , בדומה למשתנה, חייב להיות מוגדר בתוכנית. בדומה להגדרת משתנה רגיל (int, float, string) מגדירים את סוג (הטיפוס) האובייקט הגראפי ומעניקים לאובייקט שם ייחודי.

15. הגדרת אובייקט גראפי והצגתו
התוכנית הגראפית הראשונה
שלב שני - עיצוב לאובייקטים הגראפיים ישנם מספר תכונות גראפיות חשובות, ניתן לחלקם לשלוש קבוצות, הראשונה מגדירה מיקום, השנייה מגדירה גודל והשלישית מגדירה את הצבע:
מיקום
גודל X
מיקום האובייקט הגראפי על ציר ה-X. Y
מיקום האובייקט הגראפי על ציר ה-Y.
Width
רוחב האובייקט.
Height
גובה האובייקט.

16. הגדרת אובייקט גראפי והצגתו
התוכנית הגראפית הראשונה
שלב שני – עיצוב - המשך

17. הגדרת אובייקט גראפי והצגתו
התוכנית הגראפית הראשונה
שלב שני – עיצוב - המשך
צבע - שני מושגים חדשים: מברשת (Brush) ועט (Pen) המברשת משמשת למילוי האובייקט הגראפי בצבע, העט משמש לשרטוט הגבולות של האובייקט הגראפי.
BrushColor
צבע המילוי.
PenColor
צבע המסגרת.

18. הגדרת אובייקט גראפי והצגתו
התוכנית הגראפית הראשונה
שלב שלישי – הצגה
העברת האובייקט הגראפי לאזור הלקוח. על מנת שאזור הלקוח יוכל לצייר את האובייקט הגראפי הוא צריך להכיר אותו, העברת האובייקט הגראפי מתבצעת באמצעות המתודה AddEllipse( . . .) , המתודה מקבלת את האובייקט שיצרנו.

19. FirstGraphicObject