שדרוג צייר שלנו על canvas
drawPath מקבלת Path אחד ו-Paint אחד. אם יש רק זוג אחד, אי אפשר לצייר קווים בצבעים ובעוביים שונים, ולכן צריך אוסף של זוגות כאלה.PaintedPath: מחזיקה Paint ו-Path. ה-constructor מקבל צבע ורוחב, ומגדיר את ה-Paint כ-STROKE עם הרוחב והצבע האלה. יש בה פונקציות moveTo ו-lineTo שמעבירות ל-Path, ופונקציה draw(Canvas) שקוראת ל-drawPath.Painter: במקום Path ו-Paint בודדים יש ArrayList של PaintedPath. כשהרכיב נוצר מתווסף אליו אובייקט ברירת מחדל, שחור ברוחב 5, כדי שהמשתמש יוכל לצייר מיד.addPaintedPath: פונקציה ציבורית שמקבלת צבע ורוחב ומוסיפה לסוף האוסף נתיב חדש. מכאן כל ציור חדש משתמש בנתיב האחרון.onDraw: רצה בלולאה על כל האוסף וקוראת ל-draw של כל PaintedPath.onTouchEvent: לוקחים את הנתיב האחרון (הגודל פחות 1) ל-currentPaintedPath, ובו מבצעים moveTo ב-ACTION_DOWN ו-lineTo ב-ACTION_MOVE, עם invalidate כמו קודם.Painter id ומוסיפים LinearLayout עם כפתורים קטנים. כפתורי צבע: אדום, ירוק, כחול ושחור, כל אחד בצבע הרקע שלו, והם מופנים לאותה פונקציה button color. כפתורי עובי: 5, 10, 15 ו-20, עם המספר כטקסט ורקע אפור, והם מופנים לפונקציה button width.getBackground() של הכפתור שנלחץ, מעבירים ל-ColorDrawable ומקבלים ממנו את הצבע. בפונקציית העובי לוקחים את הטקסט של הכפתור, getText().toString(), ומעבירים ל-float עם Float.parseFloat. בשתיהן קוראים ל-addPaintedPath עם הצבע והעובי הנוכחיים.פרקי ההרצאה: שדרוג צייר שלנו על canvas
תמלול ההרצאה: שדרוג צייר שלנו על canvas
הטקסט המלא של הדקות הראשונות בהרצאה «שדרוג צייר שלנו על canvas» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שהצלחנו לבנות אפליקציה שבעזרתה היוזר יכול לבצע ציור ממש פשוט על ידי גרירת האצבע על המסך ומה שהוא רואה זה סך הכל קווים כחולים איפה שהוא נוגע ואיפה שהוא מושך את האצבע.
אנחנו רוצים להפוך את התוכנית הזאת למשהו שהוא קצת יותר פרקטי למשתמש, ככה שהוא יכול גם לשנות את הצבע וגם לשנות את האובי קו. בוא נגיד שזה היכולות הנוספות שאנחנו רוצים לציור שלנו, לתוכנת ציור שלנו.
אז בואו נראה איך עושים את זה. יש לנו כאן את רכיב הפיינטר שבנינו ויש לו אובייקט Path שמכיל את כל הנקודות או הקווים ליתר דיוק של הציור עצמו ויש לנו Paint שמתארת את העט שבעזרתה אנחנו מציירים וה-Paint מכילה גם את הצבע וגם את העובי קו.
אנחנו רוצים לאפשר לצייר גם קווים שונים וגם צבעים שונים ואובי שונה לכל קו. לכן אנחנו לא יכולים שיהיה לנו פה איזשהו path אחד ויחיד עם paint אחד ויחיד, מפני שהפונקציה שמבצעת את הציור של הקו מקבלת path אחד ו-paint אחד, וזה בעצם ה-path שהיא מציירת, את הנתיב הזה בעת הזאת וזהו.
אנחנו רוצים לאפשר לצייר כל מיני קווים עם כל מיני צבעים וכל מיני אוויים OV-Cav. לכן אנחנו צריכים שיהיו לנו גם הרבה אובייקטים של Path שכל אחד מתאר ציור על ידי עט אחרת שהעט מכילה OV-Cav ספציפי שהיוזר בוחר עם צבע ספציפי.
לכן מה שאנחנו רוצים לעשות זה לא להגדיר כאן באזור גלובלי איזשהו אובייקט path אחד ואובייקט paint אחד, אלא לאפשר להגדיר הרבה אובייקטים של path שמתאימים להרבה אובייקטים של paint.
לצורך כך אנחנו יכולים לבנות מחלקה שמתארת path וpaint ולהגדיר כאן, באזור הגלובלי, איזשהו קולקשן שיכול להגדיר הרבה אובייקטים כאלה שכל אובייקט כזה יחזיק בתוכו את הנתיב ואת ה-paint שלו.
אז בואו נעשה בדיוק את זה, בואו נוסיף איזושהי מחלקה חדשה והמחלקה הזאת נקרא לה PaintedPath שזה גם Path וגם Paint בתוכו, נגדיר איזשהו ObjectPrivatePaint נגדיר אותו כ-NewPaint ונגדיר private path שווה new path, איזשהו קונסטרקטור painted path שמקבל את
הצבע הדרוש ואת הרוחב הדרוש, ואז מה שהוא רוצה לעשות זה לגשת לpaint וto, קודם כל set style אנחנו רוצים קווים אז זה יהיה paint.style.stroke שזה היה בעצם הקו, לאחר מכן אנחנו רוצים to set stroke width וזה ה-width שקיבלנו ו-to-paint.set-color וזה ה-color שקיבלנו.
אז אפשר ליצור אובייקט מסוג Painted Path שפשוט מתאר קו אחד שמתאר את המיקום של הקו או את הנתיבים של הקו ואת הצבע והעובי של הקו, שזה בעצם אובייקט ה-Path כאן, סליחה, ה-Paint פה בתוכו.
ברגע שיוצרים קונסטרקטור קובעים אוקיי איזה צבע אני רוצה שהנתיב הזה יהיה עם איזה גובה סליחה רוחב של קו הנתיב הזה יהיה וזהו אם אנחנו רוצים נתיב עם צבע אחר או עם רוחב אחר אנחנו כבר צריכים להגדיר painted path אחר לגמרי אבל אם אנחנו מגדירים איזשהו paint שמכיל את הcolor והwidth הזה אנחנו יכולים שהוא יהיה בעל כל path שהוא, כלומר להוסיף נקודות בצורה חופשית עבור הקו הזה.
אז בואו נבנה פה עוד פונקציות שמאפשרות להגדיר את ה-path to move to, יש לנו בעצם float x ו-float y, בואו ניגש ל-path ונגיד שאנחנו רוצים to move to מיקום מסוים, נניח x ו-y ואנחנו רוצים לאפשר line2 ל-x ול-y ואז ניגש ל-path ונאפשר לזוז לקו הזה line2 x ו-y ובסופו של דבר אנחנו
גם רוצים לאפשר ל-canvas לצייר את כל הסיפור הזה. אז פונקציה אחרונה תהיה draw שתקבל canvas ופשוט תקרא לכ-canvas-row-path ותצייר את ה-path עם הפיינט שהוגדרו עבור האובייקט הספציפי הזה. הנה כבר יש לנו כאן מחלקה שמאפשרת לצייר
נתיב עם עט ספציפית שכוללת בתוכה צבע ורוחב. אם אנחנו רוצים נתיב אחר שמכיל צבע ורוחב אחר זה כבר אובייקט חדש. Good. אחרי שסיימנו עם ההגדרה של האובייקט הזה, של המחלקה הזאת, בואו נשתמש איתה באובייקט שבנינו, במחלקה שבנינו בפיינטר.
אז אנחנו לא רוצים כבר להגדיר כאן את שני החבריה האלה, בואו ניפטר מהם, אלא יש לנו כאן אריי ליסט של פיינטד פאת' שבנינו, בואו נקרא לו פיינטד פאת' כ-collection, new array list והנה יש לנו עכשיו collection שלם.
כל זה אנחנו לא רוצים לבצע בקונסטרקטור כי אין לנו את הפיינט. מה שאנחנו רוצים לעשות זה קודם כל איך שבונים אובייקט מהפיינטר שפשוט שמים אותו על המסך על הלייאוט כבר אנחנו רוצים שהיוזר יוכל להתחיל לצייר בלי שהוא לוחץ על איזשהו לחצן ראשוני בשביל לצייר. איך שהאפליקציה עולה הוא כבר יכול
להתחיל לצייר עם איזשהו צבע דיפולטי ואובי דיפולטי. אז מה שאנחנו רוצים לעשות זה כבר להוסיף אובייקט חדש לקולקשן שלנו בשביל שיהיה אפשר להתחיל לצייר עליו.
אז בואו ניגש ל-painted paths ופשוט נוסיף אליו אובייקט paintedpath חדש ויש לו איזשהו color defaulty בואו ניקח black עם איזשהו רוחב defaulty בואו ניקח 5 וזה בעצם כבר נותן לנו צבע ורוחב ראשוני ונתיב ראשוני שאנחנו כבר יכולים להתחיל להשתמש איתו ולצייר איתו.
עכשיו אנחנו רוצים שהמשתמש יוכל לשנות את הנתיבים האלה או את הצבעים ואת האובעים של הקו, את העובי קו, איך הוא עושה את זה.
אנחנו יכולים לאפשר מהרכיב הזה הוספה של Painted Path חדש. בואו ניקח Public Void Add Painted Path, ניתן לו צבע חדש, ניתן לו רוחב חדש, ניקח את אותה השורה של מקודם, נדביק ונשתמש בצבע וברוחב שקיבלנו לפונקציה. זאת אומרת שאם אנחנו בתור מתכנתים מוסיפים עוד נתיב,
זה בעצם הנתיב החדש שאנחנו רוצים להתחיל לצייר איתו. אוקיי, מה הדבר הבא שאנחנו רוצים לעשות? יש לנו את כל ה-collection הזה שמחזיק לנו מלא מלא מלא מלא נתיבים שכל נתיב מכיל גם color וגם רוחב.
כאשר onDraw מתבצעת אנחנו פשוט רוצים לצייר הכל. בגלל שזה collection בואו נרוץ עם forEachPaintedPathKey בתוך ה-collection שלנו נקרא PaintedPaths