javascript - 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>

正如你所看到的，我有一个尺寸为 512px 的 Canvas 和一个宽度为 512px 的 div 用于测试。我还创建了用于绘制大小为 512px 的矩形对象。

参见screenshot

Fabric 绘制半尺寸的矩形。你能告诉我为什么或者我做错了什么吗？

最佳答案

矩形实际上是 512, 512。您遇到的问题是对象的原点。

这是矩形的中间，因此仅显示矩形的四分之一。

尝试将顶部和左侧更改为 256，您会看到差异。

关于javascript - Fabric.js 对象大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13860741/