Published on

fabric 添加 Textbox 无法使用setActiveObject

Authors
  • avatar
    Name
    Shelton Ma
    Twitter

问题现象(What Happened)

fabricjs: 6.4.3, 添加FabricImage/Textbox, 不可使用canvas.setActiveObject(object);, 报错TypeError: Cannot read properties of null (reading 'hex')

问题原因(Why It Happened)

调用栈显示Object.toState node_modules/.pnpm/react-color@2.19.3_react@18.2.0/node_modules/react-color/lib/helpers/color.js (40:1), 代码var color = data.hex, 显然是某个颜色没设置, 打印object发现stroke:null, 添加后不再报错

解决方案(How to Fix It)

初始化时添加完整属性

// src/features/editor/types.ts
export const TEXT_OPTIONS = {
  left: 200,
  top: 200,
  fill: FILL_COLOR,
  fontSize: FONT_SIZE,
  fontFamily: FONT_FAMILY,
  stroke: STROKE_COLOR,
};

export const IMAGE_OPTIONS = {
  stroke: STROKE_COLOR,
};