การแตะอย่างแม่นยำเพื่อท่าทางสัมผัสที่แม่นยำ

เกิดการเปลี่ยนแปลงจากการใช้งาน TouchEvents ของ Chrome นับตั้งแต่ M37 (คงที่ใน 08/2014) ซึ่งเปลี่ยนค่าพิกัดที่รายงานเป็นเลขทศนิยมแทนจำนวนเต็ม

ก่อน หลัง
ไคลเอ็นต์X: 167
clientY: 196
หน้า X:   167
หน้า Y:   196
รัศมีX: 26
รัศมีY: 26
screenX: 167
ScreenY: 277
clientX: 167.33299255371094
clientY: 195.66700744628906
pageX: 167.33299255371094
pageY: 195.6670074462836:252836:252836:252836:252836:252836:252836: 195.636:252836:252836:252836:252836:252836:252836:252836:



การเปลี่ยนแปลงนี้หมายความว่าคุณจะตอบสนองต่อท่าทางสัมผัสของผู้ใช้ได้อย่างราบรื่นขึ้นเนื่องจากช่วยให้ตำแหน่งนิ้วมีความแม่นยำมากขึ้น

เมื่อใช้การสาธิตของริค ไบเออร์ คุณจะได้เห็น ความแตกต่างที่ยิ่งใหญ่เมื่อวาดวงกลมช้าๆ

ความแตกต่างของกิจกรรมการแตะ

เพราะจะส่งผลต่อหน้าจอที่มีความหนาแน่นของพิกเซลมากกว่า 1 เท่านั้น มาดูตัวอย่างเพื่อทำความเข้าใจกัน

ลองนึกภาพคุณมีตารางกริดขนาด 3x3 ที่มีพิกเซล CSS และความหนาแน่นของหน้าจอเท่ากับ 3 หมายความว่าเรามีพิกเซลจริงขนาด 9x9 และท่าทางสัมผัสของผู้ใช้จากด้านบนซ้ายไปขวาล่าง

CSS Pixel และตารางพิกเซลหน้าจอ

เริ่มแรกเราปัดตำแหน่งการแตะให้พิกเซล CSS ที่ใกล้ที่สุด ซึ่งหมายความว่าคุณจะได้ทำตามขั้นตอนต่อไปนี้ในท่าทางสัมผัสนี้

ความแม่นยำของพิกเซล CSS ระหว่างท่าทางสัมผัส

เราพลาดการวาดขั้นตอนระดับกลางที่พิกเซลจริงอาจแสดงเมื่อผู้ใช้เลื่อนนิ้ว

ตอนนี้เราเปลี่ยนเป็นโหมดลอยแล้ว ท่าทางสัมผัสของเราจะมีลักษณะดังนี้

ความแม่นยำของการลอยขณะทำท่าทางสัมผัส

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

นอกจากนี้ เรามีแผนที่จะนําการปรับปรุงนี้มาสู่ Safari บนอุปกรณ์เคลื่อนที่ด้วยเช่นกัน https://bugs.webkit.org/show_bug.cgi?id=133180