หน้านี้ได้รับการแปลโดย Cloud Translation API

การใช้การหมุนAngle และ TouchRadius

Paul Kinlan

การเปลี่ยนแปลงเล็กๆ น้อยๆ ของ Touch API ใน Chrome เกิดขึ้นใน Chrome 39 ซึ่งเปิดตัวแอตทริบิวต์ webkitRotationAngle เวอร์ชันที่ใช้งานได้ในออบเจ็กต์ TouchEvent ใน Chrome 45 (เบต้าในเดือนกรกฎาคม 2015) จะไม่มีคำนำหน้าเป็น rotationAngle ซึ่งทำให้การใช้งานของเราสอดคล้องกับข้อกำหนด TouchEvent และ Firefox มากขึ้น

แม้ว่า rotationAngle จะใช้มาสักพักแล้ว แต่เราขออธิบายความหมายของ rotationAngle สักหน่อย เนื่องจากเปิดโอกาสให้ใช้ท่าทางสัมผัสที่น่าสนใจมากขึ้น โดยเฉพาะในอุปกรณ์เคลื่อนที่

ในทางเทคนิค มุมการหมุนคือจำนวนองศา (ระหว่าง 0 ถึง 90) ของรูปไข่ของพื้นที่สัมผัสที่กําหนดโดย Touch.radiusX และ Touch.radiusY เยี่ยมไปเลย (โปรดทราบว่าเราพบว่า Chrome ใน Android ไม่ได้ล็อกค่า radiusX และ radiusY เป็น 64 พิกเซล แต่ปรับค่าให้แตกต่างกันไปตามขนาดการสัมผัสของหน้าจอ)

ข้อความนี้หมายความว่าอย่างไร

คุณสามารถมองข้อมูลนี้ว่าเป็นวิธีแสดงขนาด รูปร่าง และการวางแนวของนิ้วของผู้ใช้บนหน้าจออย่างถูกต้อง ผู้ใช้ไม่ได้แตะหน้าจอด้วยปลายนิ้วเสมอไป แต่มักจะกดหน้าจอเหมือนกำลังให้ลายนิ้วมือแก่ตำรวจ หากไม่มี rotationAngle คุณจะเห็นแค่ความกว้างและความสูงของท่าทางสัมผัส เมื่อใช้ rotationAngle คุณจะได้รับการหมุน 90 องศา (0 คือแนวตั้งและ 90 คือแนวนอน) Why only 90 degrees? คุณต้องใช้เฉพาะ 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;

คุณจะใช้กรณีนี้เมื่อใด

ตำแหน่งที่เห็นได้ชัดซึ่งฟีเจอร์นี้จะเป็นประโยชน์ต่อผู้ใช้ทันทีมีดังนี้

ตัวอย่างเช่น เว็บแอปการวาดภาพและการดัดแปลงรูปภาพอาจใช้ข้อมูลนี้เพื่อเปลี่ยนเส้นหรือเอฟเฟกต์ที่ใช้กับผืนผ้าใบ คุณสามารถใช้รัศมีการสัมผัสเพื่อเปลี่ยนขนาดของแปรง และรวมเข้ากับ rotationAngle เพื่อเปลี่ยนมุมการสัมผัสของแปรงบนผืนผ้าใบได้
การจดจำท่าทางสัมผัสที่ปรับปรุงแล้ว: หากเข้าใจ rotationAngle คุณจะสร้างท่าทางสัมผัสด้วยนิ้วเดียวเพื่อหมุนวัตถุได้

อุปกรณ์ทุกเครื่องรองรับฟีเจอร์นี้ไหม

ไม่ ยังไม่พบปัญหานี้มากนัก หากใช้ Nexus 10 คุณจะเห็นข้อมูลดังต่อไปนี้

เครดิตรูปภาพเป็นของ Rick Byers

เมื่ออุปกรณ์ไม่เข้าใจมุมการหมุนของการสัมผัส rotationAngle จะเท่ากับ 0 และค่า radiusX และ radiusY จะเท่ากัน (แต่อาจแตกต่างกันไปตามพื้นที่ผิวสัมผัสปัจจุบัน)

เหตุผลที่ควรทำ

เป็นคำถามที่ดี ฟีเจอร์นี้เป็นเพียงประสบการณ์การใช้งานเพิ่มเติมเช่นเดียวกับฟีเจอร์อื่นๆ บนเว็บ
เหตุการณ์การสัมผัสจะทำงานเมื่อระบบรองรับ และหากค่ารัศมีและการหมุนพร้อมใช้งาน คุณสามารถปรับปรุงแอปพลิเคชันเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่มีประสิทธิภาพมากขึ้น ผู้ใช้บางรายอาจไม่มีแท็บเล็ต Wacom แต่หากมี แอปพลิเคชันการวาดภาพจำนวนมากก็จะใช้ประโยชน์จากแท็บเล็ตนี้ได้

แล้วเหตุการณ์เคอร์เซอร์ล่ะ

การดำเนินการนี้เป็นเพียงการทำให้มั่นใจว่าเรามี API เหตุการณ์การสัมผัสที่สมบูรณ์สำหรับนักพัฒนาแอปที่ต้องใช้ เห็นว่าฉันหลบคำถามไปหน่อยไหม แต่หากต้องการติดตามการใช้งาน PointerEvent ของ Blink ให้ติดดาวปัญหา 471824 และอ่านเอกสารการติดตามของ Rick Byers