Fabric.js 組中對象的填充被重置

Question

版本

4.2.0

測試用例

https://jsfiddle.net/dellvolk/c8zas7th/12/

let optObj = {
    width: 300,
    height: 300,
    backgroundColor: "rgba(255,255,0,0.5)",
  }
let canvas = new fabric.Canvas('c', optObj);

const stroke = {
  stroke: 'red',
  strokeWidth: 10,
}

const rect1 = new fabric.Rect({
    left: 30,
  top: 30, 
  ...stroke,
  width: 100,
  height: 100,
  fill: 'blue',
  padding: -stroke.strokeWidth,
  borderColor: '#000',
})

const rect2 = new fabric.Rect({
    left: 130,
  top: 130, 
  ...stroke,
  width: 100,
  height: 100,
  fill: 'green',
  padding: -stroke.strokeWidth,
  borderColor: '#000',
})

fabric.Object.prototype.padding = -10;

canvas.add(rect1);
canvas.add(rect2);

預期行為

當對象形成組填充時，我需要它。 我不需要為組設置填充。 僅適用於該組中的元素。 組的筆畫保持原樣，組元素的黑色筆畫就像元素本身的填充一樣

實際行為

對象中的內邊距為 -10，但當它們形成組時，內邊距變為 0

Answer 1

處理組中對象的邊框大小計算的方法是drawBordersInGroup （參見http://fabricjs.com/docs/fabric.Object.html#drawBordersInGroup ）。

以下應作為此方法的替代品，以便將填充因素考慮到大小計算中：

https://jsfiddle.net/melchiar/bw384o2n/

//drop in replacement for drawBordersInGroup method
fabric.Object.prototype.drawBordersInGroup = function(ctx, options, styleOverride) {
  styleOverride = styleOverride || {};
  var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options),
    strokeWidth = this.strokeWidth,
    strokeUniform = this.strokeUniform,
    //borderScaleFactor = this.borderScaleFactor,
    //adds object padding to border scale calculation
    borderScaleFactor = this.borderScaleFactor + this.padding * 2,
    width =
    bbox.x + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleX) + borderScaleFactor,
    height =
    bbox.y + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleY) + borderScaleFactor;
  ctx.save();
  this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray, null);
  ctx.strokeStyle = styleOverride.borderColor || this.borderColor;
  ctx.strokeRect(
    -width / 2,
    -height / 2,
    width,
    height
  );
  ctx.restore();
  return this;
};