Fabric.js Itext stroke 属性

在使用 Fabric.js 进行 canvas 绘图时，Itext 类是非常有用的，它允许我们创建可编辑的文本对象。Itext 类允许我们设置 stroke 属性，以控制文本描边。

stroke 属性

stroke 属性控制文本的描边效果。它可以是一个颜色值或一个包含以下属性的对象：

• color：描边的颜色值，默认为黑色。可以使用任何 CSS 颜色格式，例如 "#000" 或 "rgb(0,0,0)"。
• width：描边的宽度。默认值为 0，表示没有描边效果。
• offsetX: 描边相对于文本的 X 偏移量
• offsetY: 描边相对于文本的 Y 偏移量

设置 stroke 属性

在 Fabric.js 中，可以使用 set 方法设置 stroke 属性。

const itext = new fabric.IText('Hello Fabric.js', {
  left: 100,
  top: 100,
});

itext.set({
  stroke: '#ff0000', // 设置为红色
  strokeWidth: 2, // 设置宽度为 2
  strokeOffsetX: 1, // 横向偏移量为 1
  strokeOffsetY: 1, // 纵向偏移量为 1
});

如果未设置 stroke 宽度，则默认为 0，将不显示描边效果。

注意事项

当设置了 stroke 属性时，文本将显示在 stroke 内部，如果需要让文本显示在 stroke 外部，则可以通过设置宽度和偏移量等属性来调整描边效果。

除了 stroke 属性之外，Itext 还提供了许多其他有用的属性，例如 fill 颜色、字体大小、字体样式等，可以根据需求进行使用。

更多关于 Fabric.js Itext 属性的信息，可以查看官方文档：https://fabricjs.com/docs/fabric.IText.html