Ext JS 6.0中能否无需fabric.js开发交互式图像编辑器？

嘿，作为长期用Ext JS做项目的开发者，我来帮你拆解这个问题：

首先明确说：不用fabric.js，纯Ext JS完全可以实现你要的这些功能，但实现难度和开发成本会比直接用fabric.js高不少，下面分功能给你细说：

1. 基础功能：拖拽添加/移除自定义形状 → 相对容易 #

Ext JS本身有成熟的拖拽体系（Ext.drag.Source、Ext.drag.Target），再配合Ext.draw.Component绘图组件，你可以：

• 把自定义形状（比如矩形、圆形，用Ext.draw.Sprite定义）作为拖拽源
• 把画布（Ext.draw.Component的实例）设为拖拽目标，监听拖拽结束事件，在对应位置添加新的Sprite
• 移除形状更简单，直接调用Sprite的destroy()或者从绘图组件的items里移除即可

这部分Ext JS的API封装得很完善，只要熟悉拖拽和绘图组件的基本用法，很快就能搭出雏形。

2. 形状编辑：调整大小、旋转 → 中等难度 #

这部分需要自己处理鼠标交互逻辑，但Ext JS也有工具可以借力：

• 调整大小：可以给每个形状添加控制点（小矩形Sprite），监听控制点的拖拽事件，计算拖拽距离来更新形状的width/height或者scale属性；也可以尝试复用Ext.resizer.Resizer组件，但需要适配到绘图元素上
• 旋转：同样需要添加旋转控制点，监听鼠标移动计算角度，然后更新形状的rotation属性，这里要注意旋转中心点的设置（默认是图形左上角，可能需要改成中心）

这部分没有现成的开箱即用组件，需要自己封装交互逻辑，但Ext JS的事件系统和绘图属性足够支撑，只要理清坐标变换的逻辑，实现起来不算太棘手。

3. 分组/取消分组 → 中等难度 #

Ext JS的Ext.draw.Container可以作为图形的容器，你可以：

• 分组时：选中多个形状，把它们从原来的容器移到新的Ext.draw.Container里，之后操作这个容器就能同步控制所有子形状的位置、变换
• 取消分组时：把容器里的形状移回根绘图容器，再销毁这个分组容器

核心是管理图形的层级和归属，逻辑上比较清晰，主要需要处理选中状态的管理和容器的增删操作。

4. 像素级操作 → 难度较高 #

这是纯Ext JS实现最麻烦的部分：
Ext JS的绘图组件底层是SVG或Canvas，但高层API主要是面向图形元素的，没有直接封装像素操作。如果要做像素级处理，你需要：

• 获取Ext.draw.Component对应的canvas元素（通过getSurface().getElement()）
• 拿到Canvas 2D上下文，用原生的getImageData()、putImageData()等API来操作像素
• 还要处理像素操作和现有图形元素的同步（比如修改像素后如何更新绘图组件的显示）

这部分基本要靠原生Canvas API来实现，Ext JS只能提供容器和基础的渲染能力，需要你有原生Canvas的知识储备。

最后给你的建议 #

如果项目时间充裕，且你想深度定制编辑器的行为，纯Ext JS是可行的；但如果追求开发效率，更推荐把fabric.js和Ext JS结合使用——你可以在Ext JS的面板里嵌入fabric的canvas，用Ext JS做界面框架（比如工具栏、侧边栏），用fabric.js处理绘图逻辑，这样既能利用Ext JS的UI组件优势，又能复用fabric.js成熟的绘图功能，省掉很多造轮子的时间。

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