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问题：

Canvas coordinates in Fabric.js have offset

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

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

您无需调整每个路径对象上的originX或originY属性。

Fabric.js添加简单路径无法正常工作

1 个答案: