Fabric.js中ActiveSelection分组选择时中心点偏移问题解析

问题背景

在使用Fabric.js 6.0.0-beta18版本时，开发者发现当将ActiveSelection的originX和originY属性设置为'center'时，通过鼠标拖拽选择多个对象进行分组时，分组后的位置会出现偏移问题。这个问题特别出现在使用中心点作为基准点的场景下。

问题现象

当两个矩形对象(rect1和rect2)都设置了originX和originY为'center'时：

• rect1: {left: 150, top: 150, width: 60, height: 60}
• rect2: {left: 250, top: 250, width: 60, height: 60}

初始状态下显示正常，但当通过鼠标拖拽选择这两个矩形进行分组时，分组后的ActiveSelection位置会发生偏移。而如果保持ActiveSelection的originX和originY为默认的'left'和'top'，则分组位置正确。

技术分析

核心问题定位

通过调试发现，问题出在LayoutStrategy.cs的calcBoundingBox方法中。虽然该方法能正确计算出bboxCenter，但在经过originFactor转换后，中心点位置出现了偏差。

两种分组方式的差异

1. 鼠标拖拽选择方式：会触发位置偏移问题
2. Shift+点击选择方式：不会出现位置偏移，能正确保持分组位置

这表明问题与ActiveSelection的初始化方式有关，特别是在通过鼠标拖拽创建分组时的计算逻辑存在缺陷。

解决方案

临时解决方案

开发者可以通过修改ActiveSelection的ownDefaults属性来全局设置originX和originY为'center'，而不需要子类化：

fabric.ActiveSelection.ownDefaults.originX = 'center';
fabric.ActiveSelection.ownDefaults.originY = 'center';

根本解决方案

需要在LayoutStrategy.cs中修正中心点计算逻辑，特别是在处理originFactor转换时，确保对于origin为'center'的情况能正确保持位置。

最佳实践建议

1. 如果项目需要大量使用中心点作为基准的分组操作，建议暂时保持ActiveSelection的origin为默认值(left/top)
2. 对于必须使用中心点基准的场景，可以采用Shift+点击的选择方式替代鼠标拖拽
3. 关注Fabric.js后续版本更新，该问题已被标记为bug并受到维护者关注

总结

这个问题揭示了Fabric.js在处理不同origin基准点时的边界情况。理解这一机制有助于开发者更好地控制分组行为，特别是在需要精确定位的场景下。虽然目前有临时解决方案，但期待官方能尽快修复这一计算逻辑问题。