Fabric.js 中的画布坐标有偏移答案

【问题标题】：Canvas coordinates in Fabric.js have offsetFabric.js 中的画布坐标有偏移
【发布时间】：2012-02-07 09:14:06
【问题描述】：

我刚开始使用 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，而是在某处。更高。

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

提前致谢，麦克法兰

【问题讨论】：

嗨 McFarlane =) 欢迎来到 SO。每当发布代码时，如果您在 jsfiddle.net 上发布完整（或最小示例）代码，您总是会得到更快的答案，只需前往那里，粘贴您的代码，保存，然后将链接粘贴回此处 =)
你的画布尺寸是多少？也许它小于140x100。尝试绘制其他东西，例如圆形或图片，以便更好地了解哪个象限被剪裁

标签： javascript html canvas fabricjs

【解决方案1】：

这是一个带有一些示例的 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。我撕掉了他们的example off of their site，并用透明的部分覆盖了那些形状，如果它们是用纯画布编码的http://jsfiddle.net/pukster/uathZ/2/（蓝色边框是画布元素的限制）。

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

【讨论】：

感谢您的详细解答。你是对的，fabricJS 对象起源在对象的中间。我目前正在使用fabricJS，因为它是一个具有许多强大功能的一体化框架（例如SVG支持，我稍后将使用它）。也许我会切换到 processingjs。稍后我会尝试比较两者。
@McFarlane：您是否继续这样做，结果如何？我有兴趣跟进，包括你提到的比较。
FWIW，我们计划在即将发布的 1.4 版本中切换到 originX/originY 默认为左/上。大多数用户认为这更直观。

【解决方案2】：

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

解决方法：

设置

originX: "left"
originY: "top"

对于每个创建的对象。

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

【讨论】：

您不必为每个对象都设置它。 Fabric 充分利用了继承，所以你可以这样做 fabric.Object.prototype.originX = true; fabric.Object.prototype.originY = true;
我讨厌挑剔图书馆的作者自己的评论，但那不应该是fabric.Object.prototype.originX = "left"; fabric.Object.prototype.originY = "top"; 吗？
kangax，尊重项目和提示。让我提出另一个建设性的咆哮：出于性能原因，像绘图对象这样的轻量级对象应该是最后一个使用继承的对象。
@markerikson - kangax 关于继承财产的评论就像一个魅力！

【解决方案3】：

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

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

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

【讨论】：