יצירת גרפיקה - GDI
Graphics מהטופס (CreateGraphics) ומשתמשים בו לציור.Pens.DrawRectangle, DrawEllipse.Brushes.Blue), Hatch עם מרקם לפי סוג, ו-LinearGradientBrush שמעבר בין שני צבעים לאורך קו בין שתי נקודות.DrawString מציג מחרוזת בגופן, במברשת ובמיקום נתונים. הדובר הדגים כתיבה במברשת מרקם.DrawImage מציג תמונה בתוך מלבן נתון.DrawLine מצייר קו בין שתי נקודות.CreateGraphics גם על כפתור או על PictureBox. הדובר הדגים שציור על כפתור נעלם כשהכפתור מצייר את עצמו מחדש.e.Graphics שמסופק לאירוע. בכל הצגה מחדש של הטופס הציור מתבצע מחדש. הדובר הדגים דגל בוליאני שמפעיל את הציור רק אחרי לחיצה, ו-Invalidate() כדי לרענן את הטופס.Save.פרקי ההרצאה: יצירת גרפיקה - GDI
תמלול ההרצאה: יצירת גרפיקה - GDI
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת גרפיקה - GDI» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לנושא שנקרא GDI. GDI זה קיצור של Graphics Device Interface. זה בעצם ממשק של מייקרוסופט שהוא מובנה בתוך ווינפורם לצורך הצגת גרפיקה על טפסים, על המדפסת, על רכיבים גרפיים וכולי.
למעשה, כאשר אנחנו ראינו את כל הנושא של הדפסות, אנחנו השתמשנו בזה בלי באמת לדעת שהשתמשנו בזה. אז בואו נראה איזה יכולות יש לממשק הזה.
כל מה שאנחנו רוצים לעשות כרגע זה לצייר כל מיני דברים על גבי הטופס. נשים פה מספר לחצנים ונבצע כל מיני ציורים בעזרת הנושא של ה-GDI, בעזרת הכלי GDI.
אוקיי, אז בואו ניקח לחצן ראשון ונבצע ציור של ריקטנגל, או בעצם בואו נצייר מספר דברים, דרו שייפס נגדיר שהלחצן הזה יהיה כתוב עליו דרו שייפס טאבל קליק ומה שאנחנו צריכים לעשות זה לבנות אובייקט שנקרא גרפיקס g לגשת לטופס ולקרוא לפונקציה שנקראת קריאייט גרפיקס הפונקציה הזאת מקבלת אובייקט גרפיקס מהטופס
ודרך האובייקט הזה אנחנו ניגשים לממשק של מייקרוסופט gdi ויכולים לצייר מה שאנחנו רוצים על גבי הטופס כי הפונקציה הזאת שייכת לטופס כמו שכתבנו דיס נקודה אם היינו קוראים ל btn draw shapes נקודה create graphics אז היינו מציירים על הלחצן אפשר לעשות דוגמה כזאת בהמשך ולראות שבאמת הציור היה על הלחצן כעת הציור יהיה
על הטופס ואנחנו רוצים לקרוא לפונקציות שמתחילות ב-draw דרואו, ריקטנגל, תצייר לנו ריקטנגל. יש לנו את האוסף פן, זאת אומרת שאנחנו יכולים ליצור פן בעצמנו.
ניו פן, נניח קולור גרין, בגודל 16, יצרנו איזושהי פן ואנחנו רוצים לצייר איזשהו מלבן במיקום 10, 20, 170. בואו נריץ ונראה שיש לנו פה מלבן די עבה, כי העובי של הפן היה 16, אולי כדאי להגדיל את זה ל-12.
צייר, מלבן קצת יותר דק. למעשה, אנחנו יכולים לצייר גם עם תבואה. יש לנו את האוסף פנס, ואנחנו יכולים לבחור איזושהי פן שמתארת צבע מסוים, וכל הפנים האלה הם בגודל סטנדרטי.
בואו נריץ ונראה שיש לנו פה את הציור, פן בגודל סטנדרטי, דק כזה. והיה draw rectangle. אם אנחנו משתמשים בפונקציה draw ellipse, בעצם אנחנו מקבלים את אותו הדבר אבל מה שאנחנו הולכים לצייר זה אליפסה.
מה שבעצם אמרנו זה נתנו פן ואיזשהו מלבן שעוטף את האליפסה. פונקציות נוספות שקיימות לנו זה פונקציות שמתחילות בפיל.
לדוגמה אם היינו אומרים פיל ריקטנגל כל מה שהיינו צריכים לעשות זה להחליף את הפן בבראש. בראש זה בעצם המברשת שמשלימה לפן. נועדה בשביל לצבוע כמות גדולה של אזור כאשר pain ורק קו בואו נריץ וקיבלנו פה איזשהו מלבן שהוא נריץ את זה שוב פעם קיבלנו פה מלבן מלא עכשיו שימו לב שברגע שהורדנו את הטופס והעלינו
אותו המלבן נמחק גם אם אנחנו עכשיו נלך ונסתיר חלק מהמלבן ונחזיר את הטופס אנחנו רואים שהוא נמחק אז בהמשך אנחנו נטפל בבעיה הזאת ונגרום לו לא להימחק אוקיי, בדיוק כמו שהיה לנו את אוסף הפאנס, יש לנו אוסף בראש, אז בואו ניקח לייט בלו, נריץ ויש לנו סוג קבוע של מברשות.
אנחנו ראינו שהדפסנו עם מברשת שנקראת סוליד קולור בראש, אבל יש עוד כל מיני סוגי מברשות. לדוגמה, אנחנו יכולים להשתמש במברשת שנקראת Hatch Brush.
match brush מכילה enum של כל מיני צורות וכמובן אנחנו יכולים לבחור איזשהו צבע. ככה אנחנו יכולים לראות בעצם מברשת שמציגה לנו מרקם מסוים. אנחנו יכולים לראות שיש פה מלא מלא מלא סוגים של מרקמים באוסף הזה.
בואו ניקח את זה, אין לי מושג מה זה, בואו ננסה. ונראה שיש לנו מרקם כזה. בגלל שבחרנו ירוק, אז המרקם הוא בצבע ירוק.
מברשת נוספת שיכולה להיות מאוד שימושית תהיה ליניאר גרדיאנט בראש. ליניאר גרדיאנט בראש מאפשרת לצבוע על ידי מברשת של שני צבעים מצבע א' לצבע ב'. קודם כל היא אומרת לנו תביאו לי נקודה התחלתית, בואו ניתן לה 10, 20, תביאו לי נקודה סופית, בואו ניתן לה פעם 110.90 שיתאים לממדים שנתנו למלבן כולו.
קולור ראשון וקולור שני. בואו נריץ ונראה שיש לנו גרדיאנט הדרגה מירוק לאדום בצורה כזאת. אנחנו יכולים לדוגמה להשתמש באפשרות הזאת לצבוע מלבן כך שיתאים על כל הטופס.
לדוגמה, נקודה אפס אפס, נקודה שנייה תהיה בדיוק בוויד ובהייט של הטופס, בואו הפעם נתחיל מגריי או בלאק אפילו ונתקדם עד וייט, נתחיל מהקצה העליון של הטופס, גודל וויד עד הייט והממדים של המלבן, כל הטופס עצמו, בואו נריץ, נראה מה קורה כשאנחנו לוחצים
על הלחצן ושימו לב שכל הטופס הופך להיות בעצם מעין גרדיאנט כזה יפה, ואנחנו יכולים להציב עליו כל מיני רכיבים גרפיים, קצת יותר אסתטי מאשר טופס משעמם כזה בצבע אחיד או בצבע אפור.
אם זה יותר מדי כהה, הבלאק, אפשר לעשות גריי, בואו נראה איך זה נראה, קצת יותר סולידי. אוקיי, אז אלה היו כל מיני מלבנים, והמשותף לכולם זה שזה היה מלבנים מלאים.
אנחנו יכולים לקחת גם את Fill Ellipse ולצייר אליפסות. בואו ניקח בדיוק את המקרה עם ה-hatch הזה. אותם מימדים, בואו נריץ.
ויש לנו כרגע אליפסה, מברשת Hatch Brush, איזשהו מרקם. בואו נעבור לצורות אחרות. יש לנו אפשרות ToDraw String, בדיוק כמו שהיה לנו בעולם ההדפסות.
בואו נדפיס מברשת מכורזת Hello All, נייצר איזשהו New Font, אריאל 24, Brushes, גם כאן אנחנו יכולים לקחת בראש אחרת, אפילו בואו ניקח את אותה Hatch Brush שהייתה לנו מקודם, בכדי לראות שזה הולך להיות מאוד מעניין, ומיקום, איפה אנחנו רוצים להציג את המכורזת.
בואו ניקח שזה מתחיל מ-100, 100 בצורה כזאת. נריץ, נלחץ ויש לנו Hello All שאנחנו רואים את המרקם כזה ביניהם. במרכיב את האותיות אם היינו לוקחים בוא נניח 34 היינו רואים גופן הרבה יותר גדול, היינו יכולים לראות קצת יותר טוב את המרקם.
או אם היינו לוקחים גופן בולד וכולי. אז זה היה בעצם Draw String, אנחנו יכולים לצייר על הטופס גם אחוזות. דרואו אימג' מאפשרת לנו לצייר תמונה. אז קודם כל אנחנו צריכים לתת איזשהו אובייקט אימג'.
יש לנו את הפונקציה אימג' נקודה פורום פייל שאנחנו יכולים לבחור איזושהי תמונה. הכנתי איזושהי תמונה בקונן סי, אז אני שואב אותה. והמערכת שואלת אותי איפה בדיוק אתה רוצה לצייר את התמונה הזאת.
אז בואו ניתן, ננסה לראות אם יש פה מיקום x וy, יש כאן, בואו נגיד שזה ב-100 200, הוא רוצה מאיתנו עוד with והייט, אוקיי בואו ניתן לו 300 על 500. נריץ, נראה את התמונה עצמה שציירנו במיקום הזה, בסדר, נקטין אותה טיפה, נגיד שאנחנו רוצים לצייר אותה ב-100, 100 וזה 200, 200. אז היא תצטייר בריבוע קבע.
אז יש לנו אפשרות לצייר גם תמונות. אז ככה אנחנו יכולים לגשת להרחיב גרפיקס ולהסתכל פשוט על כל מיני פונקציות שיש בו. יש לנו אפשרות לנקות את הצבע, כלומר לצבוע את הצבע רקע באיזשהו צבע אחיד.
color.white בעצם ינקה את הטופס שלנו. אם אנחנו נחלק את זה אולי לכפתור אחר אנחנו נוכל לראות שיש פה ניקוי. נגדיר את הכפתור הזה כ-BtnClear והקוד הזה נשתול פה.
נריץ, קודם כל נצייר את התמונה ולאחר מכן ננקה את הטופס, כולו הפך להיות לבן. אם אנחנו רוצים את צבע הרקע הקודם, אז אנחנו כמובן יכולים פה לתת את ה-BackColor הנוכחי של הטופס.
בואו נראה מה יקרה, Draw, Clear, ניקינו. יש כאן עוד המון פונקציות, אנחנו יכולים פשוט להסתכל, לעבור פונקציה-פונקציה ולחפש כל מיני פונקציות שמציירות.
יש לנו draw arc לדוגמה, מציירת לנו קשת, curve מציירת עיגול או יותר נכון קו עקום, אייקון דומה ל-image יכולה לצייר לנו אייקונים, יש לנו draw line שמסוגלת לצייר קו, קו אנחנו ראינו כשהדפסנו, בואו ניתן איזה pans, לייט ציין, פוינט ראשונה, 10, 20, 300, 200 והולך להיות לנו פה ציור של איזשהו קו ביחד עם התמונה.
הנה הקו שהגדרנו וככה אנחנו יכולים לבצע כל מיני ציורים על גבי הטופס ולהעשיר את ה-UI שלנו אם אנחנו רוצים להציג תמונות וכולי. הבעיה היא שאנחנו בעצם כשאנחנו מציירים וכל הציור מתבצע על גבי הטופס יוזר מזיז את הגרפיקה ומוחק לנו את הכל.
יש שתי שיטות לטפל בבעיה הזאת. שיטה ראשונה, לטופס יש אירוע שנקרא invalidate או ליתר דיוק paint ו-invalidate מרים את האירוע הזה.
אנחנו רואים פה אירוע paint. paint זה אירוע שמתרחש בכל פעם שהגרפיקה של הטופס מוצגת. גם אם הזזנו את הטופס ומשהו אחר מסתיר אותו ואז הטופס שוב פעם מוצג, אז הגרפיקה עצמה מוצגת עוד פעם והאירוע הזה שוב פעם מוצג.
זאת אומרת שאם אנחנו כותבים קוד באירוע, ושימו לב שב-E יש לנו את הגרפיקס, אז אנחנו לא צריכים את ה-Create Graphics. בואו נסתכל מה יקרה. E.Graphics.DrawImage, בטעות מחקתי את המילה הזאת.
נבצע קומפילציה, מריץ, ושימו לב שאוטומטית זה יצטייר לנו. אם אנחנו מסתירים את זה ומציגים את זה, כל פעם שאנחנו רואים את הגרפיקה האירוע מתבצע וצובע עוד פעם.
אם אנחנו רוצים לבצע את הציור רק בלחיצה על לחצן, כי שימו לב שאיך שהרצנו את הטופס זה כבר התבצע, אז כמובן שאנחנו יכולים להגדיר בלחצן איזשהו ערך בולעני.
בואו נמחוק פה את הכל, ניקח פה private boolean paint graphics false, כל מה שאנחנו צריכים לעשות זה בלחצן להחליף אותו ל-true, ובאירוע לבצע את השאלה אם not paint graphics אל תעשה כלום,