6

我刚从 fabric.js 开始，我有一个（可能是初学者）错误：

我正在使用带有以下代码的 jquery 结构：

$(document).ready(function () {

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

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

});

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

因此，画布原点似乎不在 0/0，而是在某处。更高。

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

在此先感谢，麦克法兰

4

3 回答 3

9

这是一个带有一些示例的 jsfiddle 链接http://jsfiddle.net/pukster/sdQ7U/2/

我的猜测是，fabric.js 从原点（中点）计算一切，因为即使画布是矩形大小的 10 倍，它也恰好绘制了矩形的四分之一。我的猜测是，top实际上left指的是原点，而不是假想边界框的顶部和左侧。问题是关于fabricjs 的文档很少。你有什么理由使用fabricjs而不是easeljs

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

编辑好的我现在几乎可以肯定 fabric.js 使用中心作为top/ left。我把他们的例子从他们的网站上撕下来，并用透明的部分覆盖到那些形状上，如果它们是用纯画布编码的http://jsfiddle.net/pukster/uathZ/2/（蓝色边框是画布元素的限制） .

叠加的纯帆布图像

您看到的是，这些框正好偏移了一半，但圆圈（我只画了一个半圆，否则无法辨别）完全重叠。这是 HTML Canvas 中的 b/c，圆坐标(x,y)指的是原点而不是左上角。我没有理会三角形 b/c 我的三角函数有点生锈。我个人认为使用topand left, whenx和y会更具代表性和更短的术语具有误导性。

于 2012-01-11T00:05:13.137 回答
5

是的，这是非常出乎意料的，甚至更没有记录。

解决方法：

放

originX: "left"
originY: "top"

对于每个创建的对象。

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

于 2013-03-19T11:20:21.303 回答
2

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

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

形状渲染得很好，但是当我选择它来调整大小或移动时，它会偏移到不同的位置。最好的方法似乎是使用 set() 方法分别为每个对象设置坐标。

于 2014-01-17T20:47:12.653 回答