שינוי קטן יחסית ב-Touch API ב-Chrome הגיע
את Chrome 39,
נוספה גרסת עבודה של המאפיין webkitRotationAngle
אובייקט TouchEvent. ב-Chrome 45 (גרסת בטא ביולי 2015) אין קידומת rotationAngle,
להתאים את ההטמעה שלנו ל-
TouchEvent
מפרטים ו-Firefox.
למרות שהוא קיים כבר זמן מה, כדאי להסביר
rotationAngle מאפשר שימוש מעניין יותר במגע
במיוחד במכשירים ניידים.
מבחינה טכנית, זווית הסיבוב היא מספר המעלות (בין 0 ל-90)
אליפסה של אזור המגע מוגדרת לפי
Touch.radiusX
וגם
Touch.radiusY.
אממ, מגניב, נכון? (יש לציין שגיליתי רק ש-Chrome פועל
מערכת Android לא נועלת את הערכים radiusX ו-radiusY ל-64 פיקסלים, אלא ל-64 פיקסלים
משתנה בהתאם לגודל איש הקשר שמופיע במסך).
מה זה אומר בפועל?
חשוב על כך בתור דרך לייצג במדויק את הגודל, הצורה והכיוון של
את האצבע של המשתמש על המסך. המשתמשים לא תמיד מקישים על המסך עם שבשבת
של קצה האצבע, אלא ללחוץ לעיתים קרובות על המסך כמו שהם נותנים
למשטרה טביעת אצבע. בלי rotationAngle הייתם מקבלים פשוט
הרוחב והגובה של תנועת המגע. עם rotationAngle,
לקבל 90 מעלות סיבוב (0 בכיוון אנכי ו-90 בכיוון אופקי). למה רק
90 מעלות? צריך רק 90 מעלות, כי כשעוברים את הזוויות האלה
radiusX ו-radiusY ישתנו בהתאם.
עוד דבר מגניב בנושא הזה הוא שאזור המגע באצבע של המשתמש משתנה
כי הם משנים את דרגות הלחץ של האצבע על המסך. זה לא
החלפה ישירה של force, אבל ניתן להבחין בין מברשות קלות
על המסך, כי שטח הפנים שלהם קטן יותר מאשר לחיצה חזקה יותר.
איך משתמשים בהם?
קודם כל צריך מכשיר שיכול לזהות את המצב הזה. Nexus 10 יעבוד כמו שצריך. א' לדוגמה, אפשר לבחון ישירות דוגמה לציור של ריק באיירס. לא צריך להיות גדול יותר אבל זוהי דרך להשתמש בתמונה בלי קנבס.
var touchHandler = function(e) {
e.preventDefault();
var touches = e.changedTouches;
var touch = touches[0]; // only concerned about first touch.
var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
var force = touch.force || touch.webkitForce || 0;
// Use the rotationAngle to rotate the 'p' element.
p.style.width = radiusX * 2 + 'px';
p.style.height = radiusY * 2 + 'px';
p.style.transform = "rotate(" + rotationAngle + "deg)";
};
document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;
איפה תשתמשו בזה בפועל?
יש כמה מקומות ברורים שבהם הדבר יכול להועיל באופן מיידי user:
- לדוגמה, אפליקציות אינטרנט לציור ולמניפולציה של תמונות יכולות להשתמש כדי לשנות את הקו או האפקטים שהוחלו על אזור העריכה. אפשר להשתמש ברדיוס המגע כדי לשנות את גודל המברשת, ואפשר לשלב זווית מסתובבת לשינוי זווית המגע של המברשת על בד הקנבס.
- זיהוי תנועה משופר: אם אתם מבינים את הרוטציה הזו, תוכלו יוצרים תנועה באצבע אחת כדי לגרום לאובייקט להסתובב.
האם כל מכשיר תומך באפשרות הזו?
לא. המצב הזה עדיין לא נפוץ מאוד. אם יש לכם Nexus 10 תראו משהו כזה,
קרדיט לתמונה ל-Rick Byers.
כשמכשיר לא מסוגל להבין את זווית הסיבוב של מגע,
הערך של rotationAngle יהיה 0 והערכים של radiusX ו-radiusY יהיו
שווה (אבל עשוי להשתנות בהתאם לאזור משטח המגע הנוכחי).
למה לטפח?
שאלה טובה. כמו הרבה פיצ'רים באינטרנט, זו חוויה נוספת שאפשר להוסיף.
אירועי מגע יפעלו כאשר הם נתמכים, ואם ערכי הרדיוסים והסיבובים
תוכלו לשפר את האפליקציה כדי לספק למשתמש יכולות
חוויה אישית. לא לכל משתמש יש טאבלט Wacom, אבל הוא מציג הרבה ציורים
ינצלו אותו.
מה לגבי אירועי מצביע?
זה רק כדי לוודא שיש לנו אירוע מגע מלא עם הפרטים API למפתחים שמסתמכים עליו. אפשר לראות איך התחמקתי קצת מהשאלה... סמל האפשרויות הנוספות אבל ברצינות, אם אתם מעוניינים לעקוב אחר PointerEvent של Blink. אפשר לסמן בכוכב את גיליון 471824 לקרוא את ריק באיירס מסמך מעקב.