ציור על Canvas על ידי מגע
Painter שיורשת מ-View, עם constructor שמקבל Context ו-AttributeSet.Path שיחזיק את מה שהמשתמש צייר, ו-Paint שמוגדר כ-STROKE, עם עובי קו וצבע כחול.onDraw: הפונקציה מציירת עם canvas.drawPath(path, paint). בהתחלה ה-Path ריק.onTouchEvent ועושים switch על event.getAction(). ב-ACTION_DOWN קוראים ל-path.moveTo(event.getX(), event.getY()), כלומר שמים את העט בנקודה בלי לצייר, ומחזירים true. ב-ACTION_MOVE קוראים ל-path.lineTo עם אותם ערכים ומחזירים true. כל אירוע אחר מחזיר false.Painter עם match_parent לרוחב ולגובה, כדי שיתפוס את כל המסך.invalidate: onDraw נקראת אוטומטית פעם אחת כשהרכיב מצויר בתחילת הריצה, והוספת נקודות ל-Path לא גורמת לה לרוץ שוב. אי אפשר לקרוא לה ישירות, כי ה-Canvas הוא פנימי ל-View. לכן ב-ACTION_MOVE קוראים ל-invalidate(), שגורמת לרכיב לצייר את עצמו מחדש.פרקי ההרצאה: ציור על Canvas על ידי מגע
תמלול ההרצאה: ציור על Canvas על ידי מגע
הטקסט המלא של הדקות הראשונות בהרצאה «ציור על Canvas על ידי מגע» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שהכרנו את הקנבס וראינו איך אנחנו יכולים לצייר בעזרתו על המסך, ואחרי שבנושא קודם ראינו איך אנחנו יכולים להשתמש ב-Touch Events בכדי לזהות תזוזה של היוזר על המסך, בואו נשלב בין שני הדברים בשביל לגרום ליוזר לצייר על המסך על ידי Touch Events בעזרת רכיב הקנבס.
אז בואו נייצר לעצמנו רכיב דומה לרכיב שעשינו בסרטון הקודם ונקרא לו פשוט Painter. אנחנו רוצים to extend View, אבל הפעם ה-View שאנחנו רוצים לבנות יהיה View כזה שמאפשר ל-User לצייר על המסך ולראות בדיוק את מה שהוא מצייר.
אז בואו נגדיר לעצמנו כאן איזשהו public constructor כזה, painter, שמקבל context, כמו מקודם, ומקבל attribute set, כמו מקודם, ונעביר לסופר את ה-context ואת ה-attribute set, בצורה כזאת.
עכשיו, בשביל לצייר, אנחנו רוצים שיהיה לנו איזשהו רכיב path, שמאפשר לנו לבצע את הציור עצמו, בואו נייצר new path, ואנחנו רוצים object paint, בצורה כזאת, שיגדיר לנו את המברשת או את המכחול עצמו.
בואו נתחיל אותם, paint set style, ניתן paint style stroke, אנחנו רוצים לאפשר ליוזר בתור התחלה לצייר קווים, paint set stroke width, בואו ניתן לו SL, וpaint set color, ובואו נתחיל אותו עם נניח blue, רק בכדי לראות משהו שהיוזר מצייר על המסך בצבע כחול.
אוקיי, אז איך אנחנו בעצם מבצעים את הציור עצמו? אז בסרטון הקודם ראינו שקיימת פונקציה שנקראת onDraw, והפונקציה הזאת מאפשרת לצייר על Canvas שהיא מקבלת.
אם יש לנו Object Path שמכיל נתיב שהיוזר צייר, ויש לנו פן שמתארת איזשהו את לציור, אז אנחנו יכולים להשתמש בקנבס שאנחנו מקבלים, ולקרוא ל-Draw Path שראינו בסרטון הקודם, לתת לה את ה-path ולתת לה את ה-paint, ובצורה כזאת אנחנו יכולים פשוט לצייר את הנתיב הזה.
אבל אנחנו רואים שהנתיב בכלל ריק כרגע, אין בו שום דבר. איפה אנחנו בעצם ממלאים אותו בתוכן? אז אנחנו רוצים שהיוזר, תוך כדי הציור שלו על המסך, יקבע מה התוכן של אובייקט ה-path.
לכן אנחנו יכולים לרשת את On Touch Event, שלמדנו עליה בנושא ה-Touch Events, וראינו שלרכיבים ויזואליים יש פונקציה כזאת שאנחנו יכולים להשתמש בה בכדי לבצע ציור, ואנחנו רואים שאנחנו מקבלים כאן Object Event, שמתאר מה בעצם הפעולה שהיוזר עושה כרגע, האם הוא רק שם את האצבע או איזושהי עת אלקטרונית על המסך, האם הוא מזיז, האם הוא עוזב,
והאם הוא עושה כל מיני דברים שונים על המסך עצמו. אז מה אנחנו רוצים לעשות? אנחנו רוצים, ברגע שהיוזר שם את האצבע על המסך, זה יהיה action down.
אנחנו רוצים לגשת לפף וכאילו לשים בפף את האצבע של המשתמש. אז בואו נעשה פה איזשהו switch על event getAction ונבדוק האם אנחנו נמצאים ב-motionEvent.actionDown.
אם אנחנו נמצאים ב-actionDown, אנחנו רוצים לגשת ל-path ו-to-move-to, כי ה-yuzer שם את האצבע על המסך במיקום מסוים. לשם אנחנו רוצים לגשת מבלי לצייר דבר עד לנקודה הזאת.
זה יהיה event get x בכדי לקבל את מיקום ה-x של ה-user, event get y, שימו לב שאנחנו משתמשים פה בתשלובת של נתונים שלמדנו, בסרטון הקודם ראינו שאנחנו צריכים להשתמש ב-move2