我可以在布料js中设置内部笔划

Question

我正在使用fabricjs应用程序,我需要将内部笔划设置为对象,这意味着将笔划应用于对象而不增加其大小.

例如,如果我将strokeWidth 20应用于100*100 rect,那么它的大小也会增加,但我想如果笔划应用于对象那么大小也将保持不变

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