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.我把他们的例子从他们的网站上剥下来并用透明的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更简单的解决方案.