在织物js中绘制外部边界框答案

【问题标题】：Draw outside bounding box in fabric js在织物js中绘制外部边界框
【发布时间】：2023-03-22 13:52:02
【问题描述】：

检查此fiddle 将宽度和高度设置为圆形对象：

circle.set({ radius: Math.abs(origX - pointer.x), width : 50,height :50 });

所以边界框将是 50*50

fabricjs 1.5.0 的绘图很好，但在较新的版本中不行。我想在边界框外绘制，如何实现？

【问题讨论】：

我在下面的回答有帮助吗？
@TimHarker 对不起，这不是我要找的，你也不需要设置宽度高度，它会起作用，因为它根据半径设置宽度和高度。但问题是在新版本中，它不会在选择区域之外绘制
@Durga 你有没有想过这个！我也有同样的问题。哇，在我意识到这是在 1.5.0 之后的某个时间发生变化之前，我浪费了很多时间
@byoungb 还是有问题，需要换一个旧的，否则需要按照新的写
@byoungb 你可以把objectCaching: false 画出来

标签： javascript fabricjs

【解决方案1】：

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',
    objectCaching : 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), width : 50,height :50 });
  canvas.renderAll();
});

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

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

使用objectCaching:false 来获得想要的效果。

【讨论】：

【解决方案2】：

只要改变这个...

circle.set({ radius: Math.abs(origX - pointer.x), width : 50,height :50 });

到这里……

var newAbsValue = Math.abs(origX - pointer.x);
circle.set({ radius: newAbsValue, width : newAbsValue * 2, height : newAbsValue * 2 });

您的 JSFiddle 已更新，http://jsfiddle.net/rekrah/8rb8Lahb/。

【讨论】：

我想要其他形状，而不是圆形...我想要像以前的版本一样，因为它是在边界框之外绘制的。

【解决方案3】：

我也遇到了同样的问题。就我而言，我试图在矩形边界框之外画线。我已经从其他示例中验证了在新版本的fabric js 中不可能做到这一点。这是有道理的，因为它可能会导致其他一些问题。所以，你必须想出别的办法。就我而言，我正在使用路径来满足我的要求。

【讨论】：

添加objectCaching: false到你的矩形对象，它会绘制