EditContext: characterboundsupdate-Ereignis
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das characterboundsupdate-Ereignis wird ausgelöst, wenn das Betriebssystem die Grenzen bestimmter Zeichen innerhalb des bearbeitbaren Textbereichs des EditContext-Objekts kennt.
Dies geschieht, wenn das Betriebssystem eine plattformspezifische, bearbeitungsbezogene Benutzeroberfläche anzeigen muss, wie beispielsweise ein Input Method Editor (IME)-Fenster.
Wenn das characterboundsupdate-Ereignis ausgelöst wird, sollten Sie die Zeichenbegrenzungen für den Text berechnen und dann die Methode EditContext.updateCharacterBounds() aufrufen, um dem Betriebssystem die benötigten Informationen bereitzustellen.
Lesen Sie die Dokumentation der updateCharacterBounds-Methode, um mehr darüber zu erfahren, wann und wie das characterboundsupdate-Ereignis verwendet werden sollte.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("characterboundsupdate", (event) => { })
oncharacterboundsupdate = (event) => { }
Ereignistyp
Ein CharacterBoundsUpdateEvent. Erbt von Event.
Ereignis-Eigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.
CharacterBoundsUpdateEvent.rangeStartSchreibgeschützt-
Der Versatz des ersten Zeichens innerhalb des bearbeitbaren Textes, für das das Betriebssystem die Grenzen benötigt.
CharacterBoundsUpdateEvent.rangeEndSchreibgeschützt-
Der Versatz des letzten Zeichens innerhalb des bearbeitbaren Textes, für das das Betriebssystem die Grenzen benötigt.
Beispiele
Aktualisierung der Zeichenbegrenzungen bei Bedarf
Dieses Beispiel zeigt, wie die updateCharacterBounds-Methode verwendet wird, um die Zeichenbegrenzungen im EditContext eines canvas-Elements zu aktualisieren, wenn das Betriebssystem angibt, dass es diese Informationen benötigt. Beachten Sie, dass der Rückruf des Ereignis-Listeners nur aufgerufen wird, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungsoberflächen verwendet werden, um Text zu komponieren.
<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));
}
console.log("The required character bounds are", charBounds);
editContext.updateCharacterBounds(e.rangeStart, charBounds);
});
Spezifikationen
| Specification |
|---|
| EditContext API # dom-editcontext-oncharacterboundsupdate |
Browser-Kompatibilität
Loading…