1
TL; DR：爲什麼圖像的位置不同？Fabric.js 1.3.12中的座標系已更改？
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)。那麼這是一個錯誤？或者是一個組的座標系統的特徵？
UPDATE：如果單純使用
$(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)。
更新2：OK，我需要手動設置{left: 0, top:0}爲組。但爲什麼？