Sử dụng rotationAngle và chạmRadius

Paul Kinlan

Một thay đổi tương đối nhỏ đối với Touch API trong Chrome đã được đưa vào Chrome 39, trong đó 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. Giờ đây, trong Chrome 45 (Bản thử nghiệm vào tháng 7 năm 2015), thuộc tính này không có tiền tố là rotationAngle, giúp quá trình 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ù đã ra mắt được một thời gian, nhưng bạn nên giải thích rotationAngle là gì vì nó 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ằng Touch.radiusX và Touch.radiusY. Ừm, hay đúng không? (Cần 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 đó 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 nhấn vào màn hình như thể họ đang lấy dấu 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 có thể xoay 90 độ (0 là dọc và 90 là 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 cho phù hợp.

Một điều thú vị khác là vùng 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à 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ì chúng sẽ có diện tích bề mặt nhỏ hơn so với khi nhấn mạnh hơn.

Làm cách nào để sử dụng?

Trước tiên, bạn cần có một thiết bị có thể phát hiện được điều này. Nexus 10 sẽ hoạt động tốt. Một ví dụ hay là xem trực tiếp ví dụ về sơn của Rick Byers. Tuy nhiên, để không bị lép vế, sau đây là cách sử dụng 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 ở đâu trong thực tế?

Có một số trường hợp rõ ràng mà việc 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à chỉnh sửa 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à có thể kết hợp 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 rõ rotationAngle, bạn có thể tạo cử chỉ một 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. Hiện tại, việc 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:

Ảnh chụp màn hình xoay góc chạm

Hình ảnh của Rick Byers.

Khi thiết bị không thể hiểu 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 chạm 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.
Sự kiện chạm sẽ hoạt động khi được hỗ trợ. Nếu có giá trị bán kính và độ xoay, bạn có thể cải thiện ứng dụng để mang đến cho người dùng trải nghiệm phong phú hơn. Không phải người dùng nào cũng có bảng vẽ Wacom, nhưng khi có, nhiều ứng dụng vẽ sẽ tận dụng bảng vẽ này.

Còn Sự kiện con trỏ thì sao?

Điều này thực sự chỉ nhằm đảm bảo chúng tôi có một API sự kiện chạm hoàn chỉnh cho những nhà phát triển dựa vào API nà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 cho Vấn đề 471824 và đọc tài liệu theo dõi của Rick Byers.

Xem thêm