Skip to content

Commit

Permalink
[zh-CN]: sync translation for Element.requestPointerLock() and `Doc…
Browse files Browse the repository at this point in the history
…ument.exitPointerLock()` (mdn#23818)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: A1lo <[email protected]>
  • Loading branch information
3 people authored and sora32127 committed Oct 6, 2024
1 parent 9e9b945 commit 516e1b2
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 15 deletions.
27 changes: 19 additions & 8 deletions files/zh-cn/web/api/document/exitpointerlock/index.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,33 @@
---
title: Document.exitPointerLock()
title: DocumentexitPointerLock() 方法
slug: Web/API/Document/exitPointerLock
l10n:
sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
---

{{ apiref("DOM") }}
{{APIRef("Pointer Lock API")}}

{{ seeCompatTable }}
{{domxref("Document")}} 接口的 **`exitPointerLock()`** 方法异步释放先前通过 {{domxref("Element.requestPointerLock")}} 请求的指针锁定。

`exitPointerLock` 方法可异步的解锁鼠标(通过{{domxref("Element.requestPointerLock")}}锁定的)。
> [!NOTE]
> 在文档上调用 **`exitPointerLock()`** 方法,在元素上调用 **`requestPointerLock()`** 方法。
追踪是否解锁成功,需要监听[`pointerlockchange`](/zh-CN/docs/Web/API/Document/pointerlockchange_event)[`pointerlockerror`](/zh-CN/docs/Web/API/Document/pointerlockerror_event) 事件。
要跟踪请求的成功或失败,需要监听 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 事件和 {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} 事件。

## 语法

```plain
document.exitPointerLock();
```js-nolint
exitPointerLock()
```

### 参数

无。

### 返回值

无({{jsxref("undefined")}})。

## 规范

{{Specifications}}
Expand All @@ -29,4 +40,4 @@ document.exitPointerLock();

- {{ domxref("Document.pointerLockElement") }}
- {{ domxref("Element.requestPointerLock()") }}
- [Pointer Lock](/zh-CN/docs/WebAPI/Pointer_Lock)
- [指针锁定](/zh-CN/docs/Web/API/Pointer_Lock_API)
71 changes: 64 additions & 7 deletions files/zh-cn/web/api/element/requestpointerlock/index.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,77 @@
---
title: Element.requestPointerLock()
title: ElementrequestPointerLock() 方法
slug: Web/API/Element/requestPointerLock
l10n:
sourceCommit: d0b23f3f26637aa405ee9ee0a0892fc6e9b742ef
---

{{ APIRef("DOM") }}{{ seeCompatTable }}
{{APIRef("Pointer Lock API")}}

**`Element.requestPointerLock()`** 方法允许你异步地请求将鼠标指针锁定在指定元素上
{{domxref("Element")}} 接口的 **`requestPointerLock()`** 方法允许你异步请求在给定元素上锁定指针

若想追踪请求成功还是失败,则需要在 {{domxref("Document")}} 级别监听 [`pointerlockchange`](/zh-CN/docs/Web/API/Document/pointerlockchange_event)[`pointerlockerror`](/zh-CN/docs/Web/API/Document/pointerlockerror_event) 事件。
要跟踪请求的成功或失败,必须在 {{domxref("Document")}} 级别监听 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 事件和 {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} 事件。

> [!NOTE]
> 在当前规范中,`requestPointerLock()` 仅通过触发 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 事件或 {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} 事件来传达请求的成功或失败。 [对规范的拟议更新](https://github.com/w3c/pointerlock/pull/49)更新了 `requestPointerLock()`,以返回 {{jsxref("Promise")}} 来传达成功或失败。此页面记录了返回 {{jsxref("Promise")}} 的版本。但请注意,此版本尚未成为标准,并且并非所有浏览器都实现此版本。有关更多信息,请参阅[浏览器兼容性](#浏览器兼容性)
## 语法

```plain
instanceOfElement.requestPointerLock();
```js-nolint
requestPointerLock()
requestPointerLock(options)
```

### 参数

- `options` {{optional_inline}}
- : 选项对象,可以包含以下属性:
- `unadjustedMovement` {{optional_inline}}
- : 禁用操作系统级别的鼠标加速调整,而是访问原始鼠标输入。默认值为 `false`;将其设置为 `true` 将禁用鼠标加速。

### 返回值

兑现 {{jsxref("undefined")}} 的 {{jsxref("Promise")}}。

## 安全

调用 `requestPointerLock()` 时需要{{Glossary("Transient activation", "瞬态激活")}}。用户必须与页面或 UI 元素进行交互才能使此特性正常工作。此外,目标元素的关联文档必须处于活动状态。

如果在通过默认解锁手势释放指针锁后立即调用 `requestPointerLock()`(而不是通过 `exitPointerLock()` 调用),即使有{{Glossary("Transient activation", "瞬态激活")}},调用也会失败。

如果使用 {{domxref("Element.requestFullscreen()", "requestFullscreen()")}} 调用 `requestPointerLock()`,则必须先调用 `requestPointerLock()`,因为 {{domxref("Element.requestFullscreen()", "requestFullscreen()")}} 将消耗{{Glossary("Transient activation", "瞬态激活")}}的状态。

在 {{htmlelement("iframe")}} 元素中调用 `requestPointerLock()` 时,必须添加 `allow-pointer-lock` [沙盒令牌](/zh-CN/docs/Web/HTML/Element/iframe#sandbox)。此外,其他 {{htmlelement("iframe")}} 元素中的其他元素不得处于指针锁定模式。

## 示例

指针锁定通常用于在线游戏中,当你希望鼠标移动专注于控制游戏时,不会因鼠标指针四处移动、超出游戏区域或到达窗口边缘而分散注意力。

要启用指针锁定,你需要让用户以某种方式与 UI 进行交互,例如按下按钮或游戏画布本身。

```js
canvas.addEventListener("click", async () => {
await canvas.requestPointerLock();
});
```

操作系统默认启用鼠标加速,这在你有时想要缓慢精确的移动(例如,你可能会使用图形包)但又想以更快的鼠标移动移动很远的距离(例如,滚动和选择多个文件)时非常有用。然而,对于某些第一人称视角游戏,原始鼠标输入数据更适合控制相机旋转——相同距离的移动(快速或慢速)都会导致相同的旋转。专业游戏玩家表示,这会带来更好的游戏体验和更高的准确度。

要禁用操作系统级鼠标加速并访问原始鼠标输入,你可以将 `unadjustedMovement` 设置为 `true`

```js
canvas.addEventListener("click", async () => {
await canvas.requestPointerLock({
unadjustedMovement: true,
});
});
```

更多示例代码请参见:

- [指针锁定演示](https://mdn.github.io/dom-examples/pointer-lock/)[查看源代码](https://github.com/mdn/dom-examples/tree/main/pointer-lock)
- {{domxref("Pointer Lock API", "指针锁定 API", "", "nocode")}}
- [禁用鼠标加速以提供更好的 FPS 游戏体验](https://web.dev/articles/disable-mouse-acceleration)

## 规范

{{Specifications}}
Expand All @@ -27,4 +84,4 @@ instanceOfElement.requestPointerLock();

- {{ domxref("Document.pointerLockElement") }}
- {{ domxref("Document.exitPointerLock()") }}
- [Pointer Lock](/zh-CN/docs/Web/API/Pointer_Lock_API)
- [指针锁定](/zh-CN/docs/Web/API/Pointer_Lock_API)

0 comments on commit 516e1b2

Please sign in to comment.