Device orientation events
Device orientation events là các sự kiện cho phép bạn phát hiện sự định hướng vật lý của thiết bị và chuyển động của nó.
Khái niệm và cách sử dụng
Thiết bị di động thường có các cảm biến như con quay hồi chuyển (gyroscope), la bàn (compass) và gia tốc kế (accelerometer) có thể cung cấp thông tin về định hướng vật lý và chuyển động của thiết bị.
Các sự kiện định hướng thiết bị cho phép bạn viết các ứng dụng web có thể thay đổi hành vi dựa trên định hướng của thiết bị và phản ứng với chuyển động của người dùng.
Sự kiện
deviceorientation-
Kích hoạt khi dữ liệu định hướng mới có sẵn từ cảm biến đo định hướng của thiết bị.
deviceorientationabsolute-
Kích hoạt khi dữ liệu định hướng tuyệt đối mới có sẵn từ cảm biến đo định hướng của thiết bị.
devicemotion-
Kích hoạt với tốc độ đều đặn, cho biết lượng lực vật lý gia tốc mà thiết bị đang nhận, và tốc độ quay nếu có.
Xử lý sự kiện định hướng thiết bị
Để nhận dữ liệu định hướng, hãy lắng nghe sự kiện deviceorientation:
window.addEventListener("deviceorientation", handleOrientation);
function handleOrientation(event) {
const absolute = event.absolute;
const alpha = event.alpha; // Xoay quanh trục z (0-360)
const beta = event.beta; // Xoay quanh trục x (-180 đến 180)
const gamma = event.gamma; // Xoay quanh trục y (-90 đến 90)
// Xử lý dữ liệu định hướng
}
Xử lý sự kiện chuyển động thiết bị
Sự kiện devicemotion cung cấp dữ liệu gia tốc:
window.addEventListener("devicemotion", handleMotion);
function handleMotion(event) {
const acceleration = event.acceleration;
const accelerationWithGravity = event.accelerationIncludingGravity;
const rotationRate = event.rotationRate;
const interval = event.interval;
// Xử lý dữ liệu chuyển động
}
Yêu cầu quyền truy cập (iOS)
Trên thiết bị iOS 13+, bạn cần yêu cầu quyền truy cập trước khi sử dụng sự kiện định hướng thiết bị:
function requestPermission() {
if (
typeof DeviceOrientationEvent !== "undefined" &&
typeof DeviceOrientationEvent.requestPermission === "function"
) {
DeviceOrientationEvent.requestPermission()
.then((permissionState) => {
if (permissionState === "granted") {
window.addEventListener("deviceorientation", handleOrientation);
}
})
.catch(console.error);
} else {
// Không cần quyền trên Android
window.addEventListener("deviceorientation", handleOrientation);
}
}
// Gọi yêu cầu quyền truy cập sau sự kiện người dùng
document
.getElementById("request-permission")
.addEventListener("click", requestPermission);
Hướng dẫn
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Device Orientation and Motion> |