javascript - 更改对象路径和错误的边界矩形

Question

var canvas = new fabric.Canvas('canvas');
canvas.setWidth(500);
canvas.setHeight(500);
canvas.setBackgroundColor('#ccc');
canvas.allowTouchScrolling = true;

var line = new fabric.Path('M100,350 Q200,100 300,350', {
  fill: '',
  stroke: 'red',
  strokeWidth: 5,
  objectCaching: false
});
var circle = new fabric.Circle({
  radius: 15,
  fill: 'blue',
  lockScalingY: true,
  lockScalingX: true,
  left: 300,
  top: 350
});
canvas.add(line, circle);

canvas.on('object:moving', function(event) {
  var path = canvas.item(0);
  path.path[1][3] = event.target.left;
  path.path[1][4] = event.target.top;
  path.setCoords();
  canvas.calcOffset();
  canvas.renderAll();
});

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<canvas id="canvas"></canvas>

show demo on fiddle

当我移动圆圈时，线的路径会发生变化。更改线路路径后，我看到错误的边界矩形。 我该如何解决？ 我可以删除线并重新创建，但也许有更简单的方法。

Answer 1

您实际上可以重新计算边界框，但您必须自己做。

所以其实比较棘手，需要把当前pathOffset从path中去掉，然后调用内部方法重新计算bbox。

它有效，但作为一种内部方法和不受支持的功能，它可能会在未来发生变化。

var canvas = new fabric.Canvas('canvas');
canvas.setWidth(500);
canvas.setHeight(500);
canvas.setBackgroundColor('#ccc');
canvas.allowTouchScrolling = true;

var line = new fabric.Path('M100,350 Q200,100 300,350', {
  fill: '',
  stroke: 'red',
  strokeWidth: 5,
  objectCaching: false
});
var circle = new fabric.Circle({
  radius: 15,
  fill: 'blue',
  lockScalingY: true,
  lockScalingX: true,
  left: 300,
  top: 350
});
canvas.add(line, circle);

canvas.on('object:moving', function(event) {
  var path = canvas.item(0);
  path.path[1][3] = event.target.left;
  path.path[1][4] = event.target.top;
  path.pathOffset = null;
  path._setPositionDimensions({});
  path.setCoords();
  canvas.calcOffset();
  canvas.renderAll();
});

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<canvas id="canvas"></canvas>