Fabric.js添加简单路径不起作用

Question

我正在尝试使用Farbic.js创建一个简单的路径对象。 将路径添加到画布后，它似乎没有正确定位。 这是我的代码：

HTML

<canvas id="c" height="300" width="300"></canvas>

JS

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = '#f5f5f5';
var line = new fabric.Path('M 0 0 L 100 100',{
    stroke: 'black',
    fill: ''
});
canvas.add(line);

根据我传递的数据，路径应从0,0点开始，并画一条线到100，100点。但是，实际上我的线位于50,50点，如警报所示。

为什么路径不是从点0,0开始？

这是一个小提琴： http : //jsfiddle.net/flyingL123/h14th5pf/3/

Answer 1

您可以显式指定路径的位置属性。

line.set({top: 0, left: 0});

默认情况下，Fabric.JS似乎根据行长和画布大小包括某种计算出的填充。 尝试调整画布尺寸和线长，您会看到top和left值会自动更新。

编辑 ：似乎Fabric.JS可以使用画布的中心来计算画布的X,Y位置。 它可以对路径原点使用类似的方案。 请参阅以下相关的StackOverflow问题：

Fabric.js中的画布坐标具有偏移

这似乎是图书馆如何自动计算位置的一部分。 根据链接问题的评论，您可以使用以下方法解决此问题：

fabric.Object.prototype.originX = true; 
fabric.Object.prototype.originY = true;

而且您不必调整每个路径对象上的originX或originY属性。