Fabric.js 文本框缩放时的宽度取整问题分析

问题现象

在Fabric.js项目中，当用户对Textbox对象进行水平方向缩放时，特别是在画布放大状态下，可以观察到文本框宽度变化不连续的现象。这种"阶梯式"的宽度变化使得缩放操作显得不够平滑，影响用户体验。

技术背景

Fabric.js是一个功能强大的Canvas库，提供了丰富的图形对象操作功能。其中Textbox对象允许用户创建可自动换行的文本框，并支持交互式缩放。在实现缩放功能时，库需要处理画布坐标系转换、对象变换计算等复杂逻辑。

问题根源

通过代码分析发现，问题出在Textbox对象的宽度计算逻辑中。在_setWidth方法中，新宽度的计算使用了Math.ceil函数进行向上取整：

newWidth = Math.ceil(
  Math.abs((localPoint.x * multiplier) / target.scaleX) - strokePadding
);

这种取整操作在常规缩放比例下不易察觉，但当画布放大时，由于每个像素的变化都被放大，取整导致的宽度跳跃就变得非常明显。

解决方案探讨

1. 直接移除取整操作：最简单的解决方案是直接移除Math.ceil调用，让宽度计算保持浮点精度。这能确保缩放过程完全平滑。

2. 引入亚像素渲染支持：更完善的解决方案是考虑Canvas的亚像素渲染能力，允许对象以非整数尺寸渲染，同时保持视觉效果的平滑。

3. 动态取整策略：可以根据当前缩放比例动态调整取整粒度，在放大时使用更精细的取整单位。

实现建议

对于大多数应用场景，直接移除Math.ceil调用是最简单有效的解决方案。Canvas本身支持浮点数坐标渲染，现代浏览器也能很好地处理亚像素渲染。这种修改不会影响Textbox的核心功能，同时能显著改善用户体验。

注意事项

修改后需要进行全面测试，特别是：

• 不同缩放比例下的渲染效果
• 与其他变换操作(旋转、倾斜)的交互
• 边界情况处理(最小/最大尺寸限制)
• 跨浏览器一致性

这种修改属于行为优化，不会破坏现有API的兼容性，适合通过Pull Request贡献到主项目。