javascript - Fabric.js 中的 Canvas 坐标有偏移

Question

我刚开始使用 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' })
);

});

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

看来， Canvas 原点不在 0/0，而是在某处。更高。

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

提前致谢，麦克法兰

Answer 1

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

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

编辑 这是同一个 fiddle ，但用的是正方形而不是矩形(更清晰)http://jsfiddle.net/pukster/sdQ7U/3/

编辑 好的，我现在几乎可以肯定 fabric.js 使用中心作为 top/left。我撕了他们的example off of their site如果它们是用纯 Canvas 编码的，并用透明的对应部分覆盖它们 http://jsfiddle.net/pukster/uathZ/2/ (蓝色边框是 Canvas 元素的限制)。

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