动态更新fabric.js路径点
我试图动态地向path对象添加点。当我这样做，路径呈现正确，但边界矩形从来没有得到更新，使用户几乎不可能选择和移动路径在画布上。
正如您在下面的代码中所看到的，路径最初是用一个点创建的，然后我动态地添加了第二个点和一个控制点。完成此操作后，边框将不会更新：
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()，但这并没有什么区别。在向路径添加点后，如何获得边界矩形以更新其维度？
回答 5
Stack Overflow用户
发布于 2015-03-13 22:20:54
结果变得更复杂了。如果将一个点添加到导致_parseDimensions返回负left值的路径中，则路径将跳过屏幕。对于我的用例，在添加和操作点时，我需要路径保持不变。这把小提琴展示了我的工作解决方案：
http://jsfiddle.net/flyingL123/8763bx2q/8/
如果您在打开JS控制台的情况下运行它，您将看到脚本在每个附加点被添加或当前点被操作之后暂停。在这种情况下，您将看到路径不会沿着画布移动，这是所需的行为。在所有断点完成后，您将看到曲线在其选择框中居中。
如果有更简单的方法来实现这种行为，我很想知道。
下面是我用来设置尺寸的函数，以防小提琴链接消失：
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();
}Stack Overflow用户
发布于 2019-10-23 06:32:11
在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()。
Stack Overflow用户
发布于 2015-03-13 09:20:20
请注意，到目前为止，捏造不支持点滴加点。为了使它正常工作，您可以像正在做的那样添加点，然后在每次添加点数时使用内部方法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();看这个更新的小提琴，有必要的代码来解决你的问题。我希望它适用于每一种情况。
https://stackoverflow.com/questions/29011717
复制相似问题
腾讯云开发者
