如何使用 FabricJS 在 IText 中的字符之间添加空格？

介绍

Fabric.js 是一个用于创建交互式 Web 应用程序中的可扩展的纺织和面料引擎。它是一个运行在 Canvas 上的 JavaScript 库，专门用来构建基于 Canvas 的交互界面。 它提供了一个基于对象的 API 来简化图形处理，使其易于构建我们预计的逻辑。 这个库可用于开发像图像编辑器、游戏、PDF 视图等应用程序，我们甚至可以用它来构建自己的可视化图表。

IText简介

IText 是 FabricJS 提供的用于呈现文本和排版的类，可以设置字体、大小、颜色、行间距和对齐方式等。 FabricJS 提供了在 IText 组件中更改文本方面粒度很小的控制，我们可以在其间添加行、行段落、行内元素和样式等等。我们可以通过 IText 与许多文本常用的 API 交互，比如：获取字母的光标位置、计算字符串的大小等等。IText 扩展自 Group 类，也就是说，可以像 Group 一样工作，这个基本组件可以轻松地在屏幕上移动和缩放，它是我们构建正确组合的字形的基本元素。

添加空格的问题

在 IText 组件中添加空格并不困难，我们可以通过将字符间距（字符间距 CSS 属性）与字符宽度之和进行比较的方法来计算空格大小的字符数。 这个方法带来了一个问题，在大多数情况下，Itext 在调整字符间距时默认使用 100 等分作为它（间距）的单位，在这种情况下，Itext 不考虑字符的实际宽度和字符间距不等长的情况。

造成这个问题的原因是因为 FabricJS 默认的字体渲染算法会在字符间距上添加留白，留白的大小默认是字符宽度的 1/5。在下面的示例中，我们可以看到消息框中三个单词“Hello”，“World”，“Welcome”的字符之间留出了一些空白:

canvas.add(new fabric.IText('Hello  World  Welcome',{
    fontSize: 50,
    left: 50,
    top: 50,
    fontFamily: 'sans-serif'
}));

解决方案

可以通过在插入空格时在其内容之前添加某种宽度的特殊字符来避免这个问题。这种方法是通过使用零宽字符（U + 200B）插入我们需要的空格，它是一个不可见的“空字符串”，可以引导 IText 类根据字符间距和字符宽度正确计算空格的大小。

我们来看看下面的示例：

canvas.add(new fabric.IText('Hello\u200B \u200BWorld\u200B \u200BWelcome',{
    fontSize: 50,
    left: 50,
    top: 50,
    fontFamily: 'sans-serif'
}));

在这个示例中，我们在每个单词之间插入了两个零宽字符，并分别在它们的前面加了空格，是不是字母之间的留白已经消失？

总结

通过在空格字符之前插入零宽字符，我们可以控制字符间距并消除字符留白现象。我相信这个技巧对于那些需要更细粒度控制的文字处理场景非常有用。