Fabric.js 文本 moveCursor 属性

在 Fabric.js 中，moveCursor 属性是用于定义光标在文本对象中移动时的行为的一个属性。它可以控制光标移动的位置，例如移动至文本的下一行、上一行、下一个字符或上一个字符。

语法

textInstance.set('moveCursor', function (direction, bound) { ... });

参数：

• direction：String 类型，光标移动的方向，可能的取值为 'left'、'right'、'up' 和 'down'。
• bound：Object 类型，光标所在行的边界。

返回值：

• 如果返回值为 null，则表示继续默认的光标移动行为，例如从一行末尾向右箭头前进（'right' 方向）；
• 如果返回值为 Number 类型，则表示在当前行内光标移动的步数；
• 如果返回值为 Object 类型，则表示光标移动到新位置的信息，包括新的字符位置、新的行位置等。

示例

var text = new fabric.IText('Hello\nWorld', {
    fontFamily: 'Arial',
    fontSize: 20,
    lineHeight: 1.5,
    moveCursor: function (direction, bound) {
        var cursorLocation = this.get2DCursorLocation(this.selectionStart);
        var lineIndex = cursorLocation.lineIndex;
        var charIndex = cursorLocation.charIndex;

        if (direction === 'up' && lineIndex > 0) {
            return { lineIndex: lineIndex - 1, charIndex: charIndex }
        }
        else if (direction === 'down' && lineIndex < bound.height - 1) {
            return { lineIndex: lineIndex + 1, charIndex: charIndex }
        }
        else if (direction === 'left' && charIndex > 0) {
            return charIndex - 1;
        }
        else if (direction === 'right' && charIndex < bound.width - 1) {
            return charIndex + 1;
        }

        return null;
    }
});

canvas.add(text);
canvas.renderAll();

上述代码创建了一个文本对象 text，其中通过设置 moveCursor 函数，定义了光标的移动行为。在这个函数中，先通过 get2DCursorLocation 方法获取当前光标位置的行和列索引，然后根据 direction 参数和 bound 参数指定的边界，计算出新的光标位置并返回。最后添加到 canvas 中并渲染出来。