Javascript 我可以在织物js中设置内部笔划吗

我正在开发一个fabricjs应用程序&我需要为对象设置一个内部笔划，这意味着在不增加对象大小的情况下将笔划应用于对象

例如，如果我将strokeWidth 20应用于100*100矩形，那么它的大小也会增加，但我想，如果将stroke应用于对象，那么大小也会保持不变

var recta=new fabric.Rect({
左:10,，
前10名，
填写：“#000”，
宽度：100，
身高：100，
});
var rectb=new fabric.Rect({
左：150，
前10名，
填写：“#000”，
宽度：100，
身高：100，
});
canvas.add（recta，rectb）；
rectb.set（'stroke'，'#f00'）；
矩形集（'strokeWidth'，20）；
canvas.renderAll（）

canvas=newfabric.canvas（'design-canvas'）；
假设只针对矩形，最好的方法可能是附加4行，根据矩形x、y、宽度和高度更新位置。然后可以分别设置这些线条的笔划宽度

另一种方法是过于简单地调整所属元素的大小。看看这个

@rtawr，对于矩形，可以这样做，但对于其他形状，如圆形、三角形SVG&ETC或SVG，我们做什么我不确定，但对于圆形或三角形，它将与矩形相同，创建一组线作为形状的“边界”。对于圆，您需要将其近似为一组直线。对于SVG，您可以在原始SVG的下方大致创建另一个版本的SVG，放大一个缩放值，然后将颜色设置为边框颜色，但这不是一个完美的解决方案。
var canvas = new fabric.Canvas('c', { selection: false });

var circle, isDown, origX, origY;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  circle = new fabric.Circle({
    left: pointer.x,
    top: pointer.y,
    radius: 1,
    strokeWidth: 5,
    stroke: 'red',
    selectable: false,
    originX: 'center', originY: 'center'
  });
  canvas.add(circle);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  circle.set({ radius: Math.abs(origX - pointer.x) });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});