ב-Chrome 39 בוצע שינוי קטן יחסית ב-Touch API, שכלל גרסה פעילה של המאפיין webkitRotationAngle באובייקט TouchEvent. עכשיו ב-Chrome 45 (גרסת בטא ביולי 2015), הוא לא כולל קידומת בתור rotationAngle,
כך שההטמעה שלנו תואמת יותר למפרט
TouchEvent
ול-Firefox.
למרות שהיא קיימת כבר זמן מה, כדאי להסביר מהי rotationAngle, כי היא מאפשרת שימוש מעניין יותר בתנועות מגע, במיוחד במכשירים ניידים.
מבחינה טכנית, זווית הסיבוב היא מספר המעלות (בין 0 ל-90) של האליפסה של אזור המגע שמוגדרת על ידי Touch.radiusX ו-Touch.radiusY.
מגניב, נכון? (חשוב לציין שגיליתי ש-Chrome ב-Android לא נועל את הערכים של radiusX ו-radiusY על 64px, אלא משנה אותם בהתאם לגודל המגע של המסך).
מה זה אומר בפועל?
אפשר לחשוב על זה כדרך לייצג במדויק את הגודל, הצורה והכיוון של האצבע של המשתמש על המסך. המשתמשים לא תמיד מקישים על המסך עם קצה האצבע, אלא לעיתים קרובות לוחצים על המסך כמו שנותנים טביעת אצבע במשטרה. בלי rotationAngle, פשוט הייתם מקבלים את הרוחב והגובה של תנועת המגע. ב-rotationAngle, אפשר לסובב את המסך ב-90 מעלות (0 הוא מצב אנכי ו-90 הוא מצב אופקי). למה רק 90 מעלות? צריך רק את 90 המעלות כי כשעוברים את הזוויות האלה, radiusX ו-radiusY ישתנו בהתאם.
עוד דבר מגניב הוא שאזור המגע של האצבע של המשתמש משתנה בהתאם למידת הלחץ שהאצבע מפעילה על המסך. היא לא מחליפה באופן ישיר את force, אבל אפשר להבחין בין נגיעות קלות במסך כי שטח הפנים שלהן קטן יותר מאשר לחיצה חזקה יותר.
איך אפשר להשתמש בו?
קודם כל, צריך מכשיר שיכול לזהות את זה. מכשיר Nexus 10 יעבוד מצוין. דוגמה מצוינת לכך היא הדוגמה של ריק ביירס (Rick Byers) ל-paint. אבל כדי לא להישאר מאחור, הנה דרך להשתמש בו בלי canvas.
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;
איפה אפשר להשתמש בזה בפועל?
יש כמה מקומות ברורים שבהם זה יועיל למשתמש באופן מיידי:
- לדוגמה, אפליקציות אינטרנט לציור ולעריכת תמונות יכולות להשתמש במידע הזה כדי לשנות את משיכת המכחול או את האפקטים שמוחלים על הקנבס. אפשר להשתמש ברדיוס המגע כדי לשנות את גודל המברשת, ולשלב את rotationAngle כדי לשנות את זווית המגע של המברשת בקנבס.
- זיהוי תנועות משופר: אם אתם מבינים את rotationAngle, אתם יכולים ליצור תנועה עם אצבע אחת כדי לסובב אובייקט.
האם כל מכשיר תומך בזה?
לא, זה עדיין לא נפוץ מאוד. אם יש לכם מכשיר Nexus 10, תראו משהו כזה:
קרדיט לתמונה: Rick Byers.
אם המכשיר לא יכול להבין את זווית הסיבוב של המגע, הערך של rotationAngle יהיה 0 והערכים של radiusX ו-radiusY יהיו שווים (אבל עשויים להשתנות בהתאם לשטח הפנים הנוכחי של המגע).
למה זה חשוב?
שאלה טובה. כמו הרבה תכונות באינטרנט, זו חוויה מצטברת.
אירועי מגע יפעלו כשהם נתמכים, ואם ערכי הרדיוס והסיבוב זמינים, אתם יכולים לשפר את האפליקציה כדי לספק למשתמש חוויה טובה יותר. לא לכל משתמש יש לוח גרפי של Wacom, אבל כשיש, הרבה אפליקציות ציור משתמשות בו.
מה לגבי אירועי מצביע?
המטרה היא לוודא שיש לנו API מפותח של אירועי מגע בשביל המפתחים שמסתמכים עליו. ראית איך התחמקתי קצת מהשאלה? אבל ברצינות, אם אתם רוצים לעקוב אחרי ההטמעה של PointerEvent ב-Blink, אתם יכולים לסמן בכוכב את בעיה 471824 ולקרוא את מסמך המעקב של ריק ביירס.