在 fabric js 中绘制外部边界框

Question

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

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

因此边界框将为 50*50

它的绘图适用于 fabricjs 1.5.0，但不适用于较新的版本。我想在边界框外绘制，我该如何实现？

Answer 1

只需更改此...

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 2

我也遇到了同样的问题。在我的例子中，我试图在矩形的边界框外画线。我已经从其他示例中验证了在新版本的 fabric js 中不可能这样做。这是有道理的，因为它可能会导致一些其他问题。因此，您必须弄清楚其他事情。就我而言，我正在使用路径来满足我的要求。

Answer 3

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

在 fabric js 中绘制外部边界框

Draw outside bounding box in fabric js

javascript

fabricjs