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