画布Fabric.js坐标已抵消了

我刚开始fabric.js和我有一个（可能是初学者）错误：画布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的矩形。不幸的是，只有四分之一的矩形出现。如果我将顶部和左侧的值更改为更高的数字，则更多的矩形出现在画布上。

所以看来，画布的起源不是在0/0，而是在某处。更高。

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

由于提前，麦克法兰

来源

2012-01-10 McFarlane

嗨McFarlane =）欢迎来到SO。无论何时发布代码，如果您在jsfiddle.net上发布完整（或最少的代码示例）代码，只要去那里，粘贴代码并保存，并将链接粘贴回来即可= = – puk 2012-01-10 23:45:24

什么尺寸是你的画布？也许它比'140x100'小。尝试绘制其他类似圆圈或图片的图画，以便更好地了解哪个象限被剪切 – puk 2012-01-10 23:47:16

下面是一些例子中的jsfiddle链接http://jsfiddle.net/pukster/sdQ7U/2/

我的猜测是，fabric.js从原点（中点）计算的一切，因为它准确地画四分之一即使画布是矩形大小的10倍也是如此。我的猜测是，top和left实际上是指原点而不是虚拟边界框的顶部和左侧。麻烦的是fabricjs上很少有文档。是否有任何理由你使用fabricjs而不是easeljs

编辑这是同样的小提琴，但与广场，而不是矩形（更清晰）http://jsfiddle.net/pukster/sdQ7U/3/

编辑 OK，我现在几乎完全肯定fabric.js使用中心作为top/left。我撕开了它们的example off of their site，并用透明的couterpart覆盖它们，以将它们编码在纯帆布http://jsfiddle.net/pukster/uathZ/2/（蓝色边框是画布元素的极限）中。

Overlayed Pure Canvas images

你看到的是，这些箱子是了一半，但圆（我只画了一个半圆，否则不会有可辨别的）是完全重叠正好偏移。这是HTML Canvas中的b/c，圆形坐标(x,y)指的是原点而不是左上角。我没有为三角形b/c打扰，我的三角形有点生锈。我个人认为使用条款top和left会导致误导，因为x和y会更具代表性和更短。

来源

2012-01-11 00:05:13 puk

感谢您的详细解答。你是对的，fabricJS Object Origins位于对象中间。我目前使用的是fabricJS，因为它是一个功能齐全的框架，具有许多强大的功能（例如SVG支持，我将在稍后使用）。也许我会切换到processingjs。我会尽量在后面比较两者。 – McFarlane 2012-01-11 08:17:34

@MFFarlane：你是否继续这样做，结果如何？我会对后续行动感兴趣，包括你提到的比较。 – 2013-03-11 20:21:33

FWIW，我们计划在即将到来的1.4版本中默认切换到originX/originY被左/顶部默认。大多数用户觉得这更直观。 – kangax 2013-10-24 14:17:34

是的，这是非常意想不到的，甚至更多的无证。

解决方法：

集

originX: "left" 
originY: "top"

每个创建的对象。

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

来源

2013-03-19 11:20:21 citykid

您不必为每个对象设置它。织物需要很大的继承优势，所以你可以做'fabric.Object.prototype.originX = true; fabric.Object.prototype.originY = true;' – kangax 2013-10-24 14:18:26

我讨厌挑选一位关于他自己的评论的图书作者，但不应该是'fabric.Object.prototype.originX =“left”; fabric.Object.prototype.originY =“top”;'？ – markerikson 2013-11-19 22:52:36

kangax，尊重项目和提示。让我再提出一个建设性的咆哮：像绘图对象这样的轻量级对象应该是最后一个因性能原因而使用继承的对象。 – citykid 2013-11-20 21:51:00

我想评论，但缺乏这样做的声誉。所以无论如何，这里是当我做下面会发生什么：

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

形状获取呈现罚款，但是当我选择它的调整，或移动，它就会偏移到不同的位置。最好的方法似乎是使用set（）方法分别设置每个对象的坐标。

来源

2014-01-17 20:47:12

画布Fabric.js坐标已抵消了

回答

相关问题