Angular基于Fabric.js实现类PS图层管理 可拖拽排序列表方案咨询

首选方案：@angular/cdk/drag-drop #

• Angular 官方维护的 CDK 套件内置能力，和 Angular 生态100%兼容，无额外第三方依赖冲突风险
• 原生支持列表项拖拽排序、自定义拖拽锚点、拖拽占位符样式，完全匹配 PS 风格图层列表的交互需求
• 拖拽结束回调可直接获取列表索引变化，仅需在回调内调用 Fabric.js 原生图层操作API（moveTo()/sendToBack()/bringToFront()）即可同步画布层级，对接成本极低
• 内置无障碍适配，无需额外处理兼容性问题

备选方案：ngx-sortablejs #

• 基于成熟的 SortableJS 封装的 Angular 版本，轻量易集成，内置流畅的拖拽动画，对移动端多点触控适配更友好
• 同样支持输出排序后的列表顺序，对接 Fabric.js 层级同步的逻辑和 CDK 方案一致，适合项目中已有 SortableJS 使用经验的场景
• 注意安装时匹配当前项目的 Angular 版本，避免出现运行时兼容错误

核心逻辑示例代码 #

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Canvas, Object } from 'fabric';

// 初始化时维护和画布元素一一对应的图层列表
layerList: Object[] = [];
fabricCanvas: Canvas;

// 拖拽完成回调
onLayerDrop(event: CdkDragDrop<Object[]>) {
  // 先更新图层列表顺序
  moveItemInArray(this.layerList, event.previousIndex, event.currentIndex);
  // 同步画布元素层级：列表顶部对应画布最上层，注意索引映射逻辑
  this.layerList.forEach((layer, index) => {
    this.fabricCanvas.moveTo(layer, this.layerList.length - 1 - index);
  });
  this.fabricCanvas.renderAll();
}

注意事项：建议将手动维护的图层列表作为唯一数据源，不要直接操作 Fabric.js 内部的 _objects 数组，避免出现列表和画布层级不同步的问题。

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