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