我正在尝试动态地向路径对象添加点。当我这样做时,路径会正确呈现,但边界矩形永远不会更新,这使得用户几乎不可能在 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/
最佳答案
在 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()
。
关于javascript - 动态更新 fabric.js 路径点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29011717/