Fabric.js中ActiveSelection与strokeUniform属性的边界框问题解析

问题背景

在Fabric.js 6.0.0-beta19版本中，当使用ActiveSelection组合多个设置了strokeUniform属性的对象并进行缩放操作时，会出现边界框计算不准确的问题。这个问题特别容易在以下场景中出现：

1. 多个图形对象设置了strokeUniform: true
2. 这些对象被组合成一个ActiveSelection
3. 对组合后的对象进行缩放操作

现象描述

在初始状态下，ActiveSelection的边界框显示是正确的，能够完美包裹所有子对象。然而当进行缩放操作后，边界框会变得比预期大，不再准确反映子对象的实际尺寸。具体表现为：

• 缩放前：边界框紧贴子对象边缘
• 缩放后：边界框与子对象之间出现明显间隙

技术分析

这个问题的根源在于ActiveSelection的边界框计算没有充分考虑子对象的strokeUniform属性。在Fabric.js中：

1. strokeUniform属性用于保持描边宽度不受对象缩放影响
2. 当单独对象缩放时，strokeUniform能正常工作
3. 但在ActiveSelection中，边界框计算仍然按照普通缩放逻辑进行

本质上，这是strokeUniform特性在组合对象场景下的局限性表现。Fabric.js核心开发成员认为strokeUniform本身可能是一个设计上的妥协方案，因为它改变了常规的图形变换行为。

解决方案探讨

目前可行的解决方案包括：

1. 使用performLayout方法：通过强制重新布局来修正边界框位置
2. 自定义控制点处理器：重写缩放控制点的行为逻辑

一个典型的自定义处理器实现思路是：

const wrapWithLayouting = (actionHandler) => {
  return (eventData, transform, x, y) => {
    const { target, originX, originY } = transform;
    const centerPoint = target.getRelativeCenterPoint();
    const constraint = target.translateToOriginPoint(centerPoint, originX, originY);
    const actionPerformed = actionHandler(eventData, transform, x, y);
    
    if (target.triggerLayout) {
      target.triggerLayout();
      target.setPositionByOrigin(constraint, transform.originX, transform.originY);
    } 
    return actionPerformed;
  };
};

最佳实践建议

对于需要保持描边宽度不变的场景，建议考虑以下替代方案：

1. 对于基本图形（圆形、矩形等），直接调整其几何属性（如半径、宽高）而非缩放
2. 对于复杂路径，考虑重写缩放逻辑来保持描边宽度
3. 在必须使用strokeUniform的情况下，注意其局限性并做好边界框的后期修正

总结

Fabric.js中的strokeUniform属性在单独对象上表现良好，但在组合对象场景下会带来边界框计算问题。开发者需要根据具体需求权衡使用，或采用自定义解决方案来处理特殊情况。理解这一机制有助于在复杂场景下做出更合理的设计决策。