FabricJS:如何获取更新路径的位置

FabricJS: How to get the positions of an updated path

本文关键字：更新 路径 位置 获取 何获取 FabricJS      更新时间：2023-09-26

我正在使用Fabric js创建一些视觉元素。在我的项目中，路径正在更新。但问题是，这条路径的测量结果与预期不符。

参考jsFiddle

var canvas = new fabric.Canvas('c', {width: 400, height: 400});
var line = new fabric.Path('M,50,50,L,50,150,150,150,150,50,Z', {            
    fill: 'blue'
});
line.setCoords();
// During update
line.initialize('M,150,50,L,150,150,300,150,300,50,Z')
line.setCoords();
canvas.renderAll();

在示例中，路径最初是在距离画布左边框50px的地方绘制的。然后我改变了路径命令，使它向右移动100px。

但是在更新路径后，形状实际上位于距离左侧175px的位置。此外，path元素的left属性也不会改变。

而且，我无法理解所有这些属性和它们之间的关系，left, top, scaleX, scaleY, height, width, pathOffset, ocods, originalState等在各种条件下，如路径/画布缩放，旋转，移动，放置在一个组中等

我不确定你想要实现什么，但initialize方法不是一个更新方法，但它是类的构造函数，你实际上覆盖了初始对象的路径。

如果你只是想移动你原来创建的路径，你应该玩Path对象的left, top属性，就像在这个更新的fiddler

相关文章：