שינוי קטן יחסית ב-Touch API ב-Chrome נוסף ב-גרסה 39 של Chrome, והוא כולל גרסה עובדת של המאפיין 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 לצביעה. עם זאת, יש דרך להשתמש בו גם בלי קנבס.
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;
איפה אפשר להשתמש בזה בפועל?
יש כמה מקומות ברורים שבהם הדבר יביא למשתמש תועלת מיידית:
- לדוגמה, אפליקציות אינטרנט לציור ולעיבוד תמונות יכולות להשתמש במידע הזה כדי לשנות את הקו או את האפקטים שחלים על הקנבס. אפשר להשתמש ב-touchRadius כדי לשנות את גודל המברשת, ואפשר לשלב את rotationAngle כדי לשנות את זווית המגע של המברשת על הלוח.
- זיהוי תנועות משופר: אם מבינים את הפרמטר rotationAngle, אפשר ליצור תנועה של אצבע אחת כדי לסובב אובייקט.
האם כל המכשירים תומכים בכך?
לא. עדיין לא מדובר בשימוש נפוץ. אם יש לכם מכשיר Nexus 10, תוצג הודעה דומה לזו:
קרדיט לתמונה: Rick Byers.
כשמכשיר לא יכול להבין את זווית הסיבוב של מגע, הערך של rotationAngle יהיה 0 והערכים של radiusX ו-radiusY יהיו שווים (אבל עשויים להשתנות בהתאם לשטח הנוכחי של משטח המגע).
למה כדאי לעשות את זה?
שאלה טובה. כמו תכונות רבות באינטרנט, זוהי חוויה משלימה.
אירועי מגע יפעלו אם יש תמיכה בהם, ואם ערכי הרדיוס והרוטציה זמינים, תוכלו לשפר את האפליקציה כדי לספק למשתמש חוויה משופרת. לא לכל משתמש יש טאבלט של Wacom, אבל אם יש לכם טאבלט כזה, תוכלו להשתמש בו באפליקציות רבות לציור.
מה לגבי אירועי Pointer?
המטרה היא לוודא שיש לנו ממשק API מלא לאירועי מגע למפתחים שמסתמכים עליו. ראיתם איך ניסיתי לעקוף את השאלה? אם אתם רוצים לעקוב אחרי ההטמעה של PointerEvent ב-Blink, תוכלו לסמן את בעיה 471824 ולקרוא את המסמך למעקב של Rick Byers.