Fabric JS中是否可以设置内描边？

Question

我正在开发一个基于fabricjs的应用程序，需要为对象设置内部描边，即在不增加其大小的情况下对对象应用描边。

例如，如果我将strokeWidth设置为20，则100*100的矩形的大小也会增加，但是我希望如果应用描边，则对象的大小仍然保持不变。

var recta = new fabric.Rect({
        left: 10,
        top: 10,
        fill: '#000',
        width: 100,
        height: 100,
        
    });

var rectb = new fabric.Rect({
        left: 150,
        top: 10,
        fill: '#000',
        width: 100,
        height: 100,
        
    });
    canvas.add(recta, rectb);
rectb.set('stroke', '#f00');
rectb.set('strokeWidth', 20);
canvas.renderAll();

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas style="border:#000 1px solid" id="design-canvas" width="500" height="400">
<script type="text/javascript">
canvas = new fabric.Canvas('design-canvas');
    </script>

有没有什么方法或技巧可以在不增加大小的情况下应用描边？

提前感谢。

- Dinesh

Answer 1

假设只涉及矩形，最好的方法可能是附加4条线，根据该矩形的x、y、宽度和高度更新这些线的位置。然后可以单独设置这些线的描边宽度。

另一种方法是简单地调整所属元素的大小。请参阅JSFiddle。

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;
});

- RT Roe

---

@rtawr，针对矩形这个问题可以解决，但是对于其他形状如圆形、三角形SVG等怎么办呢？ - Dinesh

对于SVG我不确定，但对于圆形或三角形，与矩形相同，需要创建一组线条作为形状的“边框”。对于圆形，您需要将其近似为一组线条。对于SVG，您可以在原始版本下大致创建另一个版本，通过缩放值进行放大，并将颜色设置为边框颜色。虽然这不是完美的解决方案。 - RT Roe