如何使用 FabricJS 获取 IText 中单词的正确边界？

1. 简介

Fabric.js 是一款非常流行的 HTML5 Canvas 库，它提供了一系列的 API，使得在 Canvas 画布上添加图形和文本变得非常简单。在 Fabric.js 中，文本被表示为 IText 对象。

但是，有一件事情让一些开发者感到困扰，那就是如何获取 IText 中单词的正确边界。默认情况下，单词之间会有一定的间隔，这使得获取单个单词的大小和位置变得相对困难。

2. 解决方案

2.1. 渲染 IText 文本

在 Fabric.js 中，要想获取 IText 中单词的正确边界，我们首先需要对 IText 进行渲染。可以通过以下代码进行渲染：

const canvas = new fabric.Canvas('canvas');
const text = new fabric.IText('Hello World!', {
  left: 100,
  top: 100,
});
canvas.add(text);
canvas.renderAll();

代码中我们创建了一个名为 canvas 的 Canvas 对象，然后创建了一个名为 text 的 IText 对象，将该对象添加到 Canvas 中并进行渲染。

2.2. 获取单个单词的边界信息

要获取单个单词的大小和位置，我们可以使用以下代码：

const canvas = new fabric.Canvas('canvas');
const text = new fabric.IText('Hello World!', {
  left: 100,
  top: 100,
});
canvas.add(text);
canvas.renderAll();
const wordIndex = 0; // 需要获取边界信息的单词下标
const charIndex = text.get2DCursorLocation(wordIndex).charIndex;
const word = text.text.split(' ')[wordIndex];
const boundary = text._getWordBoundary(charIndex, word);
console.log(boundary);

代码中我们使用了 Fabric.js 提供的 get2DCursorLocation() 方法，该方法可以返回 IText 中指定索引位置字符的行索引和列索引信息。然后我们通过 charIndex 获取到单个单词的起始位置，使用 split() 方法将 IText 中的文本按空格划分为一个个单词，最后通过 _getWordBoundary() 方法获取到该单词的边界信息。

2.3. 获取整个 IText 的边界信息

要获取整个 IText 的边界信息，我们可以使用以下代码：

const canvas = new fabric.Canvas('canvas');
const text = new fabric.IText('Hello World!', {
  left: 100,
  top: 100,
});
canvas.add(text);
canvas.renderAll();
const textSize = text.getBoundingRect();
console.log(textSize);

代码中我们使用了 Fabric.js 提供的 getBoundingRect() 方法，该方法可以返回 IText 的边界信息，包括宽度、高度和起始位置等。

3. 示例

下面是一个完整的示例，可以点击 Canvas 区域中的单词查看其边界信息：

const canvas = new fabric.Canvas('canvas');
const text = new fabric.IText('Hello World! This is a test.', {
  left: 100,
  top: 100,
  fontFamily: 'Arial',
  fontSize: 24,
});
canvas.add(text);
canvas.renderAll();
text._splitTextIntoWords();
text.forEachWord((word, index) => {
  const charIndex = text.get2DCursorLocation(index).charIndex;
  const boundary = text._getWordBoundary(charIndex, word);
  const element = document.createElement('span');
  
  element.style.border = '1px solid blue';
  element.style.position = 'absolute';
  element.style.top = `${boundary.top + canvas._offset.top}px`;
  element.style.left = `${boundary.left + canvas._offset.left}px`;
  element.style.width = `${boundary.width}px`;
  element.style.height = `${boundary.height}px`;
  element.onclick = () => {
    console.log(`Word: ${word}, Boundary: `, boundary);
  };
  canvas.wrapperEl.appendChild(element);
});

代码中我们使用了 Fabric.js 提供的 _splitTextIntoWords() 方法和 forEachWord() 方法，在 Canvas 区域中为每个单词创建了一个带边框的 span 标签，并添加到 wrapperEl 元素中。同时，我们为每个单词的 span 标签添加了 onclick 事件，在单击标签时输出该单词的边界信息。

4. 总结

使用 Fabric.js 获取 IText 中单词的正确边界需要渲染 IText，获取单个单词的边界信息，以及获取整个 IText 的边界信息这三个步骤。其中，通过 get2DCursorLocation() 和 _getWordBoundary() 方法可以获取单个单词的边界信息，通过 getBoundingRect() 方法可以获取整个 IText 的边界信息。可以将获取到的信息用于一些交互式的需求中。