如何在不改变原始尺寸的情况下为FabricJS对象（首选矩形）设置边框

嗨，我之前在FabricJS里做多矩形布局的时候也遇到过一模一样的困扰！用默认的stroke会把对象撑大，borderColor又只有选中才显示，还好FabricJS本身就有内置的解决方案，不用额外加元素，完全满足你的需求。

核心就是利用strokeUniform这个属性，它能让边框完全绘制在对象内部，不会向外扩展改变原始尺寸。具体操作步骤如下：

• 给矩形设置stroke属性定义边框颜色，比如'#333'
• 设置strokeWidth来控制边框的粗细，比如2
• 关键开启strokeUniform: true——这一步是让边框不“溢出”对象边界的核心

举个实际的代码例子，创建一个50x50的矩形，添加不改变尺寸的黑色边框：

// 创建画布实例（假设你已经初始化了canvas）
const rect = new fabric.Rect({
  width: 50,
  height: 50,
  fill: '#f0f0f0',
  stroke: '#000',
  strokeWidth: 2,
  strokeUniform: true // 必须开启这个属性！
});
canvas.add(rect);

原理说明： #

FabricJS默认的stroke绘制逻辑是居中于对象边界——也就是一半边框在对象内部，一半在外部，所以对象的实际渲染尺寸会变成width + strokeWidth和height + strokeWidth。而开启strokeUniform: true后，整个stroke都会被限制在对象的原始宽高范围内，完全不会影响对象的尺寸属性，也不会改变它在画布上的布局位置。

如果需要虚线边框的话，还可以额外添加strokeDashArray属性，比如strokeDashArray: [4, 2]，同样不会影响尺寸：

const dashedRect = new fabric.Rect({
  width: 50,
  height: 50,
  fill: '#f0f0f0',
  stroke: '#000',
  strokeWidth: 2,
  strokeUniform: true,
  strokeDashArray: [4, 2] // 虚线样式
});
canvas.add(dashedRect);

另外再提一句，你之前试的borderColor是用来设置对象选中时的选控框颜色，只有当对象处于选中状态时才会显示，并不是永久的边框，所以不符合你的需求。

这个方案完全不需要创建额外的线条或包裹矩形，也不会修改对象的原始尺寸，完美适配多相邻矩形的区分场景！

内容的提问来源于stack exchange，提问作者Abhijit Roy