2012-12-13 106 views
0

我遇到對象大小的問題。下面是一個簡單的例子:Fabric.js對象大小

<!doctype html> 
<html> 
<head> 
    <script src="js/fabric-0.9.15.min.js"></script> 
</head> 
<body> 
    <canvas id="test" width="512" height="512" style="border: 1px solid black;"></canvas> 

    <div style="width: 512px; background: blue;">&nbsp;</div> 

    <script> 
     var canvas = new fabric.Canvas('test'); 

     var rect = new fabric.Rect({ 
     left: 0, 
     top: 0, 
     fill: 'red', 
     width: 512, 
     height: 512 
     }); 

     canvas.add(rect); 
    </script> 
</body> 
</html> 

正如你可以看到我有與尺寸512x512像素畫布和我有用於測試的寬度512x512像素一個div。此外,我創建了矩形對象繪製大小爲512px。

screenshot

面料繪製矩形的一半大小。你能告訴我爲什麼或者我做錯了什麼嗎?

回答

2

矩形實際上是512,512。你遇到的問題是你的對象的起源。

這是矩形的中間,因此只顯示矩形的四分之一。

嘗試將頂部和左側更改爲256,您將看到區別。

+0

真的=)謝謝 –