画布上的SVG路径位置

Question

我有像波纹管一样的简单路径。据我了解，它应该坚持画布的左上角。但是我把它放在中间的某个地方。结果，我所渲染的所有路径似乎都从原来的位置转移。我错过了非常明显的东西吗？我使用fabric.js进行所有画布操作。任何线索都非常赞赏。

path1 = new fabric.Path('M 0 0 L 300 100 L 200 300 z');

Answer 1

虽然Fabric gotchas状态：

左/顶所有对象（包括基团）的值对应于一个对象的中心，并且相对于顶部帆布的/左上角。基于中心的原点是默认的，但您可以通过对象的originX/originY属性对其进行更改。

这不是问题所在。因为路径并不总是居中。

问题是定位path s：bug #1363中的一个错误。

该错误修复已完成，但不幸的是，这并不是他们最新版本（1.4.11）的一部分。所以我认为你有两种选择：

1. 将Fabric的版本升级到latest in their master branch。 （即未发布代码：可能不稳定）
2. 解决方法它。

而要解决它，您可以设置为零要么left和top或originX和originY。

例如有：

var path1 = new fabric.Path('M -100 0 L 50 0 L 100 100 z'); 
path1.set({ left: 0, top: 0 }); 

或者：

var path1 = new fabric.Path('M -100 0 L 50 0 L 100 100 z', {originX: 0, originY: 0}); 

您可以在这里测试代码：http://jsfiddle.net/protron/6qc5vsbj/3/