Fabric.js中如何仅修改选中部分文本的颜色

直接对文本对象调用set()方法修改样式，默认作用于整个文本实例，所以会出现整块文本样式被统一修改的问题，要实现仅修改选中部分文本的样式，需要使用Fabric.js为可编辑文本提供的选区专属API，具体实现方式如下：

前置条件 #

只有fabric.IText、fabric.Textbox类型的文本对象支持选区编辑能力，基础fabric.Text对象不支持选中文本范围识别，无法实现局部样式修改。

核心实现代码 #

修改选中文本颜色的逻辑如下：

// 获取画布当前激活对象
const activeObj = canvas.getActiveObject();
// 校验激活对象是否为可编辑文本类型
if (activeObj && ['i-text', 'textbox'].includes(activeObj.type)) {
  // 给当前选中范围的文本设置样式
  activeObj.setSelectionStyles({
    fill: '#2563eb' // 此处替换为你需要设置的目标文本颜色
    // 如果需要同时修改选中文本的字体、字号等其他样式，直接在对象内追加属性即可
    // 例：fontFamily: 'Arial', fontSize: 18, fontWeight: 'bold'
  })
  // 触发画布重绘，让样式修改生效
  canvas.requestRenderAll();
}

对应原有修改字体逻辑的调整 #

之前写的修改fontFamily的逻辑，如果要作用于选中文本而非整块文本，只需要把属性传入setSelectionStyles即可，不需要直接调用全局set方法：

activeObj.setSelectionStyles({
  fontFamily: this.value
})
canvas.requestRenderAll();

扩展常用API #

• 获取当前选中的文本内容：调用activeObj.getSelectedText()
• 给指定索引区间的文本设置样式（无需用户手动选中）：调用activeObj.setStyle(startIndex, endIndex, styleObj)，其中startIndex为文本起始下标，endIndex为结束下标
• 清除选区内的自定义样式：调用activeObj.removeSelectionStyles(styleKeys)，传入要清除的样式属性名数组即可

内容的提问来源于stack exchange，提问作者Zain ul Abbdin