Fabric.js中的Canvas坐标具有偏移量

Question

我刚开始使用fabric.js而且我有一个（可能是初学者）错误：

我使用带有jquery的fabric，代码如下：

$(document).ready(function () {

canvas = new fabric.StaticCanvas('scroller');

canvas.add(
  new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' })
);

});

此代码应在画布上绘制一个140x100矩形。 可悲的是，只有四分之一的矩形出现。 如果我将顶部和左侧值更改为更高的数字，则画布上会出现更多的矩形。

看起来，画布原点不是0/0，而是......更高。

有人知道如何解决这个或我做错了吗？

提前致谢， 麦克法兰

Answer 1

这是一个jsfiddle链接，其中包含一些示例http://jsfiddle.net/pukster/sdQ7U/2/

我的猜测是，fabric.js计算从原点（中间点）的所有内容，因为它正在绘制矩形的四分之一，即使是使用10倍于矩形大小的画布。我的猜测是top和left实际上是指原点，而不是虚构边界框的顶部和左侧。麻烦的是，关于fabricjs的文档很少。你有没有理由使用fabricjs而不是画架

编辑以下是相同的小提琴，但使用正方形而不是矩形（更清晰）http://jsfiddle.net/pukster/sdQ7U/3/

编辑确定我现在几乎绝对确定fabric.js将中心用作top / left。我撕开了他们的example off of their site并用透明的couterpart覆盖了那些形状，如果用纯帆布http://jsfiddle.net/pukster/uathZ/2/编码它们（蓝色边框是画布元素的极限）。

你看到的是完全偏移了一半但是圆圈（我只画了一个半圆，否则它不会被辨别）是完全重叠的。这是HTML Canvas中的b / c，圆坐标(x,y)指的是原点，而不是左上角。我没有打扰三角形b / c我的三角学有点生疏。我个人认为，当top和left更具代表性和更短时，使用x和y这些术语会产生误导。

Answer 2

是的，这是非常意外的，甚至更加无证。

解决方法：

集

originX: "left"
originY: "top"

为每个创建的对象。

编辑：或在下面的评论中使用kangax simpler解决方案。

Answer 3

我想发表评论但缺乏声誉。所以无论如何，当我执行以下操作时会发生以下情况：

fabric.Object.prototype.originX = "left";
fabric.Object.prototype.originY = "top";

形状变得很好但是当我选择它来调整大小或移动时，它会偏移到另一个位置。最好的方法似乎是使用set（）方法分别设置每个对象的坐标。