Fabric.js 2.x版本如何获取文本选中样式？原方法失效问题

解决Fabric.js 2.x中选中文本样式获取失效的问题 #

嘿，我之前升级Fabric.js到2.x时也碰到过一模一样的问题，原来的getSelectionStyles确实在新版本里被移除了，不过换个API就能轻松解决，给你一步步说清楚：

核心原因 #

Fabric.js 2.x对文本模块做了大幅重构，旧版本里的getSelectionStyles这类封装好的样式获取方法被废弃了，现在要直接通过文本对象的styles属性来访问单个字符的样式，逻辑反而更直观。

修复后的代码示例 #

你可以把原来的onSelectionChanged函数改成这样：

canvas.on('text:selection:changed', onSelectionChanged);

function onSelectionChanged() {
  const obj = canvas.getActiveObject();
  // 先判断是否是文本对象，避免非文本选中的情况
  if (!obj || !(obj instanceof fabric.Text)) {
    // 这里可以重置滑块到默认值或者做其他处理
    return;
  }

  const selectionStart = obj.selectionStart;
  const selectionEnd = obj.selectionEnd;

  // 不管是选中一段文本还是光标定位，都取起始位置的字符样式
  const targetIndex = selectionStart;
  // 获取目标字符的样式
  const charStyle = obj.styles[targetIndex];

  if (charStyle) {
    // 拿到首个选中字符的字号，更新你的滑块
    const matchedFontSize = charStyle.fontSize;
    // 比如你的滑块元素是#fontSizeSlider，就这么更新：
    // document.getElementById('fontSizeSlider').value = matchedFontSize;
    console.log('匹配到的字号:', matchedFontSize);
  } else {
    // 如果没有单独设置过该字符的样式，用文本对象的默认字号
    const defaultFontSize = obj.fontSize;
    // document.getElementById('fontSizeSlider').value = defaultFontSize;
  }
}

额外说明 #

• 如果是选中了一段文本，selectionStart就是选中区域第一个字符的索引，直接取这个位置的styles就能拿到你要的首个字符样式。
• 如果只是光标定位在某个字符前，selectionStart等于selectionEnd，这时候取selectionStart对应的样式也能匹配光标位置的字符样式。
• 要是文本全程用的是默认样式，obj.styles里对应的索引会不存在，这时候直接用文本对象本身的fontSize就行。

内容的提问来源于stack exchange，提问作者Flemming