如何使用 FabricJS 获取文本中当前选择的样式？

1. FabricJS 简介

FabricJS 是一个 HTML 5 canvas 库，它使开发人员可以轻松地在网页上创建交互式素材。该库提供了对鼠标，触摸和其他输入设备的全面支持，并能够处理高分辨率屏幕和外部资源（如图像和字体）。 FabricJS 还支持渐变填充，图案填充，缩放，旋转等常见的操作。Canvas 具有大多数其他 HTML 元素所不具备的优点，即可以将其用作矢量绘图编辑器的基础。

2. FabricJS 文本对象

FabricJS 中的 Text 对象用于在画布上绘制和编辑文本。可以设置文本的字体、大小、颜色和样式等属性，如加粗、斜体和下划线等。以下是创建一个基本文本对象的示例：

const text = new fabric.Text('Hello World!', {
  left: 100,
  top: 100,
  fontSize: 30,
  fontFamily: 'Arial',
  stroke: 'red',
  strokeWidth: 2,
  fill: 'blue',
  fontStyle: 'italic',
  fontWeight: 'bold',
  textDecoration: 'underline'
});

该对象的样式属性除了常规的 fill、stroke、fontSize 和 fontFamily 外，还包括

2.1 fontStyle 属性

fontStyle 属性用于控制字体样式。可以设置 normal（默认值）、italic（斜体）和 oblique（不同于斜体），其它样式只有在指定字体支持时有效。可以通过以下代码设置：

const text = new fabric.Text('Hello World!', {
  ...
  fontStyle: 'italic'
});

2.2 fontWeight 属性

fontWeight 属性用于设置字体的粗细。可以设置 normal（默认值）、bold、bolder、lighter 或数字（100 到 900 的间隔值，默认为 400）。以下是一个示例：

const text = new fabric.Text('Hello World!', {
  ...
  fontWeight: 'bold'
});

2.3 textDecoration 属性

textDecoration 属性用于给文本添加下划线、删除线或其他特殊效果。可以通过下面的代码来设置：

const text = new fabric.Text('Hello World!', {
  ...
  textDecoration: 'underline'
});

3. 获取文本当前选择的样式

在 FabricJS 中，可以使用 getSelectedObject 方法访问当前选定对象。当 Text 对象被选中后，我们可以使用 Text#getSelectionStyles 方法获取到选择文本的样式：

const activeObject = canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
  const fontStyles = activeObject.getSelectionStyles();
  console.log(fontStyles);
}

上述代码将返回当前文本框中所选文本的字体样式和颜色。如果您的应用程序通过更改当前文本框的内容更新画布，则您可以使用 Text#changed 属性确保在更改完成后更新文本框的样式：

canvas.on('text:changed', function(options) {
  const activeObject = canvas.getActiveObject();
  if (activeObject && activeObject.type === 'text') {
    const fontStyles = activeObject.getSelectionStyles();
    console.log(fontStyles);
  }
});

4. 示例代码

以下示例演示了如何使用 FabricJS 获取文本区域中当前所选的样式：

// 初始化画布
const canvas = new fabric.Canvas('canvas');
// 创建文本对象
const text = new fabric.Text('Hello World!', {
  left: 100,
  top: 100,
  fontSize: 30,
  fontFamily: 'Arial',
  stroke: 'red',
  strokeWidth: 2,
  fill: 'blue',
  fontStyle: 'italic',
  fontWeight: 'bold',
  textDecoration: 'underline'
});
// 将文本对象添加到画布上
canvas.add(text);
// 当文本框被选中后，打印所选文本的字体样式和颜色
canvas.on('text:changed', function(options) {
  const activeObject = canvas.getActiveObject();
  if (activeObject && activeObject.type === 'text') {
    const fontStyles = activeObject.getSelectionStyles();
    console.log(fontStyles);
  }
});

总结

FabricJS 库为开发人员提供了在网页上创建交互式素材的能力。可以使用 Text 对象在画布上绘制和编辑文本，并通过样式属性控制文本的字体、大小、颜色和样式等。使用 getSelectionStyles 方法可以获取到当前选中文本的样式。