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