Vue Fabric Editor 通用属性修改 Hook 封装方案解析

背景与问题分析

在基于 Fabric.js 的 Vue Fabric Editor 项目中，属性修改功能是核心交互之一。当前项目中存在多个属性修改组件，这些组件在处理选中状态判断、元素类型判断等逻辑时存在大量重复代码，导致维护成本增加，同时也影响了代码的一致性和可读性。

现有问题具体表现

1. 选中状态判断逻辑重复：每个组件都需要独立实现单选、多选、未选中状态的判断逻辑
2. 类型判断不一致：不同组件对元素类型的判断方式各异，缺乏统一标准
3. 生命周期管理分散：selectCancel、onMounted、onBeforeUnmount 等生命周期逻辑在各个组件中重复实现
4. 代码组织混乱：属性获取和修改的逻辑分散在组件各处，难以维护

解决方案设计

核心思路

通过封装统一的 Hook 来集中管理属性修改相关的通用逻辑，提供标准化的扩展方式，使开发者可以专注于业务逻辑而非基础设施代码。

技术实现方案

1. 统一状态判断 Hook

const { isOne, isGroup, isMultiple, isMatchType, getActiveAttr, canvasEditor } = useSelect();

• isOne: 判断是否为单选状态
• isGroup: 判断选中的是否是组元素
• isMultiple: 判断是否为多选状态
• isMatchType: 类型匹配函数，支持传入多种类型进行匹配
• getActiveAttr: 获取当前选中元素属性的回调函数
• canvasEditor: 提供对画布实例的访问

2. 类型匹配机制

// 匹配文本和矩形元素
const matchType = isMatchType(['text', 'i-text', 'rect'])

这种设计使得类型判断逻辑集中且可配置，便于维护和扩展。

3. 属性管理封装

// 响应式属性定义
const baseAttr = reactive({
  fontSize: 0,
  fontFamily: '',
});

// 属性获取回调
getActiveAttr((activeObject) => {
  if(activeObject && matchType){
    baseAttr.fontSize = activeObject.get('fontSize');
    baseAttr.fontFamily = activeObject.get('fontFamily');
  }
})

// 属性修改函数
const changeCommon = (key, value) => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    activeObject.set(key, value);
    canvasEditor.canvas.renderAll();
  }
};

这种封装将属性管理逻辑集中化，提高了代码的可维护性。

4. 组件模板标准化

<div class="box attr-item-box" v-if="isOne && matchType">
  <Divider plain orientation="left"><h4>字体属性</h4></Divider>
  <InputNumber
    v-model="baseAttr.fontSize"
    @on-change="(value) => changeCommon('fontSize', value)"
    append="字号"
    :min="1"
  ></InputNumber>
</div>

模板中只需关注UI展示和简单的交互绑定，复杂的逻辑都被封装在Hook中。

方案优势

1. 代码复用性：通用逻辑被提取到Hook中，避免重复代码
2. 维护便捷性：修改逻辑只需调整Hook实现，不影响业务组件
3. 一致性保证：所有属性组件遵循相同的实现标准
4. 开发效率：开发者可以快速实现新的属性修改功能
5. 可测试性：核心逻辑集中在Hook中，便于单元测试

实施建议

1. 渐进式重构：先在新组件中使用新方案，再逐步替换旧组件
2. 文档补充：为Hook提供详细的使用文档和示例
3. 类型支持：为Hook添加TypeScript类型定义，提升开发体验
4. 性能优化：在Hook内部考虑添加防抖等优化措施

总结

通过封装通用属性修改Hook，Vue Fabric Editor项目可以显著提升代码质量和开发效率。这种方案不仅解决了当前的问题，还为未来的功能扩展提供了良好的基础架构。这种基于Hook的封装思路也适用于其他需要处理复杂状态和交互的Canvas编辑器项目。