אובייקט Canvas באנדרואיד
onDraw שמקבלת אובייקט Canvas, בד הציור. מה שמצוירים עליו נראה ברכיב שמכיל את הפונקציה. כאן הרכיב פשוט מצייר את עצמו, ובהרצאה הבאה נותנים גם למשתמש לצייר.CanvasView שיורשת מ-View. ה-constructor מקבל Context ו-AttributeSet ומעביר אותם ל-super.onDraw: מוחקים את הקריאה ל-super, כי הרכיב מצייר הכול בעצמו.drawCircle מקבלת מרכז (cx ו-cy), רדיוס ואובייקט Paint. ה-Paint הוא המברשת. מגדירים לו סגנון STROKE (קו מסביב לצורה) או FILL, עובי קו וצבע, כאן ירוק עם עובי 10. הערכים בהדגמה: 150, 100 ורדיוס 50.CanvasView עם שם ה-package המלא, ו-match_parent.Canvas: drawCircle, drawRectangle, drawLine, drawPath, drawText ו-drawImage.drawRect מקבלת left, top, right ו-bottom, כלומר המרחקים של צידי המלבן מהצד השמאלי ומהצד העליון של המסך, ו-Paint עם FILL וצבע כחול. בהדגמה 250, 200, 450 ועוד ערך תחתון.drawLine מקבלת נקודת התחלה ונקודת סיום ו-Paint עם STROKE, עובי 5 וצבע אדום.Path מתאר סדרת נקודות. moveTo רק מתחיל מנקודה בלי לצייר, ו-lineTo מושך קו אליה. בהדגמה מ-(150,200) ל-(200,300) ואז ל-(100,300), וסוגרים עם close למשולש. מציירים עם drawPath ושולחים את ה-Path וה-Paint.Paint עם צבע cyan וגודל טקסט 50, ו-drawText עם המחרוזת Welcome ומיקום x ו-y.Bitmap עם BitmapFactory.decodeResource מתוך משאב drawable של סמיילי, ומציירים עם drawBitmap בנקודה נתונה ועם Paint.פרקי ההרצאה: אובייקט Canvas באנדרואיד
תמלול ההרצאה: אובייקט Canvas באנדרואיד
הטקסט המלא של הדקות הראשונות בהרצאה «אובייקט Canvas באנדרואיד» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לנושא הגרפיקה, כלומר איך אנחנו יכולים לצייר על המסך. לציור הזה זה יכול להיות צורות סטטיות רגילות שאנחנו יכולים להציב, וזה יכול להיות לאפשר ליוזר לצייר בעצמו.
לכל רכיב שאנחנו יכולים להשתמש בו או להציב אותו על אקטיביטי קיימת פונקציה בשם onDraw שמקבלת אובייקט מטיפוס שנקרא Canvas. Canvas זה בד ציור שמשמש ציירים. אובייקט הקנבאס מכיל כל מיני פונקציות שמאפשרות לצייר על עצמו.
אם אנחנו מציירים על אובייקט הקנבאס, אז רואים את הציור הזה על הרכיב הוויזואלי שמכיל את הפונקציה onDraw, ואז כמובן היוזר רואה את הציורים. בסרטון הזה אנחנו הולכים לראות איך לעבוד עם אובייקט הקנבאס, ומהם היכולות שלו בעצם.
בסרטונים הבאים נראה איך אנחנו יכולים לאפשר גם למשתמש לבצע ציור על המסך, כמובן על ידי שימוש באובייקט הקנבאס. אז מה שאנחנו רוצים לעשות זה לבנות רכיב ויזואלי חדש שפשוט מצייר על עצמו כמה דברים.
זה יכול להתבצע על ידי מחלקה חדשה שאנחנו בונים שיורשת איזשהו רכיב ויזואלי קיים או שיורשת את הרכיב הבסיסי של כל הרכיבים הוויזואליים, כלומר את ה-view, וזה בדיוק מה שאנחנו הולכים לעשות.
אנחנו הולכים ליצור מחלקה חדשה לגמרי שיורשת את view ולכן גם המחלקה מה שאנחנו בונים היא view וניתן להציב אותה על אקטיביטי. אז בואו נעשה את זה, פה נצרף מחלקה חדשה, יש לנו פה new Java class ונקרא לה סתם canvas view.
אנחנו רוצים to extend view ואנחנו רוצים constructor canvas view ובגלל שאנחנו רכיב ויזואלי שהולך להיות מוצב על אקטיביטי, אם אתם זוכרים אנחנו צריכים לקבל קונטקסט ואנחנו צריכים לקבל אטריביוט סט שזה בעצם האטריביוט שמוגדרים בלייאוט עבור הרכיב שאנחנו בונים כרגע כשאנחנו מציבים אותו על הלייאוט אנחנו צריכים להעביר לסופר את הקונטקסט ואת
האטריביוט סט ומכאן כל מה שאנחנו בונים זה הרכיב החדש שלנו אז אנחנו רוצים לדרוס את הפונקציה onDraw שדיברנו עליה ושימו לב שהיא מקבלת הנה דרסנו אותה.
ניפטר רגע מהסופר הזה, אנחנו לא צריכים אותו כי אנחנו מציירים הכל בעצמנו. ובתוך הפונקציה אנחנו פשוט מבצעים את הציור על ידי שימוש באובייקט הקנבאס שקיבלנו. אז בואו נראה את זה.
יש לנו כאן קנבאס נקודה ואנחנו רואים שיש פה כל מיני פונקציות שמאפשרות לצייר. לדוגמה draw circle. בואו נצייר משהו פשוט בתור התחלה, פשוט מאוד עיגול אנחנו רואים שאנחנו מקבלים x cx זה אומר ה-center של ה-x cy center y שזה בעצם המרחק מציר x והמרחק מציר y מההתחלה וזה בעצם המרחק מהנקודה השמאלית העליונה לאחר מכן רדיוס בואו
רגע נראה מה עוד הפונקציה רוצה מאיתנו ואחרי הרדיוס אנחנו צריכים להעביר אובייקט pain ויש כל מיני אובייקטים שתומכים בגרפיקה ומאפשרים לצייר.
לדוגמה, Paint מתאר פשוט מברשת. אז בואו נראה איך אנחנו יכולים לעשות את זה. נבנה איזשהו אובייקט Paint שווה New Paint. הנה יש לנו פה אובייקט חדש. נגדיר Set Style.
Set Style זה Paint.Style. ויש לנו פה לדוגמה פיל אם אנחנו רוצים שזה יהיה מברשת מלאה, סטרוק אם אנחנו רוצים שזה יהיה קו שעוטף את הצורה בואו נבחר סטרוק יש לנו פיינט נקודה סט סטרוק וויד מה האורך של הקו בואו ניתן לו 10 בתור התחלה ובואו ניקח את סט קולור וניתן לו קולור גרין הנה יש לנו כאן כבר צבע ירוק ואנחנו כבר יכולים לבוא לדרו סרקל ולהגדיר
שבוא נניח הx שלנו זה 150 מהקצה השמאלי של המסך, ה-Y שלנו זה 100 מהחלק העליון של המסך, הרדיוס זה 50, והנה הפיינט שלנו, וכבר כאן אנחנו יכולים לראות את העיגול הזה על המסך.
אז קודם כל אנחנו רוצים לקחת את האובייקט החדש שבנינו ולהציב אותו על ה-Layout. אם אנחנו מסתכלים על ה-Layout אז אין בו כלום. איך אנחנו מציבים אותו? פשוט רושמים כאן ויוס שזה האובייקט, ואנחנו רואים פה את כל ה-package שמתחיל אותו, ובואו ניקח match parent וכבר עכשיו אנחנו יכולים לבצע בדיקה.
אז בואו נריץ, והנה אנחנו רואים שהתוכנית רצה על המכשיר האמיתי, והנה היא רצה על האמולטור ואנחנו ממש רואים את הציור שציירנו.
הרכיב תופס את כל השטח ואנחנו רואים את העיגול שציירנו על גבי ה-canvas. שימו לב שהממדים הם שונים, השתמשנו במספרים Fixed כאלה, Hard Coded, וכמובן אם היינו רוצים שהדבר הזה ייראה אותו הדבר בכל המכשירים, אז היינו צריכים לבצע כאן חישוב של ה-DPI או ה-Density של המכשיר, ולפי זה לקבוע את הממדים שאנחנו רוצים.
אבל לצורך הבנה של איך לעבוד עם ה-Canvas, אנחנו רוצים לשמור על פשטות כרגע בדוגמה, ולכן פשוט נכתוב כאן מספרים hardcoded בקוד, כך שיהיה מאוד מאוד סימפל להבין את זה. אז בואו נראה עוד כל מיני יכולות שקיימות ברכיב ה-canvas.
אז לצורך כך, מה שנעשה זה לבצע הפרדה בין הציורים השונים על ידי בניית פונקציות שמציירות כל פעם משהו אחר. הפונקציה הראשונה הצעירה היא גול, אז בואו נקרא לה draw circle, ומקבלת את אובייקט ה-canvas ומבצעת את הציור כפי שעשינו כאן.
נעתיק את כל הקוד הזה לפה ופשוט נקרא מכאן לפונקציה drawCircle ונשלח לה את אובייקט ה-canvas. הפונקציה הבאה שאנחנו רוצים לעשות, בואו פשוט נעתיק כל הפונקציה הזאת, נדביק ונקרא לה בשם drawRickTangle והיא בעצם תצייר לנו מלבן.
נשלח לה את אובייקט הקנבאס, מה אנחנו רוצים לשנות בה? אנחנו רוצים אובייקט פיינט כמובן, שמאפשר להגדיר את האט לציור. בואו ניקח עכשיו סטייל אחר, בואו ניקח פיל, יש לנו פה נקודה פסיק רק שצריך להגדיר.
אין לנו סטרוק ווי בגלל שאנחנו לא סטרוק, אז בואו נוריד את זה ונגדיר כאן צבע אחר לדוגמה בלו וניתן לו מימדים אחרים. אנחנו גם כמובן רוצים להפעיל את דרו-ריקטנגל שזה דרו-רקט וניתן לה כזה דבר.
אנחנו רואים שקודם כל אנחנו צריכים לתת left ובואו ניתן כאן 250 שיהיה בממדים אחרים שלא יעלה לנו על העיגול היפה שציירנו מקודם.
הדבר הבא זה top זה יהיה נניח 200. לאחר מכן right, כלומר המרחק מצד ימין של המסך, זה יהיה 450 והמרחק מהחלק התחתון של המסך זה יהיה בוטום.
למעשה זה היה טעות שלי, זה לא המרחק מצד ימין או שמאל של המסך, זה בעצם הצד השמאלי של המסך, אם אנחנו מסתכלים אנחנו רואים שזה לפט, זה בוודאות צד שמאל, זה בוודאות מרחק מהחלק העליון של המסך, הטופ.
רייט זה הצד הימני של המלבן, המרחק שלו מהצד השמאלי של המסך ויש לנו פה את הבוטום שזה החלק התחתון של המלבן מה המרחק שלו מהחלק העליון של