Fabric.js 1.3.12 中的坐标系发生了变化？答案

【问题标题】：Coordinates system changed in Fabric.js 1.3.12?Fabric.js 1.3.12 中的坐标系发生了变化？
【发布时间】：2013-11-24 21:27:53
【问题描述】：

TL; DR：为什么图片的位置不一样？

1.3.0 和 1.3.12 的坐标系似乎有些不同。这是HTML文件test.html，我自己使用新克隆和构建的fabric.js（）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>test</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script type="text/javascript" src="./fabric.js/dist/all.min.js"></script>
  <script type="text/javascript" src="test.js"></script>
</head>
<body>
  <canvas id="c"></canvas>
</body>
</html>

和 JavaScript 文件 test.js:

$(function(){
  var canvas = new fabric.Canvas('c');
  canvas.setWidth(window.innerWidth);
  canvas.setHeight(window.innerHeight);
  fabric.Image.fromURL('test.png', function(img) {
    var group = new fabric.Group([img],
    {
      hasBorders: false,
      hasControls: false,
      selectable: true,
      evented: true,
    })
    canvas.add(group);
  });
});

网页看起来像

但是如果我把fabric.js改成CDN上的版本，也就是1.3.0：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>test</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
  <script type="text/javascript" src="test.js"></script>
</head>
<body>
  <canvas id="c"></canvas>
</body>
</html>

网页看起来像

第二种情况对我来说更有意义。它将图像的中心置于(0,0)。但在第一种情况下，它似乎将图像中心放在(image_width, image_height)。那么这是一个错误吗？还是组坐标系的特征？

更新：如果只是使用

$(function(){
  var canvas = new fabric.Canvas('c');
  canvas.setWidth(window.innerWidth);
  canvas.setHeight(window.innerHeight);
  fabric.Image.fromURL('test.png', function(img) {
    canvas.add(img);
  });
});

，图片的左上角将附加到(0,0)。

UPDATE 2：好的，我需要为组手动设置{left: 0, top:0}。但为什么呢？

【问题讨论】：

标签： fabricjs

【解决方案1】：

您看到的是originX/originY 默认值已从“center”/“center”更改为“left”/“top”。

对于几乎所有从 Fabric 开始的人来说，这都是一个非常令人困惑的行为，我们终于摆脱了它。你可以在更新日志中看到这个重大变化（在未发布的 edge/dev 版本和最新的稳定版 1.3.0 之间）

https://github.com/kangax/fabric.js/blob/master/CHANGELOG.md

originX/originY 表示对象的左/上值相对于什么。所有对象的左侧/顶部过去都相对于它们的中心；现在我们正在使用更常见的左/上角系统。

【讨论】：