动态更新 fabric.js 个路径点

Question

我正在尝试动态地向路径对象添加点。当我这样做时，路径呈现正确，但边界矩形永远不会更新，这使得用户几乎不可能 select 并将路径移动到 canvas.

正如您在下面的代码中看到的，路径最初是用一个点创建的，然后我动态添加了第二个点和一个控制点。这样做之后，边界矩形永远不会更新：

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = '#f5f5f5';
var path = new fabric.Path('M 0 20',{
    left: 100,
    top: 100,
    stroke: 'black',
    fill: ''
});

canvas.add(path);

var commandArray = [];
commandArray[0] = 'Q';
commandArray[1] = 50;
commandArray[2] = 100;
commandArray[3] = 100;
commandArray[4] = 20;

path.path[1] = commandArray;

canvas.renderAll();

我也试过调用 path.setCoords()，但没有任何区别。向路径添加点后如何让边界矩形更新其尺寸？

这里是 fiddle：http://jsfiddle.net/flyingL123/17ueLva2/2/

Answer 1

请注意，fabricjs 目前不支持动态添加点。要使其正常工作，您可以像现在这样添加点，然后每次添加点并希望更新边界框尺寸时使用内部方法 path._parseDimensions()。

var dims = path._parseDimensions();
path.setWidth(dims.width);
path.setHeight(dims.height);
path.pathOffset.x = path.width/2;
path.pathOffset.y = path.height/2;
path.setCoords();

看看这个更新后的 fiddle，它包含解决您的问题所需的代码。我希望它适用于所有情况。

http://jsfiddle.net/17ueLva2/6/

Answer 2

结果变得更复杂了。如果将一个点添加到导致 _parseDimensions 返回负值 left 的路径，则该路径将在屏幕上跳跃。对于我的用例，我需要在添加和操作点时将路径留在原地。 fiddle 显示了我的工作解决方案：

http://jsfiddle.net/flyingL123/8763bx2q/8/

如果在打开 JS 控制台的情况下运行它，您会看到脚本在添加每个附加点或操作当前点后暂停。当发生这种情况时，您会看到路径不会沿着 canvas 移动，这是所需的行为。所有断点完成后，您会看到曲线在其选择框内居中。

如果有更简单的方法来实现此行为，我很想知道。

这是我用来设置尺寸的函数，以防 fiddle link 消失：

function updateDims() {
    var dims = path._parseDimensions(),
        prevDims = path.prevDims || {},
        leftDiff = dims.left - (prevDims.left || 0),
        topDiff = dims.top - (prevDims.top || 0);

    path.setWidth(dims.width);
    path.setHeight(dims.height);

    if (dims.left < 0) {
        path.pathOffset.x = path.width/2 + dims.left;
        path.left = path.left + leftDiff;
    } else {
        path.pathOffset.x = path.width/2;
    }

    if (dims.top < 0) {
        path.pathOffset.y = path.height/2 + dims.top;
        path.top = path.top + topDiff;
    } else {
         path.pathOffset.y = path.height/2;   
    }

    path.prevDims = dims;
    path.setCoords();
}

Answer 3

我找不到任何新方法来执行此操作。但我想出了类似下面的东西；

创建经过修改的 SVG 路径字符串。
创建一个新的结构路径对象。
用新路径对象的属性替换原始路径对象的路径、宽度、高度和路径偏移量属性。
设置坐标。 renderAll 等...

效率可能不高。但这对我来说是解决方案。

    var pathObject = new fabric.Path("M0,0 L100,100 ~ Z");

    var updatedPath =  new fabric.Path("M50,100 L120,46 ~ Z");

    pathObject.set({
      path : updatedPath.path,
      width : updatedPath.width,
      height : updatedPath.height,
      pathOffset: updatedPath.pathOffset
    });
    pathObject.setCoords();

在我的设置中，它说 path._parseDimensions 不是函数。我没有尝试解决它。我必须更改所有路径内容。所以我的解决方案对我来说似乎更好:)

Answer 4

在fabric 3.3.2中我结合上面的答案解决了它：

var dims = path._calcDimensions()
path.set({
  width: dims.width,
  height: dims.height,
  left: dims.left,
  top: dims.top,
  pathOffset: {
    x: dims.width / 2 + dims.left,
    y: dims.height / 2 + dims.top
  },
  dirty: true
})
path.setCoords()

这会在添加如下点后正确更新我的路径边界框：

path.set({path: points})

虽然我不确定这是否适用于负的顶部和左侧值，但在我的情况下我不需要它。我想主要是 _parseDimensions() 方法被重命名为 _calcDimensions().

Answer 5

结构 4.6.0

如果您查看 Path 的构造函数，它会调用

fabric.Polyline.prototype._setPositionDimensions.call(this, options);

最后。其中 this 是您的路径，options 是您的路径构造函数的第二个参数。在每个路径上调用上面的方法就足够了 addition/removal 来更新位置和边界。

动态更新 fabric.js 个路径点

Update fabric.js Path points dynamically

javascript

svg

fabricjs