javascript - 我可以在 fabric js 中设置内部笔画吗

Question

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

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

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>

有没有什么方法或技巧可以在不增加尺寸的情况下应用笔触

提前致谢

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