Question

选中此fiddle设置宽度和高度以圈选对象：

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

所以边界框将为50 * 50

它对fabricjs 1.5.0的绘图很好，但在较新的版本中没有。我想画外边框，我怎么能实现呢？

Answer 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来获得所需的效果。

Answer 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/。

Answer 3

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

在面料js中绘制外部边界框

3 个答案: