CharacterBoundsUpdateEvent

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

<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));
 }
 // Update the character bounds in the EditContext instance.
 editContext.updateCharacterBounds(e.rangeStart, charBounds);
 console.log(
 "The required character bounds are",
 charBounds
 .map(
 (bound) =>
 `(x: ${bound.x}, y: ${bound.y}, width: ${bound.width}, height: ${bound.height})`,
 )
 .join(", "),
 );
});

Help improve MDN