การเปลี่ยนแปลงเล็กน้อยใน Touch API ใน Chrome มีผลใน Chrome 39 ซึ่งเปิดตัวแอตทริบิวต์ 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 โดยตรง แต่ก็ยังมีวิธีใช้โดยไม่ต้องใช้ 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;
คุณจะใช้สิ่งนี้ในทางปฏิบัติที่ใด
มีบางตำแหน่งที่ชัดเจนซึ่งจะเป็นประโยชน์ต่อผู้ใช้ในทันที ดังนี้
- ตัวอย่างเช่น เว็บแอปสำหรับการวาดภาพและการปรับแต่งรูปภาพสามารถใช้ข้อมูลนี้เพื่อปรับเปลี่ยนเส้นหรือเอฟเฟกต์ที่ใช้กับ Canvas คุณสามารถใช้รัศมีการสัมผัสเพื่อปรับขนาดของแปรง และสามารถรวม rotationAngle เพื่อปรับมุมสัมผัสของแปรงบนผืนผ้าใบได้
- การจดจำท่าทางสัมผัสที่ปรับปรุงแล้ว: หากคุณเข้าใจ rotationAngle คุณจะสร้างท่าทางสัมผัสแบบนิ้วเดียวเพื่อหมุนวัตถุได้
อุปกรณ์ทุกเครื่องรองรับฟีเจอร์นี้ไหม
ไม่ ยังไม่เป็นที่แพร่หลายมากนัก หากคุณใช้ Nexus 10 คุณจะเห็น ข้อความลักษณะต่อไปนี้
เครดิตรูปภาพเป็นของ Rick Byers
เมื่ออุปกรณ์ไม่เข้าใจมุมการหมุนของการแตะ rotationAngle จะเป็น 0 และค่า radiusX และ radiusY จะเท่ากัน (แต่อาจแตกต่างกันไปตามพื้นที่ผิวสัมผัสปัจจุบัน)
ถ้าสงสัยว่าทำไมถึงคุ้มค่าที่จะทำ
เป็นคำถามที่ดี ฟีเจอร์นี้เป็นประสบการณ์การใช้งานเพิ่มเติมเช่นเดียวกับฟีเจอร์อื่นๆ บนเว็บ
การโต้ตอบแบบสัมผัสจะทำงานเมื่อรองรับ และหากมีค่ารัศมีและการหมุน คุณสามารถปรับปรุงแอปพลิเคชันเพื่อมอบประสบการณ์การใช้งานที่มีประสิทธิภาพมากขึ้นให้แก่ผู้ใช้ได้ ผู้ใช้บางรายอาจไม่มีแท็บเล็ต Wacom แต่เมื่อมีแท็บเล็ตดังกล่าว แอปพลิเคชันวาดภาพจำนวนมากจะใช้ประโยชน์จากแท็บเล็ตนี้
แล้ว Pointer Events ล่ะ
นี่เป็นเพียงการตรวจสอบว่าเรามี API การโต้ตอบแบบสัมผัสที่สมบูรณ์สำหรับนักพัฒนาแอปที่ต้องใช้ API นี้ เห็นไหมว่าฉันเลี่ยงคำถามนิดหน่อย... หากคุณสนใจติดตามการติดตั้งใช้งาน PointerEvent ของ Blink คุณสามารถติดดาวปัญหา 471824 และอ่านเอกสารการติดตามของ Rick Byers