Question

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);
  });
});

网页看起来像

enter image description here

但是如果我将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>

网页看起来像

enter image description here

第二种情况对我来说更有意义。它将图像的中心设为(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)。

enter image description here

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

Answer 1

您所看到的是originX / originY默认值已从“中心”/“中心”更改为“左”/“顶部”。

对于几乎所有以Fabric开头的人而言，这是一个非常令人困惑的行为，我们终于摆脱了它。您可以在更改日志中看到此突破性更改（未发布的边缘/开发版本和最新的稳定版本1.3.0）

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

originX / originY表示对象的左/顶值相对于。所有物体的左/顶部曾经相对于它们的中心;现在我们正在使用更常见的左/上角系统。

在Fabric.js 1.3.12中更改了坐标系统？

1 个答案: