Một thay đổi tương đối nhỏ đối với Touch API trong Chrome đã được đưa vào
Chrome 39:
đã giới thiệu 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 (Beta vào tháng 7 năm 2015), trình duyệt 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
TouchEvent
Spec và Firefox.
Mặc dù đã tồn tại được một thời gian, nhưng chúng tôi vẫn muốn giải thích tại sao
rotationAngle vì mở ra một số cách sử dụng thao tác chạm thú vị hơn
cử chỉ, đặc biệt là trên thiết bị di động.
Về mặt kỹ thuật, góc quay là số độ (từ 0 đến 90) của
elip của diện tích tiếp xúc được xác định bằng
Touch.radiusX
và
Touch.radiusY.
Ôi, thú vị đấy, phải không? (Xin lưu ý rằng tôi chỉ thấy rằng Chrome đang bật
Android không khoá các giá trị radiusX và radiusY thành 64px mà thay vào đó
thay đổi kích thước tuỳ thuộc vào kích thước tiếp xúc của màn hình).
Điều này thực sự 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 của
ngón tay của người dùng trên màn hình. Không phải lúc nào người dùng cũng dùng ngòi bút nhấn vào màn hình
đầu ngón tay, nhưng thường xuyên nhấn vào màn hình như thể
dấu vân tay cho cảnh sát. Nếu không có rotationAngle, bạn sẽ dễ dàng nhận được
độ rộng và chiều cao của cử chỉ chạm. Với rotationAngle, bạn
nhận được 90 độ xoay (0 là dọc và 90 là ngang). Chỉ tại sao
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ị nữa là vùng tiếp xúc của ngón tay người dùng thay đổi
vì chúng thay đổi mức độ áp lực của ngón tay trên màn hình. Đó không phải là
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ẽ sáng
trên màn hình vì các phím này có diện tích bề mặt nhỏ hơn so với thao tác nhấn mạnh hơn.
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 hoạt động này. Nexus 10 cũng ổn thôi. Đáp một ví dụ điển hình là xem trực tiếp Ví dụ về tranh vẽ Rick Byers. Không thể bỏ qua nhưng sau đây là một 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ẽ vận dụng phương pháp này vào thực tế ở đâu?
Có một số khía cạnh rõ ràng mà việc này sẽ mang lại lợi ích tức thì cho người dùng:
- Các ứng dụng web vẽ và chỉnh sửa hình ảnh có thể sử dụng các ứng dụng này để thay đổi nét vẽ hoặc hiệu ứng được á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 xoayAngle để 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 bạn hiểu góc xoay, bạn có thể tạo một cử chỉ ngón tay để xoay đối tượng.
Có phải mọi thiết bị đều hỗ trợ tính năng này không?
Không. Đây chưa phải là trường hợp quá phổ biến. Nếu có Nexus 10, bạn sẽ thấy nội dung như sau,
Ảnh của Rick Byers.
Khi thiết bị không thể nhận biết góc xoay khi chạm,
rotationAngle sẽ bằng 0, còn các giá trị radiusX và radiusY sẽ là
bằng nhau (nhưng có thể thay đổi tuỳ theo diện tích bề mặt cảm ứng hiện tại).
Tại sao phả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.
Sự kiện chạm sẽ hoạt động khi được hỗ trợ và nếu giá trị bán kính và giá trị xoay là
bạn có thể cải thiện ứng dụng của mình để cung cấp cho người dùng
của bạn. Không phải người dùng nào cũng có máy tính bảng Wacom nhưng khi họ trình bày nhiều bức tranh
các ứng dụng khác sẽ tận dụng điều này.
Còn Sự kiện con trỏ thì sao?
Mục đích của việc này là đảm bảo chúng ta có một sự kiện tiếp xúc hoàn chỉnh API dành cho các nhà phát triển sử dụng API này. Xem cách tôi né tránh câu hỏi một chút... Xem thêm thật sự mà nói, nếu bạn muốn theo dõi PointerEvent của Blink khi triển khai, bạn có thể gắn dấu sao Vấn đề 471824 và đọc Rick Byers' tài liệu theo dõi.