Một thay đổi tương đối nhỏ đối với API cảm ứng trong Chrome đã có trong Chrome 39. Phiên bản này giới thiệu một phiên bản hoạt động của thuộc tính webkitRotationAngle trên đối tượng TouchEvent. Hiện đã có trong Chrome 45 (Bản thử nghiệm beta vào tháng 7 năm 2015), mã này không có tiền tố là rotationAngle, giúp việc triển khai của chúng tôi phù hợp hơn với thông số kỹ thuật TouchEvent và Firefox.
Mặc dù tính năng này đã ra mắt được một thời gian, nhưng bạn vẫn nên giải thích khái niệm rotationAngle vì tính năng này mở ra một số cách sử dụng cử chỉ chạm thú vị hơn, đặc biệt là trên thiết bị di động.
Về mặt kỹ thuật, góc xoay là số độ (từ 0 đến 90) của hình elip vùng tiếp xúc được xác định bởi Touch.radiusX và Touch.radiusY.
Ồ, hay lắm, phải không? (Xin lưu ý rằng tôi chỉ phát hiện ra rằng Chrome trên Android không khoá các giá trị radiusX và radiusY thành 64px mà thay đổi tuỳ thuộc vào kích thước của màn hình).
Điều này có nghĩa là gì?
Hãy coi đây là cách thể hiện chính xác kích thước, hình dạng và hướng ngón tay của người dùng trên màn hình. Người dùng không phải lúc nào cũng nhấn vào màn hình bằng đầu ngón tay, mà thường xuyên nhấn vào màn hình như thể họ đang đưa vân tay cho cảnh sát. Nếu không có rotationAngle, bạn sẽ chỉ đơn giản là có được chiều rộng và chiều cao của cử chỉ chạm. Với rotationAngle, bạn có thể xoay 90 độ (0 là dọc và 90 là ngang). Tại sao chỉ cần
90 độ? Bạn chỉ cần góc 90 độ vì khi bạn di chuyển qua các góc đó, radiusX và radiusY sẽ thay đổi cho phù hợp.
Một điều thú vị khác là vùng tiếp xúc ngón tay của người dùng thay đổi khi họ thay đổi mức độ áp lực của ngón tay trên màn hình. Đây không phải là sự thay thế trực tiếp cho force, nhưng bạn có thể phân biệt giữa các bút vẽ ánh sáng trên màn hình vì chúng có diện tích bề mặt nhỏ hơn so với khi nhấn mạnh.
Làm cách nào để sử dụng?
Trước tiên, bạn cần một thiết bị có thể phát hiện điều này. Nexus 10 sẽ hoạt động tốt. Bạn có thể xem trực tiếp ví dụ về màu vẽ của Rick Byers. Vẫn không thể thua kém nhưng đây là cách sử dụng ảnh mà không cần 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;
Bạn sẽ sử dụng phương pháp này trong thực tế ở đâu?
Có một số điểm rõ ràng mà việc này sẽ mang lại lợi ích tức thì cho người dùng:
- Ví dụ: các ứng dụng web về hội hoạ và thao tác hình ảnh có thể sử dụng thông tin này để thay đổi nét vẽ hoặc các hiệu ứng áp dụng cho canvas. Bạn có thể sử dụng bán kính cảm ứng để thay đổi kích thước của bút vẽ và có thể kết hợp trong rotationAngle để thay đổi góc tiếp xúc của bút vẽ trên canvas.
- Nhận dạng cử chỉ nâng cao: Nếu hiểu về rotationAngle, bạn có thể tạo cử chỉ một ngón tay để xoay đối tượng.
Mọi thiết bị đều hỗ trợ tính năng này không?
Không. Đây chưa phải là điều quá phổ biến. Nếu sử dụng Nexus 10, bạn sẽ thấy thông tin như sau,
Nguồn hình ảnh là của Rick Byers.
Khi thiết bị không thể nhận biết góc xoay của một lần chạm, rotationAngle sẽ bằng 0 và các giá trị radiusX và radiusY sẽ bằng nhau (nhưng có thể thay đổi tùy thuộc vào diện tích bề mặt cảm ứng hiện tại).
Tại sao lại bận tâm?
Đây là một câu hỏi hay. Giống như nhiều tính năng trên web, đây là một trải nghiệm bổ sung.
Các sự kiện chạm sẽ hoạt động khi được hỗ trợ. Nếu có sẵn các giá trị bán kính và xoay, bạn có thể cải thiện ứng dụng của mình để người dùng có trải nghiệm tốt hơn. Không phải người dùng nào cũng có máy tính bảng Wacom, nhưng khi có nhiều ứng dụng vẽ sẽ tận dụng nó.
Còn Sự kiện con trỏ thì sao?
Việc này thực sự chỉ nhằm đảm bảo chúng tôi có một API sự kiện chạm đầy đủ chi tiết cho các nhà phát triển dựa vào nó. Xem cách tôi né tránh câu hỏi này một chút... Tuy nhiên, nghiêm trọng hơn là nếu muốn thực hiện theo quá trình triển khai PointerEvent của Blink, bạn có thể gắn dấu sao Vấn đề 471824 và đọc tài liệu theo dõi của Rick Byers.