Fabric.js如何去除选区框内边距并格式化？缩放后仍存在内边距

我懂你想要的效果——让Fabric.js的选区框完全贴合对象，就像Inkscape那样紧紧包裹住图形，没有多余的内边距。之前直接设置padding: 0没解决问题，甚至缩放后内边距更明显，这是因为Fabric.js的选区框和控件布局逻辑不只是靠padding这一个属性控制，得从边界计算、控件定位的底层逻辑入手调整。

下面是具体的解决方案，直接覆盖Fabric.js对象的几个核心方法，就能彻底去掉内边距：

// 重写边界计算方法，完全移除padding的影响，只考虑对象本身和描边
fabric.Object.prototype._getLeftTopCoords = function() {
  const strokeWidth = this.strokeWidth;
  const scaleX = this.scaleX, scaleY = this.scaleY;
  // 计算真实的边界：包含描边宽度的缩放值
  const x = this.left - (strokeWidth / 2) * scaleX;
  const y = this.top - (strokeWidth / 2) * scaleY;
  const w = this.width * scaleX + strokeWidth * scaleX;
  const h = this.height * scaleY + strokeWidth * scaleY;
  
  return {
    tl: new fabric.Point(x, y),
    tr: new fabric.Point(x + w, y),
    bl: new fabric.Point(x, y + h),
    br: new fabric.Point(x + w, y + h)
  };
};

// 调整控件的位置偏移，让控件贴紧对象边缘（包括描边外侧）
fabric.Object.prototype._getControlOffset = function(control) {
  const size = this.cornerSize;
  const strokeWidth = this.strokeWidth;
  const offset = { x: 0, y: 0 };
  
  switch (control) {
    case 'tl':
      offset.x = -(size / 2 + strokeWidth / 2 * this.scaleX);
      offset.y = -(size / 2 + strokeWidth / 2 * this.scaleY);
      break;
    case 'tr':
      offset.x = size / 2 + strokeWidth / 2 * this.scaleX;
      offset.y = -(size / 2 + strokeWidth / 2 * this.scaleY);
      break;
    case 'bl':
      offset.x = -(size / 2 + strokeWidth / 2 * this.scaleX);
      offset.y = size / 2 + strokeWidth / 2 * this.scaleY;
      break;
    case 'br':
      offset.x = size / 2 + strokeWidth / 2 * this.scaleX;
      offset.y = size / 2 + strokeWidth / 2 * this.scaleY;
      break;
    case 'mt':
      offset.y = -(size / 2 + strokeWidth / 2 * this.scaleY);
      break;
    case 'mb':
      offset.y = size / 2 + strokeWidth / 2 * this.scaleY;
      break;
    case 'ml':
      offset.x = -(size / 2 + strokeWidth / 2 * this.scaleX);
      break;
    case 'mr':
      offset.x = size / 2 + strokeWidth / 2 * this.scaleX;
      break;
  }
  return offset;
};

// 重写控件绘制逻辑，基于新的边界坐标渲染选区框和控件
fabric.Object.prototype.drawControls = function(ctx) {
  if (!this.hasControls) return;
  const size = this.cornerSize;
  const coords = this._getLeftTopCoords();
  
  ctx.save();
  // 绘制角落和边缘控件
  ctx.strokeStyle = this.cornerStrokeColor;
  ctx.fillStyle = this.cornerColor;
  ctx.lineWidth = this.cornerStrokeWidth;
  
  ['tl', 'tr', 'bl', 'br', 'mt', 'mb', 'ml', 'mr'].forEach(control => {
    const offset = this._getControlOffset(control);
    const point = coords[control];
    ctx.beginPath();
    ctx.rect(
      point.x + offset.x - size / 2,
      point.y + offset.y - size / 2,
      size,
      size
    );
    ctx.fill();
    ctx.stroke();
  }, this);
  
  // 绘制选区边框
  ctx.strokeStyle = this.borderColor;
  ctx.lineWidth = this.borderWidth;
  ctx.strokeRect(coords.tl.x, coords.tl.y, coords.br.x - coords.tl.x, coords.br.y - coords.tl.y);
  ctx.restore();
};

代码说明： #

1. _getLeftTopCoords：这个方法负责计算选区框的四个顶点坐标，我们去掉了原本默认加入的padding值，只计算对象本身的宽高、缩放比例和描边宽度，确保边界完全贴合对象。
2. _getControlOffset：调整每个缩放/旋转控件的位置，让它们刚好对齐到对象的边缘（如果有描边，会自动考虑描边的宽度），不会出现偏移。
3. drawControls：基于新的边界坐标重新绘制选区框和控件，确保渲染出来的效果和计算的边界一致。

如果你的对象没有描边，可以把代码里所有和strokeWidth相关的部分删掉，这样选区框会完全贴紧对象的像素边缘，和Inkscape的效果完全一致。

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