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