EditContext：updateCharacterBounds() 方法
EditContext.updateCharacterBounds() 方法是 EditContext 接口的一部分，应该在响应 characterboundsupdate 事件时调用，以将 EditContext 对象中字符的位置和大小告知操作系统。
characterboundsupdate 事件是您唯一需要调用 updateCharacterBounds() 方法的时候。
操作系统随后会使用字符边界信息，在需要时正确地定位 输入法编辑器 (IME) 窗口。在操作系统无法自动检测字符位置和大小的情况下，例如在 <canvas> 元素中渲染文本时，这一点尤为重要。
语法
updateCharacterBounds(rangeStart, characterBounds)
参数
rangeStart-
一个数字，表示提供字符边界的文本范围的开始。
characterBounds
返回值
无 (undefined)。
异常
TypeError-
如果方法调用的参数少于两个，或者第一个参数不是数字，或者第二个参数不是可迭代对象（如数组），则会抛出此错误。
用法说明
避免 IME 窗口位置突然跳动
在 characterboundsupdate 事件中同步计算字符边界并调用 updateCharacterBounds，可确保操作系统在显示 IME 窗口时拥有所需的信息。如果在事件处理程序中未同步调用 updateCharacterBounds()，用户可能会看到 IME 窗口先显示在错误位置，然后再移动到正确位置。
包含哪些字符
updateCharacterBounds() 方法应仅在操作系统指示需要该信息时调用，并且仅针对当前 IME 组合中包含的字符调用。
传递给 characterboundsupdate 事件处理程序的事件对象包含 rangeStart 和 rangeEnd 属性，它们指示当前正在组合的字符范围。updateCharacterBounds() 方法应仅针对此范围内的字符调用。
示例
在需要时更新字符边界
此示例演示了如何在使用 <canvas> 元素的 EditContext 中，当操作系统指示需要信息时，使用 updateCharacterBounds 方法来更新字符边界。请注意，此示例中的 characterboundsupdate 事件监听器回调仅在使用 IME 窗口或其他平台特定的编辑 UI 表面组合文本时调用。
<canvas id="editor-canvas"></canvas>
const FONT_SIZE = 40;
const FONT = `${FONT_SIZE}px Arial`;
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
ctx.font = FONT;
const editContext = new EditContext();
canvas.editContext = editContext;
function computeCharacterBound(offset) {
// Measure the width from the start of the text to the character.
const widthBeforeChar = ctx.measureText(
editContext.text.substring(0, offset),
).width;
// Measure the character width.
const charWidth = ctx.measureText(editContext.text[offset]).width;
const charX = canvas.offsetLeft + widthBeforeChar;
const charY = canvas.offsetTop;
// Return a DOMRect representing the character bounds.
return DOMRect.fromRect({
x: charX,
y: charY - FONT_SIZE,
width: charWidth,
height: FONT_SIZE,
});
}
editContext.addEventListener("characterboundsupdate", (e) => {
const charBounds = [];
for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) {
charBounds.push(computeCharacterBound(offset));
}
editContext.updateCharacterBounds(e.rangeStart, charBounds);
});
规范
| 规范 |
|---|
| EditContext API # dom-editcontext-updatecharacterbounds |
浏览器兼容性
加载中…
另见
- 它所属的
EditContext接口。